thusmiley/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div id="header">
        <div class="left-header">
          <img src="./original_trombones.png" alt="logo" id="logo" />
        </div>
        <div class="right-header">
          <nav>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#video">How It Works</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <!-- Form -->
    <section>
      <div id="form">
        <h1>Handcrafted, home-made masterpieces</h1>
        <form action="">
          <input
            type="email"
            name="email"
            id="email"
            placeholder="Enter your email address"
          />
          <br />
          <button type="submit" value="submit">GET STARTED</button>
        </form>
      </div>
    </section>
    <!-- Features -->
    <section>
      <div class="features" id="features">
        <div class="feature-left">
          <img class="icon" src="./image1.png" alt="" />
          <img class="icon" src="./image2.png" alt="" />
          <img class="icon" src="./image3.png" alt="" />
        </div>
        <div class="feature-right">
          <h1>Premium Materials</h1>
          <p>
            Our trombones use the shiniest brass which is sourced locally. This
            will increase the longevity of your purchase.
          </p>
          <br /><br />
          <h1>Fast Shipping</h1>
          <p>
            We make sure you recieve your trombone as soon as we have finished
            making it. We also provide free returns if you are not satisfied.
          </p>
          <br /><br />

          <h1>Quality Assurance</h1>
          <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>
      </div>
    </section>
    <!-- Video -->
    <section id="video">
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/2Ji-clqUYnA"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </section>
    <!-- Pricing -->
    <section id="pricing">
      <div class="pricing">
        <h1>TENOR TROMBONE</h1>
        <h2>$600</h2>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button><a href="#">SELECT</a></button>
      </div>
      <div class="pricing">
        <h1>BASS TROMBONE</h1>
        <h2>$900</h2>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button><a href="#">SELECT</a></button>
      </div>
      <div class="pricing">
        <h1>VALVE TROMBONE</h1>
        <h2>$1,200</h2>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands m.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button><a href="#">SELECT</a></button>
      </div>
    </section>
    <footer>
      <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Terms</a></li>
      </ul>
      <p>Copyright 2016, Original Trombones</p>
    </footer>
  </body>
</html>

## styles.css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  background-color: #eee;
}
img {
  max-width: 100%;
}
li {
  display: inline;
}
a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  margin: 0 12px;
}
a:hover {
  color: #ff8c00;
}
#header {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 20px;
  background-color: #eee;
  position: fixed;
  top: 0;
  left: 0;
}
.left-header {
  width: 40%;
}
.right-header {
  width: 60%;
}
#logo {
  max-width: 300px;
}
#form {
  margin-top: 120px;
  text-align: center;
}
#email {
  width: 250px;
  margin: 20px;
  padding: 6px;
}
button {
  width: 120px;
  padding: 5px;
  background-color: #f1c40e;
  border-radius: 2px;
  border: none;
  font-size: 14px;
  font-weight: bold;
}
button:hover {
  cursor: pointer;
  background-color: #ff8c00;
}
.icon {
  max-width: 70px;
}
#video {
  justify-content: center;
  display: flex;
}
.features {
  display: flex;
  justify-content: center;
  margin: 70px 0 70px 0;
}
.feature-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 0 30px;
  justify-content: space-between;
  /* background-color: darkorchid; */
}
.feature-right {
  line-height: 1.3;
  display: flex;
  /* background-color: rgb(137, 139, 0); */
  flex-direction: column;
  padding: 0 20px 0 20px;
  justify-content: space-around;
}
#pricing {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin: 70px 0 40px 0;
}
.pricing {
  border: solid gray 1px;
  border-radius: 3px;
  width: 300px;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  margin: 10px 5px 10px 0;
}
.pricing h1 {
  background-color: #ddd;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}
.pricing p {
  font-size: 16px;
  line-height: 2;
}
.pricing h2 {
  padding: 20px;
}
.pricing button {
  width: 100px;
  padding: 10px;
  margin: 20px 0 10px 0;
}
footer {
  text-align: right;
  background-color: #ddd;
  padding: 10px;
  margin: 0;
}
@media (max-width: 640px) {
  #header {
    position: relative;
    display: inline;
  }
  .left-header {
    width: 100vw;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .right-header {
    width: 100vw;
    margin-top: 15px;
  }
  #form {
    margin-top: 40px;
  }

  footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Landing Page</title>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<header>
	<div id="header">
	<div class="left-header">
	<img src="./original_trombones.png" alt="logo" id="logo" />
	</div>
	<div class="right-header">
	<nav>
	<ul>
	<li><a href="#features">Features</a></li>
	<li><a href="#video">How It Works</a></li>
	<li><a href="#pricing">Pricing</a></li>
	</ul>
	</nav>
	</div>
	</div>
	</header>
	<!-- Form -->
	<section>
	<div id="form">
	<h1>Handcrafted, home-made masterpieces</h1>
	<form action="">
	<input
	type="email"
	name="email"
	id="email"
	placeholder="Enter your email address"
	/>
	<br />
	<button type="submit" value="submit">GET STARTED</button>
	</form>
	</div>
	</section>
	<!-- Features -->
	<section>
	<div class="features" id="features">
	<div class="feature-left">
	<img class="icon" src="./image1.png" alt="" />
	<img class="icon" src="./image2.png" alt="" />
	<img class="icon" src="./image3.png" alt="" />
	</div>
	<div class="feature-right">
	<h1>Premium Materials</h1>
	<p>
	Our trombones use the shiniest brass which is sourced locally. This
	will increase the longevity of your purchase.
	</p>
	<br /><br />
	<h1>Fast Shipping</h1>
	<p>
	We make sure you recieve your trombone as soon as we have finished
	making it. We also provide free returns if you are not satisfied.
	</p>
	<br /><br />

	<h1>Quality Assurance</h1>
	<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>
	</div>
	</section>
	<!-- Video -->
	<section id="video">
	<iframe
	width="560"
	height="315"
	src="https://www.youtube.com/embed/2Ji-clqUYnA"
	title="YouTube video player"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
	></iframe>
	</section>
	<!-- Pricing -->
	<section id="pricing">
	<div class="pricing">
	<h1>TENOR TROMBONE</h1>
	<h2>$600</h2>
	<p>Lorem ipsum.</p>
	<p>Lorem ipsum.</p>
	<p>Lorem ipsum dolor.</p>
	<p>Lorem ipsum.</p>
	<button><a href="#">SELECT</a></button>
	</div>
	<div class="pricing">
	<h1>BASS TROMBONE</h1>
	<h2>$900</h2>
	<p>Lorem ipsum.</p>
	<p>Lorem ipsum.</p>
	<p>Lorem ipsum dolor.</p>
	<p>Lorem ipsum.</p>
	<button><a href="#">SELECT</a></button>
	</div>
	<div class="pricing">
	<h1>VALVE TROMBONE</h1>
	<h2>$1,200</h2>
	<p>Plays similar to a Trumpet</p>
	<p>Great for Jazz Bands m.</p>
	<p>Lorem ipsum dolor.</p>
	<p>Lorem ipsum.</p>
	<button><a href="#">SELECT</a></button>
	</div>
	</section>
	<footer>
	<ul>
	<li><a href="#">Privacy</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Terms</a></li>
	</ul>
	<p>Copyright 2016, Original Trombones</p>
	</footer>
	</body>
	</html>
	@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	font-family: "Roboto", sans-serif;
	background-color: #eee;
	}
	img {
	max-width: 100%;
	}
	li {
	display: inline;
	}
	a {
	text-decoration: none;
	color: black;
	font-weight: bold;
	margin: 0 12px;
	}
	a:hover {
	color: #ff8c00;
	}
	#header {
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 20px;
	background-color: #eee;
	position: fixed;
	top: 0;
	left: 0;
	}
	.left-header {
	width: 40%;
	}
	.right-header {
	width: 60%;
	}
	#logo {
	max-width: 300px;
	}
	#form {
	margin-top: 120px;
	text-align: center;
	}
	#email {
	width: 250px;
	margin: 20px;
	padding: 6px;
	}
	button {
	width: 120px;
	padding: 5px;
	background-color: #f1c40e;
	border-radius: 2px;
	border: none;
	font-size: 14px;
	font-weight: bold;
	}
	button:hover {
	cursor: pointer;
	background-color: #ff8c00;
	}
	.icon {
	max-width: 70px;
	}
	#video {
	justify-content: center;
	display: flex;
	}
	.features {
	display: flex;
	justify-content: center;
	margin: 70px 0 70px 0;
	}
	.feature-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px 0 30px;
	justify-content: space-between;
	/* background-color: darkorchid; */
	}
	.feature-right {
	line-height: 1.3;
	display: flex;
	/* background-color: rgb(137, 139, 0); */
	flex-direction: column;
	padding: 0 20px 0 20px;
	justify-content: space-around;
	}
	#pricing {
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	margin: 70px 0 40px 0;
	}
	.pricing {
	border: solid gray 1px;
	border-radius: 3px;
	width: 300px;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
	margin: 10px 5px 10px 0;
	}
	.pricing h1 {
	background-color: #ddd;
	font-size: 18px;
	font-weight: bold;
	padding: 10px;
	}
	.pricing p {
	font-size: 16px;
	line-height: 2;
	}
	.pricing h2 {
	padding: 20px;
	}
	.pricing button {
	width: 100px;
	padding: 10px;
	margin: 20px 0 10px 0;
	}
	footer {
	text-align: right;
	background-color: #ddd;
	padding: 10px;
	margin: 0;
	}
	@media (max-width: 640px) {
	#header {
	position: relative;
	display: inline;
	}
	.left-header {
	width: 100vw;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	}
	.right-header {
	width: 100vw;
	margin-top: 15px;
	}
	#form {
	margin-top: 40px;
	}

	footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	}