Https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page

<head>
// Product Landing Page
//I found one Error-Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer). 
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
  
<div id="page-wrapper">


<header id="header">  <div class="logo"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div><nav id="nav-bar">
  <ul>
    <li>
  <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
  </li>
  <li>
  <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
  </li>
  <li>
  <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
  </li>
  </ul>
  <div class="container"></div>
  <section id="hero">
  <h2 id="heading1">Handcrafted, home-made masterpieces</h2>
  
 <form id="form" action="https://www.freecodecamp.com/email-submit">
 
 <input id="email" placeholder="Enter your email address" type="email" name="email"/>
 <input id="submit" type="submit" value="GET STARTED" class="btn"/>
 
 </form>
 </section>
 <div class="container">
   <section id="premium-materials">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i></div>
       <div class="desc">
     <h2>Premium Materials</h2>
     <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
     </div>
     
     
     </section>
     <section id="fast-shipping">
          <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
       <h2>Fast Shipping</h2>
      <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>
     </section>
     <section id="quality-assurance">
              <div class="icon">
          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
       <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>
     </section>
  <section id="how-it-work">
      <iframe id="video" src="https://www.youtube.com/embed/JEwOy5Fm1yw"></iframe>
    </section>
<footer>
<div class="footer-img">
  <img src="https://i.imgur.com/hCrQkJi.png">
</div>
  
  <ul>
    <li><a href="#" class="footer-link">Privacy</a></li>
    <li><a href="#" class="footer-link">Terms</a></li>
    <li><a href="#" class="footer-link">Contact</a></li>
  </ul>
  <span>Copyright 2016, Alok</span>
</footer>
 </div>
  </nav>
  </div></header>
html {
scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

header .logo-image {
  float: left;
  width: 70px;
  height: 63px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
}

.background {
  background-image: url(https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 670px;
}

header {
  position: fixed;
  background: black;
  height: 70px;
  width: 100vw;
  box-shadow: 0 3px 0 #EC7063;
}

header ul {
	float: right;
	margin: 0px;
	padding: 0px;
	padding-right: 10px;
	list-style: none;
}

header .menu-toggle {
	display: none;
}

header ul li {
  float: left;
}

header ul li a {
	display: block;
	color: white;
	padding: 25px;
	font-weight: bold;
	font-size: 17px;
	text-decoration: none;
	font-family: monospace;
}

header ul li a:hover {
	background: #3498DB;
	transition: 0.5s;
	color: black;
	padding: 25px;
	border-top: 0px;
	border-bottom: 0px;
}

.sign-up-page {
  display: flex;
  justify-content: center;
  align-items: ;
  font-size: 14px; 
  padding-top: 30px;
}

#submit {
  padding: 5px;
  border-radius: 5px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: bold;
  background: black;
  color: #1ABC9C;
}

input:hover[type="submit"] {
  transform: scale(1.05);
}

.description {
  width: 500px;
  font-size: 19px;
  color: white;
  display: inline-block;
  padding-top: 170px;
}

.center {
	text-align: center;
}

#form {
  text-align: center;
  margin-bottom: 25px;
  color: white;
}

#email {
	width: 230px;
}

#overview {
  display: flex;
  justify-content: center;
  align-content: center;
  background: #1ABC9C;
  color: black;
  padding-top: 40px;
  font-size: 25px;
  font-family: monospace;
  text-shadow: 3px 3px #EC7063;
}

.vdeo {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 160px;
}

#services {
  background: #1ABC9C;
  color: black;
}

.services1 {
  display: inline-block;
  width: 400px;
  font-size: 20px;
  padding-left: 12%;
  padding-bottom: 200px;
}

.services2 {
  display: inline-block;
  padding-left: 9%;
  padding-top: 200px;
  padding-bottom: 200px;
}

#process {
  background: black;
  color: #1ABC9C;
}

.process1 {
  display: inline-block;
  padding-left: 12%;
  padding-top: 200px;
  padding-bottom: 200px;
}

.process2 {
  display: inline-block;
  width: 370px;
  font-size: 20px;
  padding-left: 9%;
  padding-bottom: 200px;
}

#team {
  background: #1ABC9C;
  color: black;
}

.team1 {
  display: inline-block;
  width: 400px;
  font-size: 20px;
  padding-left: 12%;
  padding-bottom: 200px;
}

.team2 {
  display: inline-block;
  padding-left: 9%;
  padding-bottom: 200px;
  padding-top: 200px;
}

#culture {
  background: black;
  color: #1ABC9C;
}

.culture1 {
  display: inline-block;
  padding-left: 12%;
  padding-top: 200px;
  padding-bottom: 200px;
}

.culture2 {
  display: inline-block;
  width: 370px;
  font-size: 20px;
  padding-left: 9%;
  padding-bottom: 200px;
}

footer {
  margin-top: 0px;
  background-color: black;
  padding: 10px;
  border-top: 3px solid #EC7063;
}

.footer-img img {
	padding-top: 15px;
	padding-bottom: 18px;
	height: 55px;
	width: 58px;
	padding-left: 48%;
}

footer > ul {
  display: flex;
  justify-content: center;
  padding-right: 30px;
  list-style: none;
}

.footer-link {
	color: orange; 
	text-decoration: none; 
	font-family: serif; 
	font-size: 17px;
}

.footer-link:hover {
	color: gray;
}

footer > ul > li {
  padding: 0px 35px;
}

footer > span {
  display: flex;
  justify-content: center;
  font-size: 1em;
  color: skyblue;
}

@media (max-width: 600px) {
	header {
		position: fixed;
		box-shadow: 0 2px 0 #EC7063;
	}
	
	header ul {
		width: 100%;
		background: #3498DB;
		max-height: 0px;
		overflow: hidden;
	}
	
	.showing {
		max-height: 100em;
		transition: 1.5s;
	}
	
	header ul li {
		width: 100%;
		border-bottom: 1px solid black;
		height: 61px;
	}
	
	header ul li:nth-child(5) {
		border-bottom: 1px solid black;
	}
	
	header ul li a {
		padding: 22px;
		font-size: 14.5px;
	}

	header ul li a:hover {
		padding: 22px;
		font-size: 14.5px;
	}
	
	header .menu-toggle {
		display: block;
		position: absolute;
		right: 20px;
		top: 22px;
		font-size: 25px;
		color: white;
		cursor: pointer;
	}
	
	header .menu-toggle:hover {
		color: #1ABC9C;
		transition: 0.5s;
	}
	
	header .logo-image {
		width: 65px;
	    height: 62.5px;
	    padding-top: 3px;
	    padding-right: 3px;
	    padding-bottom: 3px;
	    padding-left: 3px;
	}
	
	.sign-up-page {
		display: flex;
		justify-content: center;
		align-items: top;
		font-size: 9px;
	}

	#submit {
		padding: 5px;
		border-radius: 5px;
		margin-top: 3px;
		font-size: 8px;
		font-weight: bold;
		background: black;
		color: #1ABC9C;
	}

	input:hover[type="submit"]  {
		transform: scale(1.05);
	}

	.description {
		width: 250px;
		font-size: 11px;
		color: white;
		display: inline-block;
		padding-top: 120px;
	}
	
	.center {
		text-align: center;
	}

	#form {
		text-align: center;
		margin-bottom: 60px;
		color: white;
	}
	
	#email {
		width: 150px;
	}

	#services {
		background: #1ABC9C;
		color: black;
	}

	.services1 {
		padding-top: 65px;
		display: inline-block;
		width: 260px;
		padding-right: 11%;
		font-size: 12px;
		padding-left: 11%;
		padding-bottom: 0px;
	}

	.services2 {
		display: inline-block;
		padding-left: 11%;
		padding-top: 20px;
		padding-right: 11%;
		padding-bottom: 75px;
    }
	
	.services2 img {
		max-width: 100%;
		height: auto;
	}
	
	#process {
		background: black;
		color: #1ABC9C;
		display: flex;
		flex-wrap: wrap-reverse;
    }
 
	.process1 {
		padding-left: 11%;
		padding-top: 20px;
		padding-bottom: 75px;
		padding-right: 11%;
	}

	.process2 {
		width: 260px;
		font-size: 12px;
		padding-left: 11%;
		padding-top: 65px;
		padding-right: 11%;
		padding-bottom: 0px;
	}
	
	.process1 img {
		max-width: 100%;
		height: auto;
	}

	#team {
		background: #1ABC9C;
		color: black;
	}

	.team1 {
		padding-top: 65px;
		display: inline-block;
		width: 260px;
		font-size: 12px;
		padding-left: 11%;
		padding-bottom: 0px;
	}

	.team2 {
		display: inline-block;
		padding-left: 11%;
		padding-top: 20px;
		padding-right: 11%;
		padding-bottom: 75px;
	}
	
	.team2 img {
		max-width: 100%;
		height: auto;
	}
	
	#culture {
		background: black;
		color: #1ABC9C;
		display: flex;
		flex-wrap: wrap-reverse;
    }
 
	.culture1 {
		padding-left: 11%;
		padding-top: 20px;
		padding-bottom: 75px;
		padding-right: 11%;
	}

	.culture2 {
		width: 260px;
		font-size: 12px;
		padding-left: 11%;
		padding-top: 65px;
		padding-right: 11%;
		padding-bottom: 0px;
	}
	
	.culture1 img {
		max-width: 100%;
		height: auto;
	}
	
	#overview {
		display: flex;
		justify-content: center;
		align-content: center;
		background: #1ABC9C;
		color: black;
		padding-top: 40px;
		font-size: 100%;
		font-family: monospace;
		text-decoration: bold;
		text-shadow: 2px 2px #EC7063;
		padding-bottom: 0px;
	}

	.vdeo {
		text-align: center;
		padding-top: 50px;
	}
	
	#overview #video {
		max-width: 280px;
		height: auto;
	}
	
	footer {
		margin-top: 0px;
		background-color: black;
		padding: 8px;
		height: 136px;
		border-top: 2px solid #EC7063;
	}

	.footer-img img {
		padding-top: 15px;
		padding-bottom: 15px; 
		padding-left: 43%;
		height: 45px;
		width: 47px;
	}

	footer > ul {
		display: flex;
		justify-content: center;
		padding-right: 35px;
		list-style: none;
	}

	.footer-link {
		color: orange; 
		text-decoration: none; 
		font-family: serif; 
		font-size: 14px;
		font-weight: bold;
	}

	a:hover[class="footer-link"]  {
		color: gray;
	}

	footer > ul > li {
		padding: 0px 15px;
	}

	footer > span {
		display: flex;
		justify-content: center;
		font-size: 13px;
		color: skyblue;
		line-height: 2px;
	}
}

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Please let us know what you want help with. Thanks