Tell us what’s happening:
I keep getting this error and don’t know what to do
- 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).
- Features
- Free Audio Book
- For Sale
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<title>FCC Product Landing Page</title>
<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=Montserrat:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
<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=Montserrat:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpqXydaYVljKiRDId-zg8TPIvNME8fTEryCA&s" alt="book-logo" id="header-img"></img>
<span class="the-product">Classic Books</span>
</div>
<ul class="nav-links">
<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>Beautifully Written Masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" required placeholder="Enter your email address" name="email">
</input>
<input type="submit" id="submit" value="GET STARTED"></input>
</form>
</section>
<section id="features">
<div class="features">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>Premium Material</h2>
<p>Our books use the best paper which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<i class="ri-truck-fill ri-4x icon"></i>
<div>
<h2>1 Day Shipping</h2>
<p>We make sure you receive your classic books as soon as possible so you can start reading immediately. We also provide free returns if you are not satisfied </p>
</div>
</div>
<div class="features">
<i class="ri-book-open-line ri-4x icon"></i>
<div>
<h2>Quality Books Only</h2>
<p>
We make sure to only provide awesome books. We guarantee the book you buy is one of the top classic books on the market.
</p>
</div>
</div>
</section>
<section>
<iframe id="video" height="400" src="https://www.youtube.com/embed/d9zUVFzPtJ4?si=qOt9_jD2qiZvS_Ps" 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 class="author">Dale Carnegie</div>
<h1 class="header">How To Win Friends And Influence People </h1>
<p class="content">
Dale Carnegie's How to Win Friends and Influence People is a timeless guide to improving interpersonal relationships and influencing others positively. The book outlines essential principles that foster genuine connections and effective communication.
</p>
<div class="flex">
<p class="main-price">$16.12</p>
<p class="old-price">$19.29</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Cart</p>
</button>
</div>
</div>
<div class="product-cards">
<div class="card">
<div class="product-image product2"></div>
<div class="inner-card">
<div class="author">Robert Kiyosaki</div>
<h1 class="header">Rich Dad Poor Dad</h1>
<p class="content">
Unlock your financial potential with Robert Kiyosaki's transformative book, Rich Dad Poor Dad. This bestselling guide is not just a book; it's a roadmap to financial independence and wealth creation.
</p>
<div class="flex">
<p class="main-price">$7.68</p>
<p class="old-price">$15.16</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Cart</p>
</button>
</div>
</div>
<div class="product-cards">
<div class="card">
<div class="product-image product3"></div>
<div class="inner-card">
<div class="author">James Clear </div>
<h1 class="header">Atomic Habits: Tiny Changes, Remarkable Results</h1>
<p class="content">
Transform your life with James Clear's Atomic Habits, a revolutionary guide that reveals how small, incremental changes can lead to remarkable results. This bestselling book is your key to mastering the art of habit formation, breaking bad habits, and building a system that fosters continuous improvement.
</p>
<div class="flex">
<p class="main-price">$11.98</p>
<p class="old-price">$14.99</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Cart</p>
</button>
</div>
</div>
</section>
</body>
</html>
/* 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/130.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page