When running the tests for my landing page I failed two: that each .nav-link element should have an href attribute and that each .nav-link element should link to a corresponding element on the landing page. However, after looking over my code several times I still can’t seem to understand why.
My code so far
<body>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.worldvectorlogo.com/logos/notion-2.svg" />
</div>
<nav id="nav-bar">
<ul class="nav">
<li class="nav-link"><a href="#features">Features</a></li>
<li class="nav-link"><a href="#how-to-use">How To Use</a></li>
<li class="nav-link"><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1 class="hero-title">One workspace. Every team.</h1>
<h3>Customize Notion to work the way you do.</h3>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" type="email" placeholder="Enter your email address" required/>
<input class="button-one" id="submit" type="submit" value="Try Notion Free" />
</form>
</section>
<section id="features" class="main-section">
<div class="feature-container">
<div class="feature-icon">
<i class="fa-solid fa-people-group fa-3x"></i>
</div>
<div class="feature-info">
<h1>Team up without the chaos</h1>
<p>Connect your teams, projects, and docs in Notion — so you can bust silos and move as one.</p>
</div>
</div>
<div class="feature-container">
<div class="feature-icon">
<i class="fa-solid fa-book-open fa-3x"></i>
</div>
<div class="feature-info">
<h1>Never ask “What’s the context?” again</h1>
<p>Stale wikis aren't helpful. Neither are floating docs. In Notion, your daily work and knowledge live side by side — so you never lose context.</p>
</div>
</div>
<div class="feature-container">
<div class="feature-icon">
<i class="fa-solid fa-arrows-turn-to-dots fa-3x"></i>
</div>
<div class="feature-info">
<h1>Build the workflow you want</h1>
<p>Customize Notion to make it work the way you want it to. Just drag and drop to craft the dashboard, website, doc, or system you need.</p>
</div>
</div>
<div class="feature-container">
<div class="feature-icon">
<i class="fa-solid fa-earth-americas fa-3x"></i>
</div>
<div class="feature-info">
<h1>Benefit from a global ecosystem of creators</h1>
<p>Get inspiration from thousands of community-made templates, integrations, and events. You'll never want for resources or support.</p>
</div>
</div>
</section>
<section id="how-to-use" class="how-to-use">
<div class="video-container">
<div class="video">
<iframe width="100%" height="315px" id="video" src="https://www.youtube.com/embed/aA7si7AmPkY" frameborder="0" allowfullscreen="" />
</iframe>
</div>
</div>
</section>
<section id="pricing" class="pricing">
<div class="pricing-container">
<div class="price-info">
<div class="price-heading">
<p class="personal">Personal</p>
<p class="for">For organizing every corner of your life.</p>
</div>
<p class="price-tag">Free</p>
<ul class="differences">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<button class="button-two one">Select</button>
</div>
<div class="price-info">
<div class="price-heading">
<p class="personal-pro">Personal Pro</p>
<p class="for">For power users who want to do even more.</p>
</div>
<p class="price-tag">$4 <span>/month<span></p>
<ul class="differences">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<button class="button-two two">Select</button>
</div>
<div class="price-info">
<div class="price-heading">
<p class="team">Team</p>
<p class="for">Collaborate with your entire team in one place.</p>
</div>
<p class="price-tag">$8 <span>/month</span></p>
<ul class="differences">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<button class="button-two three">Select</button>
</div>
</div>
</section>
<footer>
<ul class="terms">
<li>Privacy</li>
<li>Terms</li>
<li>Contract</li>
</ul>
<p class="copyright">Copyright 2016, Notion</p>
</footer>
</body>
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
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge: