<header id="header">
  <div id="title-container">
    <img id="header-img" src="https://image.shutterstock.com/image-vector/piano-keyboard-logo-music-design-260nw-726497899.jpg"></img>
    <h1>Original Pianos</h1>
  </div>

  <nav id="nav-bar">
    <a href="#info-container" class="nav-link">Features</a>
    <a href="#video" class="nav-link">How It Works</a>
    <a href="#cards-container" class="nav-link">Pricing</a>
  </nav>
</header>

<h2 id="description">Hand crafted masterpieces</h2>

<form action="https://www.freecodecamp.com/email-submit" id="form" method="post">
  <input type="email" id="email" name="email" placeholder="Enter your email address" required />
  <input type="submit" id="submit" value="GET STARTED" />
</form>

<section id="info-container">
  <span class="material-icons md-48"> done_all </span>
  <div>
    <h2>Premium Materials</h2>
    <p>
      Our pianos use the shiniest wood which is sourced locally. This will
      increase the longevity of your purchase.
    </p>
  </div>
  <span class="material-icons md-48"> local_shipping </span>
  <div>
    <h2>Shipping Fast</h2>
    <p>
      We make sure you recieve your piano as soon as we have finished making
      it. We also provide free returns if you are not satisfied.
    </p>
  </div>
  <span class="material-icons md-48"> assignment_turned_in </span>
  <div>
    <h2>Quality Assurance</h2>
    <p>
      For every purchase you make, we will ensure there are no damages or
      faults and we will check and test the pitch of your instrument.
    </p>
  </div>
</section>

<iframe id="video" src="https://www.youtube.com/embed/6YYCknOjN38?start=21" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<section id="cards-container">
  <div class="cards">
    <h3>Digital Pianos</h3>
    <div class="price-details">
      <h4>$500-2,000</h4>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
    </div>
    <button>Select</button>
  </div>
  <div class="cards">
    <h3>Upright Pianos</h3>
    <div class="price-details">
      <h4>$3,000-6,500</h4>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
    </div>
    <button>Select</button>
  </div>
  <div class="cards">
    <h3>Grand Pianos</h3>
    <div class="price-details">
      <h4>$7,000-30,000</h4>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
    </div>
    <button>Select</button>
  </div>
</section>

<footer>
  <a href="#">Privacy</a>
  <a href="#">Terms</a>
  <a href="#">Contact</a>
  <p>Copyright 2021, Original Pianos</p>
</footer>

body {
	margin: 0;
	box-sizing: border-box;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}
header {
  position: sticky;
  top: 0;
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: black;
  padding: 0.5rem;
}
div#title-container {
	width: 20em;
}
#header-img {
	width: 48px;
	position: relative;
	top: 1rem;
}
h1 {
  display: inline;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
  color: white;
}
nav#nav-bar a {
	margin-left: 3em;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif, Geneva, Tahoma, sans-serif;
	font-weight: 600;
	color: white;
	padding: 0.5rem;
}
a {
	text-decoration: none;
}
h2#description {
	width: 16.5rem;
	margin: 2rem auto;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 1.2rem;
}
form {
	width: 18.5em;
	margin: 3rem auto;
}
section#info-container {
	margin: 2rem auto;
	display: flex;
	flex-flow: column wrap;
}
section span {
	width: 1em;
}
div h2 {
	width: 10em;
	text-align: center;
}
section span, h2 {
	margin: 0 auto;
	
}
h2+p {
	text-align: center;
}
iframe {
	display: block;
	margin: 0 auto;
	width: 100vw;
	max-width: 30rem;
	height: 17rem;
}
section#cards-container {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(3, 15rem);
	justify-content: center;
	margin-top: 2em;
}
div.cards {
	border: 0.05rem solid black;
	text-align: center;
	padding-bottom: 1em;
}
div.cards h3 {
	background-color: black;
	color: white;
	margin: 0;
    height: 1em;
	padding: 1rem;
}

footer {
	background-color: black;
	color: white;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: -1rem;
	padding: 1rem;
}
footer a {
	margin: 1rem;
	color: white;
}
@media (max-width: 752px) {
	section#cards-container {
		grid-template-columns: repeat(1, 15rem);
	}
	nav a {
		display: block;
	}
	header {
		flex-flow: column;
	}
}