I have followed all instructions.The nav bar is coded to be always at the top of the viewport.There are multiple media queries.I have utilized flexbox.What is wrong?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0
Challenge Information:
Product Landing Page - Build a Product Landing Page
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header id="header">
<h1>Gates of Cosmos Tech</h1>
<nav id="nav-bar">
<a href="#Features" class="nav-link">Features</a>
<a class="nav-link" href="#Products">Products:</a>
<a class="nav-link"
href="#form">Submit</a>
</nav>
<img id="header-img" src="https://th.bing.com/th/id/OIP.8tse7GBkXibcJN6h9eYF7gAAAA?rs=1&pid=ImgDetMain"/>Your one-stop shop for expanding humanity's imperium.
</header>
<p name="intro" id="intro">Our company has been dedicated since 2025 to expanding our species across the cosmos.Our pioneering portal technology has only advanced over the ensuing decades.Whether handheld or half the size of the Lincoln Memorial(like the original prototype!),our machines are avaliable for all of your business and personal needs.</p>
<p id=features> <h1 id="Features">Features:</h1>
<img src="https://i.pinimg.com/originals/19/9a/5a/199a5aa076d15fba6b5e45ccf8c689dd.jpg"> Top notch quantum computing to ensure safe transport through chaos space.</p>
<img src=https://www.roguefab.com/wp-content/uploads/2022/01/What-is-metal-fabrication-and-its-techniques-applications-and-types.jpg>Carefully fabricated materials to ensure the machine remains stable.
<img src=https://cdn.motor1.com/images/mgl/1MkJ3/s3/fly.jpg>Cheap shipping-free with some package offers!
<iframe id=video src="https://www.youtube.com/watch?v=x-MvTJO8NeA" frameborder=0 allowfullscreen></iframe>
<div id="Products">
<h2>Products</h2>
<div id="handheld" class="product">
<div class="level">Handheld Device</div>
<h2>$500</h2>
<p>This is perfect for any personal trips,as well as your average traveling businessman.WARNING:these are not suitable for group trips.We are not responsible if you ignore this warning and are trapped in the Ethereal.</p>
</div>
<div id="nothandheld" class="product">
<div class="level">Portal</div>
<h2>$1000</h2>
<p>These are meant for large scale transportations,whether of your family to Reich-5 for their summer vacation or of a platoon of soldiers to the front.Can cause minor gravity anomalies.</p>
</div>
<div id="Stargate" class="product">
<div class="level">Stargate</div>
<h2>$10000</h2>
<p> These create large space-time ruptures for intersteller and interdimensional continuous mass transport/access,such as for a highway or mass emigration.<b>WARNING:Not intended for civilian use.</b>
WARNING:Closing rupture can cause massive gravity anomalies and/or destroy device.</p>
</div>
<div id=package1 class="product">
<div class="level">Business package</div>
<h2> $1300</h2>
This deal combines the Handheld and Portal with a $200 discount.Perfect for the wandering salesman ,high-powered executive,or razor-sharp lawyer.
</div>
<div id=package2 class="product">
<div class=level>
Soldier's package
</div>
<h2> $9900</h2>
Combine 1 Stargate with 1 Portal for $1,100 off!Large-scale operations of any sort will require at least one of these.
</div>
</div>
Place your order here[* means it is required]:
<form name="purchaser" action="https://www.freecodecamp.com/email-submit" method="post" enctype="multipart/form-data" id="form" >
<label for=email> Email* </label> <input
name="email" id="email" type="email" placeholder="yourname@whatmail.com">
<label for=order>Order*:</label><input id=placeyourorder>
<label for=comments> Comments/
Questions/Feedback:
</label> <input id=comments type=text>
<label for=biography> Tell us about yourself!:</label><input id=biography type=text>
<input id="submit" type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header id="header">
<h1>Gates of Cosmos Tech</h1>
<nav id="nav-bar">
<a href="#Features" class="nav-link">Features</a>
<a class="nav-link" href="#Products">Products:</a>
<a class="nav-link"
href="#form">Submit</a>
</nav>
<img id="header-img" src="https://th.bing.com/th/id/OIP.8tse7GBkXibcJN6h9eYF7gAAAA?rs=1&pid=ImgDetMain"/>Your one-stop shop for expanding humanity's imperium.
</header>
<p name="intro" id="intro">Our company has been dedicated since 2025 to expanding our species across the cosmos.Our pioneering portal technology has only advanced over the ensuing decades.Whether handheld or half the size of the Lincoln Memorial(like the original prototype!),our machines are avaliable for all of your business and personal needs.</p>
<p id=features> <h1 id="Features">Features:</h1>
<img src="https://i.pinimg.com/originals/19/9a/5a/199a5aa076d15fba6b5e45ccf8c689dd.jpg"> Top notch quantum computing to ensure safe transport through chaos space.</p>
<img src=https://www.roguefab.com/wp-content/uploads/2022/01/What-is-metal-fabrication-and-its-techniques-applications-and-types.jpg>Carefully fabricated materials to ensure the machine remains stable.
<img src=https://cdn.motor1.com/images/mgl/1MkJ3/s3/fly.jpg>Cheap shipping-free with some package offers!
<iframe id=video src="https://www.youtube.com/watch?v=x-MvTJO8NeA" frameborder=0 allowfullscreen></iframe>
<div id="Products">
<h2>Products</h2>
<div id="handheld" class="product">
<div class="level">Handheld Device</div>
<h2>$500</h2>
<p>This is perfect for any personal trips,as well as your average traveling businessman.WARNING:these are not suitable for group trips.We are not responsible if you ignore this warning and are trapped in the Ethereal.</p>
</div>
<div id="nothandheld" class="product">
<div class="level">Portal</div>
<h2>$1000</h2>
<p>These are meant for large scale transportations,whether of your family to Reich-5 for their summer vacation or of a platoon of soldiers to the front.Can cause minor gravity anomalies.</p>
</div>
<div id="Stargate" class="product">
<div class="level">Stargate</div>
<h2>$10000</h2>
<p> These create large space-time ruptures for intersteller and interdimensional continuous mass transport/access,such as for a highway or mass emigration.<b>WARNING:Not intended for civilian use.</b>
WARNING:Closing rupture can cause massive gravity anomalies and/or destroy device.</p>
</div>
<div id=package1 class="product">
<div class="level">Business package</div>
<h2> $1300</h2>
This deal combines the Handheld and Portal with a $200 discount.Perfect for the wandering salesman ,high-powered executive,or razor-sharp lawyer.
</div>
<div id=package2 class="product">
<div class=level>
Soldier's package
</div>
<h2> $9900</h2>
Combine 1 Stargate with 1 Portal for $1,100 off!Large-scale operations of any sort will require at least one of these.
</div>
</div>
Place your order here[* means it is required]:
<form name="purchaser" action="https://www.freecodecamp.com/email-submit" method="post" enctype="multipart/form-data" id="form" >
<label for=email> Email* </label> <input
name="email" id="email" type="email" placeholder="yourname@whatmail.com">
<label for=order>Order*:</label><input id=placeyourorder>
<label for=comments> Comments/
Questions/Feedback:
</label> <input id=comments type=text>
<label for=biography> Tell us about yourself!:</label><input id=biography type=text>
<input id="submit" type="submit">
</form>
</body>
</html>