Tell us what’s happening:
It keeps telling me the code doesn’t pass as the nav-link elements need to have a href attribute. I have done these but it keeps coming up with the same error. It is also saying that each nav-link element should link to corresponding element on page, it does but it wont pass my code. The landing page works, the links to the href work, but the code wont pass!
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<title>CC product landing</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img src="https://png.pngtree.com/template/20190316/ourmid/pngtree-books-logo-image_79143.jpg"
alt="logo"
id="header-img"
/>
<span class="the-product">Classic Books</span></div>
<ul class="nav-link">
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#free-audio-book">Free Audio Book</a></li>
<li><a class="nav-link" href="#for-sale">For Sale</a></li>
</ul>
</nav>
</header>
<section id="email-section">
<h2>Beautiful Classic Masterpieces</h2>
<form action="https://www.freecodecamp.org/email-submit" id="form">
<input
type="email"
placeholder="Enter your email"
name="email"
required
id="email">
<input id="submit" type="submit" value="Explore">
</form>
</section>
<section id="features">
<div class="feature">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>Premium Early Additions</h2>
<p>Our early addition books are some of the worlds most loved, in mint condition at great value for money</p>
</div>
</div>
<div class="feature">
<i class="ri-truck-fill ri-4x icon"></i>
<div>
<h2>Fast Delivery</h2>
<p>We prepare and send your order straight after we recieve it, you should recieve your book within 48 hours. </p>
</div>
</div>
<div class="feature">
<i class="ri-book-open-line icon ri-4x"></i>
<div>
<h2>Quality Books</h2>
<p>We ensure our books are of the highest quality, even though they are ealry addition.</p>
</div>
</div>
</section>
<section id="free-audio-book">
<iframe
id="video"
height="400"
src="https://www.youtube.com/embed/Huam5sSRjwc?si=dm0JnSjZ5w-2M7gf"
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>
</section>
<section id="for-sale">
<h2>For Sale</h2>
<div class="product-cards">
<div class="card">
<div class="product-image product1"></div>
<div class="inner-card"></div>
<div class="author">Hermin Melville</div>
<h1 class="header">Moby Dick</h1>
<p class="content">
Moby-Dick is a classic American novel by Herman Melville, first published in 1851.
The story follows the adventures of Ishmael, a sailor on the whaling ship Pequod, led by the obsessed and vengeful Captain Ahab. Ahab is determined to hunt down and kill Moby Dick, the giant white whale that had previously destroyed his ship and bitten off his leg.
The novel explores themes of obsession, revenge, and humanity's struggle against nature. Through its vivid descriptions of life at sea and complex characters, "Moby-Dick" delves deep into philosophical questions and remains a monumental work in American literature.
</p>
<div class="flex">
<p class="main-price">£75.27</p>
<p class="old-price">£125.99</p></div>
<button class="add">
<p style="margin-left: 5px">Add to Basket</p>
</button>
</div>
<div class="card">
<div class="product-image product2"></div>
<div class="inner-card"></div>
<div class="author">Oscare Wilde</div>
<h1 class="header">The Picture of Dorian Gray</h1>
<p class="content">
Oscar Wilde's alluring novel of decadence and sin was a succès de scandale on publication. It follows Dorian Gray who, enthralled by his own exquisite portrait, exchanges his soul for eternal youth and beauty. Influenced by his friend Lord Henry Wotton, he is drawn into a corrupt double life, indulging his desires in secret while remaining a gentleman in the eyes of polite society. Only his portrait bears the traces of his depravity. This definitive edition includes a selection of contemporary reviews condemning the novel's immorality.
</p>
<div class="flex">
<p class="main-price">£19.99</p>
<p class="old-price">£38.55</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Basket</p>
</button>
</div>
<div class="card">
<div class="product-image product3"></div>
<div class="inner-card"></div>
<div class="author">Mary Shelley</div>
<h1 class="header">Frankenstein</h1>
<p class="content">
Navigating the Arctic, the captain of a ship rescues a man wandering near death across the ice caps. How the man got there reveals itself in a story of ambition, murder and revenge. As a young scientist, Victor Frankenstein pushed moral boundaries in order to cross the final frontier and create life. But his creation is a monster stitched together from grave-plundered body parts who has no place in the world, and his existence can only lead to tragedy.
</p>
<div class="flex">
<p class="main-price">£9.99</p>
<p class="old-price">£19.25</p></div>
<button class="add">
<p style="margin-left: 5px">Add to Basket</p>
</button>
</div>
</div>
</section>
</body>
</html>
css
/* 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/137.0.0.0 Safari/537.36 Edg/137.0.0.0
Challenge Information:
Build a Product Landing Page - Build a Product Landing Page