My product landing page project needs reviews, feedback and help

**need reviews on my product landing page project **
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>product page</title>
	</head>
	<body>
	<header id="header">
	<img id="header-image" src="C:\Users\obanl\Desktop\my design collection\untitled.png">
	<h2> Boazoft products </h2>
	<nav id="navbar"> 
	<ul>
	<li><a class="nav-link" href="#features">features<a/></li>
	<li><a class="nav-link" href="#how it works">how it works<a/></li>
	<li><a class="nav-link" href="#pricing">pricing<a/></li>
	</nav>
	
	
	</header>
		<main>
		<section> 
		<h2 class="h2">CBT  App & full curriculum purchase.<h2>
		<form id="form" action="https://www.freecodecamp.com/email-submit">  
		<input type="email" id="email" name="email" placeholder="Enter your email here">
		<p><button type="submit" id="submit"> GET STARTED</button></p>
		</form>
		</section>
	<section id="features">
	<h2 class="h2"> FEATURES </h2>
	<p>
	 <span>*<u> C B T  App :</u></span><p>
	<P>GAIN ACCESS TO ALL 100,000,000</P>
	<P> WAEC PRACTICE QUESTIONS </P>
	<P>JAMB CBT QUESTIONS</P>
	<P>NECO PRACTICE QUESTIONS</P>
	<P>JSSCE/BECE PRACTICE QUESTIONS</P>
	
	<P><li> <span> *<U>SECONDARY SCHOOL CURRICULUM : </U> </span></LI>
	</P>
	<P>Gaining access to all secondary school subjects curriculum (JSS 1-3 & SSS 1-3 )
	
	</SECTION>
	
	<section id="how it works">  
	<h2 class="h2" > BCC video on how "Boazoft  C B T  App"  and  "Boazoft secondary school curriculum"  works</h2>
	<iframe  height="315" width="400" id="video" src="\Users\obanl\Desktop\coding & programing\videos/Ryan Reynold’s Speech Will Leave You SPEECHLESS — Best Life Advice.mp4">  </iframe>
	</section>
	
	<section  id="pricing"> 
	<h3><u> price list of boazoft products</u> </h3>
	<div class="product">CBT app</div>
	<div class="features">  
	<h2 class="h2"> $3 </h2>
	<ol>
	<li  class="1">Waec practice questions </li>
	<li class="1"> Jamb cbt questions</li>
	<li class="1"> Neco practice questions</li>
	<li class="1">Jssce/bece practice questions </li>
	</ol>
	<button class="btn">Select</button>
      
	</div>
	
	<div class="product"> SECONDARY SCHOOL CURRICULUM</div>
	<div class="features"> 
<h2 class="h2"> $3 </h2>	
	<ol>
	<li class="1"> JSS 1-3 classes & curriculum</li>
	<li class="1"> SSS 1-3 classes & curriculum </li>
	</ol>
	<button class="btn">Select</button>
      
	</div>
	
	<div class="product"> 2 IN 1 COMBO PURCHASE </div>
	<div class="features">
<h2 class="h2"> $5 </h2>	
	<ol>
	<li class="1">Waec practice questions </li>
	<li class="1"> Jamb cbt questions</li>
	<li class="1"> Neco practice questions</li>
	<li class="1">Jssce/bece practice questions </li>
	<li class="1"> JSS 1-3 classes & curriculum</li>
	<li class="1"> SSS 1-3 classes & curriculum </li>
	</ol>
	<button class="btn">Select</button>
      
	</div>
	
	</section>
	

	
	</main>
	<footer>
	<a href="https://product-landing-page.freecodecamp.rocks/#"> Privacy </a>
            <a href="https://product-landing-page.freecodecamp.rocks/#">Terms</a>
            <a href="https://product-landing-page.freecodecamp.rocks/#">Contact</a>
	</footer>
	</body>
	
	
	
	</html>
/* file: styles.css */
	header {
	align-items: center;
	position: fixed;
	top:0;
	left:0;
	background-color: rgb(112, 112, 184);
	height: 60px;
	width: 100%;
	display:flex;
	font-family: arial;
	}
	#header-image {
	padding: 10px ;
	}
	
	h2 {
	font-family: arial;
	color: yellow;
	}
	body {
	background-color: rgb(225, 225, 183);
	}
span {font-weight: bold; font-size: 20px;}

nav > ul > li:hover {
display: flex;
  background-color: green;
  color: #1b1b32;
  cursor: pointer;
  
}


a { 
text-decoration: none;
color: rgb(225, 225, 183);


}
li {
list-st: none;
background-colo: yellow;
}

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  
  
}
ul{padding-top: 5px;}

main {
padding-top: 60px;
color: black;
text-align: center;
font-family: arial
}
.h2 {
color: rgb(0, 0, 85);
font-size: 25px;}

input {
height: 30px;
width:300px;
background-color: rgb(165, 223, 237)
}
button {
margin-top: 0px;
color: white;
background-color: green;
height: 30px;
}

.product {
display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 52%;
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
  right: 100px;
  color: black;
  background-color: rgb(265, 0, 173);
  font-weight: bold;
   margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
}
.features {
  background-color: #ddd;
  color: black;
  padding: 10px;
  width: 50%;
  text-transform: lowercase;
  font-weight: 700;
  border: 1px solid #000;
  top: 0;
   margin-left: auto;
    margin-right: auto;
	font-size: 14px;

}
.h2 {
  margin-top: 15px;
}
.product > ol {
  margin: 15px 0;
}

.product > ol > .1 {
  padding: 5px 0;
}




.product > button:hover {
  background-color: orange;
  transition: background-color 1s;
}

@media {

}
h3 {
color: #2f3b7d;
background-color: yellow;
}
    

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53

Challenge: Learn CSS Variables by Building a City Skyline - Step 46

Link to the challenge:

You have linked to a different challenge that you are asking for help with.


  • You have to link to the stylesheet in the HTML <link rel="stylesheet" href="styles.css">

  • You can’t use system local file paths. Upload the image to some host (google free image hosting) and link to that.

  • Most of the errors are from using incorrect id values, e.g. you have header-image and it is asking for header-img

  • You should have an input element with an id of submit.

It is specifically asking for an input element as the submit button.

ohh! now i can see my mistakes,
thanks for your recommendation of " google [free image hosting]" Never new it existed

Thanks a lot you are appreciated