my code doesnt work, i still get the nav-bar must stay at the top but when i do it on codepen fork it passes.
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Hancrafted masterpieces</h2>
<!--this is the form to order products -->
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email"
id="email"
name="email"
placeholder="enter email"
required>
<input id="submit" type="submit" value="Get Started" class="btn">
</form>
</section>
<!--this will be a container-->
<div class="container">
<section id="features">
<div class="grid">
<div class="icon">
<i class="fa-fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2>Fast Shipping</h2>
<p>We make sure you recive your amp as fast as possible with no delays. We provides free returns if you are not satisfied.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="desc">
<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 your amplifier.</p>
</div>
</div>
</section>
<section id="how-it-works">
<video id="video" width="620" height="440" controls>
<source src="https://marshalldotcom.blob.core.windows.net/assetrecovery/content/uploads/07d9e2c0-b2a9-4d54-b0d6-8e0d6cfda4c6.mp4?20210924124105" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<!--this is for the pricing section-->
<section id="pricing">
<div class="product" id="dsl">
<div class="level">
DSL
</div>
<h2>$600</h2>
<ol>
<li>Turn up the gain</li>
<li>Play anywhere</li>
<li>Stand out from the crowd</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="original">
<div class="level">
ORIGINAL
</div>
<h2>$800</h2>
<ol>
<li>A little extra boost</li>
<li>Tilt and control</li>
<li>You have the power</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="studio">
<div class="level">
STUDIO
</div>
<h2>$750</h2>
<ol>
<li>Studio classic</li>
<li>Studio jubilee</li>
<li>Studio vintage</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<!--footer-->
<footer>
<ul>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2022, Marshall</span>
</footer>
</div>
</div>
</body>
</html>
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.
yes the challenge is expecting the navbar to be âat the top of the viewportâ which means we need to see that its position on the y-axis is right at the top with nothing above it.
<body>
<header id="header">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
<div id="page-wrapper">
<img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="photo-ofmarshall-amp">
</div>
</header>
<div class="logo">
</div>
<section id="hero">
<h2>Hancrafted masterpieces</h2>
<!--this is the form to order products -->
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email"
id="email"
name="email"
placeholder="enter email"
required>
<input id="submit" type="submit" value="Get Started" class="btn">
</form>
</section>
<!--this will be a container-->
<div class="container">
<section id="features">
<div class="grid">
<div class="icon">
<i class="fa-fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2>Fast Shipping</h2>
<p>We make sure you recive your amp as fast as possible with no delays. We provides free returns if you are not satisfied.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="desc">
<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 your amplifier.</p>
</div>
</div>
</section>
<section id="how-it-works">
<video id="video" width="620" height="440" controls>
<source src="https://marshalldotcom.blob.core.windows.net/assetrecovery/content/uploads/07d9e2c0-b2a9-4d54-b0d6-8e0d6cfda4c6.mp4?20210924124105" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<!--this is for the pricing section-->
<section id="pricing">
<div class="product" id="dsl">
<div class="level">
DSL
</div>
<h2>$600</h2>
<ol>
<li>Turn up the gain</li>
<li>Play anywhere</li>
<li>Stand out from the crowd</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="original">
<div class="level">
ORIGINAL
</div>
<h2>$800</h2>
<ol>
<li>A little extra boost</li>
<li>Tilt and control</li>
<li>You have the power</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="studio">
<div class="level">
STUDIO
</div>
<h2>$750</h2>
<ol>
<li>Studio classic</li>
<li>Studio jubilee</li>
<li>Studio vintage</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<!--footer-->
<footer>
<ul>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2022, Marshall</span>
</footer>
</div>
</div>
</body>
</html>
i edited the post again to make it easier to copy the files.
But I noticed you have a stray <style> tag?
(i will remove the style tags from the css file on my end)
