**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: