Tell us what’s happening:
Is there a bug with the evaluation of the .nav-links?
My Landing Page is nearly finished, but the .nav-links, which are correct in my opinion, are blocking me to finalize the lab.
- have at least 3 clickable nav links: check
- each nav link should target a section with the same id value: check
HMTL is valid, no errors or warnings, used some validators.
Code from the example passes, so it’s definitely something in the HTML. Tried to remove some of the sections to identify the problem but without luck so far.
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">
<title>Product Landing Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main class="container">
<header id="header">
<img id="header-img" src="https://design-style-guide.freecodecamp.org/img/fcc_primary_small.svg" alt="flame logo">
<input id="menu-toggle" type="checkbox">
<label class='menu-button-container' for="menu-toggle">
<span class='menu-button'></span>
</label>
<nav id="nav-bar">
<ul class="menu">
<li class="nav-link">
<a href="#order">Order</a>
</li>
<li class="nav-link">
<a href="#intro">Intro</a>
</li>
<li class="nav-link">
<a href="#features">Features</a>
</li>
<li class="nav-link">
<a href="#pricing">Pricing</a>
</li>
</ul>
</nav>
</header>
<section id="hero">
<h1>Unser intelligentes Bestell- und Kassensystem</h1>
<p>Sie möchten ein modernes und intuitiv zu bedienendes Kassensystem?</p>
<p> Dann fordern Sie unsere Demo an!</p>
</section>
<section id="order">
<h2>Order</h2>
<form id="form" action="https://www.freecodecamp.org/email-submit">
<label for="email">E-Mail</label>
<input id="email" type="email" name="email" placeholder="email@domain.de" required>
<input id="submit" type="submit" value="Senden">
<input id="newsletter" type="checkbox" name="newsletter">
<label for="newsletter">Ich möchte den Newsletter abonnieren!</label>
</form>
</section>
<section id="intro">
<h2>Intro</h2>
<iframe id="video" width="560" height="315"
src="https://www.youtube-nocookie.com/embed/c0i88t0Kacs?si=H46ORrjQf9FfzkDT" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"></iframe>
</section>
<section id="features">
<h2>Merkmale</h2>
<div class="feature feature1">
<h3>Betriebsmodi</h3>
… some stuff
</div>
<div class="feature feature2">
<h3>Merkmale</h3>
… some stuff
</div>
<div class="feature feature3">
<h3>Sicherheit</h3>
… some stuff
</div>
<div class="feature feature4">
<h3>Statistiken</h3>
… some stuff
</div>
</section>
<section id="pricing">
<h2>Pricing</h2>
<div class="pricing-container">
<div class="card card1">
<h3 class="card-sub">Stand-alone</h3>
… some stuff
<div class="card card2">
<h3 class="card-sub">Service</h3>
… some stuff
<div class="card card3">
<h3 class="card-sub">Take-Away</h3>
<hr>
<ul class="card-list">
<li>29,99€</li>
<li>Updates inklusive</li>
<li>Online Payment</li>
<li>To-Go Bestellungen</li>
</ul>
</div>
</div>
</section>
<footer></footer>
</main>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Challenge Information:
Build a Product Landing Page - Build a Product Landing Page
(scream) hours of searching the “bug” …. thanks champ, got it! I wouldn’t have found it.