Tell us what’s happening:
Still showing this test as not passed: “10. Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).”
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<img id="header-img" src="https://static-00.iconduck.com/assets.00/top-hat-emoji-2047x2048-fpn9zdd2.png" width="45px">
</img>
<h3>Original TopHats</h3>
<nav id="nav-bar">
<a class="nav-link" href="#Features">Features</a>
<a class="nav-link" href="#Product">Product</a>
<a class="nav-link" href="#Pricing">Pricing</a>
</nav>
<div id="Features">
<h3>Exquisite Craftsmanship</h3>
<p>Our top hats are hand-crafted with precision and care, ensuring exceptional quality in every detail. Using the finest materials, we offer a range of fabrics such as silk, felt, and wool, all designed to provide durability, comfort, and style. Each hat is a testament to timeless elegance, tailored to perfection.</p>
<h3>Custom Designs</h3>
<p>We believe every customer deserves a top hat that reflects their unique personality. Whether you’re looking for a classic black top hat for formal occasions, a whimsical design for costume events, or a bespoke creation for weddings, we provide customization options, including color, embellishments, and even personalized monograms.</p>
<h3>Perfect Fit</h3>
<p>Our top hats are available in a variety of sizes to ensure a perfect fit for all. We also offer custom sizing services, including head measurements and adjustable fittings, to deliver maximum comfort and confidence.</p>
</div>
<div id="Product">
<iframe id="video" width="450" height="327.5" src="https://www.youtube.com/embed/l6hUE7UGVcQ?si=XJbzk9p8hCr6643h" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="Pricing">
<h3>Affordable Luxury for Every Occasion</h3>
<p>We offer competitive pricing to ensure everyone can enjoy the elegance of a finely crafted top hat. Our pricing is straightforward and transparent, with no hidden fees.</p>
<h4>Base Pricing</h4>
<ul>
<li>Classic Top Hat: Starting at $75
A timeless design perfect for formal events or adding a touch of sophistication to your wardrobe.</li>
<li>Custom Top Hat: Starting at $120
Tailored to your preferences, featuring unique colors, embellishments, and monogram options.</li>
</ul>
<h4>Premium Add-Ons</h4>
<ul>
<li>Personalized Monograms: +$15</li>
<li>Luxury Materials (e.g., silk, velvet): +$25</li>
<li>Handmade Decorative Embellishments: +$30</li>
<li>Custom Sizing (beyond standard sizes): +$20</li>
</ul>
</div>
<div>
<h2>Sign up for our weekly newsletter: <form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email"
placeholder="besttophats@gmail.com">
</input>
<input id="submit" type="submit">
</input>
</form>
</h2>
</div>
</header>
</body>
</html>
/* file: styles.css */
* {
font-family: Verdana;
}
header {
position: fixed;
top: 0px;
align-items: center;
}
@media only screen and (max-width: 720px) {
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page