Tell us what’s happening:
It appears that I have done something wrong when setting up my .nav-link in HTML and # in CSS. I have passed every other test except for the steps regarding .nav-link
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>FCC Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="preconnect" 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.2.0/fonts/remixicon.css" rel="stylesheet">
<link href= "https://slimages.macysassets.com/is/image/MCY/products/0/optimized/21979800_fpx.tif?op_sharpen=1&wid=500&hei=611&fit=fit,1&fmt=webp" rel="stylesheet">
<link href="https://m.media-amazon.com/images/I/81BE7eeKzAL._AC_UF1000,1000_QL80_.jpg" rel="stylesheet">
<link href="https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcS4hltYuuT0WuhWowBgHzFVlphiazJxzs4f0XG1dnr7Ogos0zkaAiWyZDiCRvt0xHGCJLzd7WpN47yehv4c6oFJuhrGvQqjDxlJDdG9q5sxlhJJp9Aw2mpHyg&usqp=CAc" rel="stylesheet">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img
src="https://cdn.vectorstock.com/i/1000x1000/63/41/book-icon-logo-design-vector-28056341.webp"
alt="logo"
width="60"
id="header-img"
/>
<span class="the-product">Classic Books</span>
</div>
<ul class="nav-link">
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#audio" class="nav-link">Free Audio Book</a></li>
<li><a href="#for_sale" class="nav-link">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 here"
name="email"/>
<input type="submit" id="submit" value="GET STARTED">
</form>
</section>
<section id="features">
<div class="features">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>Premium Materials</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="feature">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>1 Day Shipping</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="feature">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>Quality Books Only</h2>
<p>
Our books use the best paper which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
</div>
</section>
<section id="audio">
<iframe
id="video"
height="400"
src="https://www.youtube.com/embed/YKAfKprBXQc?si=jczpTt4ME9WgMFo0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</section>
<section id="for_sale">
<h2>For Sale</h2>
<div class="product-cards">
<!-- BOOK ONE -->
<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 & Influence People</h1>
<p class="content">
How to Win Friends and Influence People is a 1936 self-help book written by Dale Carnegie. Over 30 million copies have been sold worldwide, making it one of the best-selling books of all time.
</p>
<div class="flex">
<p class="main-price">$16.12</p>
<p class="old-price">$19.29</p>
</div>
<button class="add">Add to Cart</button>
</div>
</div>
<!-- BOOK TWO -->
<div class="card">
<div class="product-image product2"></div>
<div class="inner-card">
<div class="author">Robert Kiwasaki</div>
<h1 class="header">Rich Dad Poor Dad</h1>
<p class="content">
Great Book. All about two different dads. One was a corporate slave and the other was a fearless business owner.
</p>
<div class="flex">
<p class="main-price">$16.12</p>
<p class="old-price">$19.29</p>
</div>
<button class="add">Add to Cart</button>
</div>
</div>
<!-- BOOK THREE -->
<div class="card">
<div class="product-image product3"></div>
<div class="inner-card">
<div class="author">Timothy Ferriss</div>
<h1 class="header">4 Hour Work Week</h1>
<p class="content">
How to escape the 9-5 lifestyle.
</p>
<div class="flex">
<p class="main-price">$16.12</p>
<p class="old-price">$19.29</p>
</div>
<button class="add">Add to Cart</button>
</div>
</div>
</section>
</body>
</html>
:root {
--white: hsl(0, 0%, 100%);
--text: hsl(228, 12%, 48%);
--pale: hsl(32, 37%, 92%);
--green: hsl(158, 36%, 37%);
--header-text: hsl(212, 21%, 14%);
}
* {
margin: 0;
}
body {
background-color: var(--pale);
}
#header-img {
width: 60px;
object-fit: contain;
}
#nav-bar {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100%;
top: 0;
background-color: var(--white);
padding: 10px;
}
.nav-link {
display: flex;
list-style: none;
}
.nav-link a {
text-decoration: none;
color: var(--text);
padding: 0 10px;
}
.logo-container {
display: flex;
align-items: center;
}
.the-product {
font-size: 25px;
margin-left: 10px;
font-weight: 700px;
font-family: "montserrat";
}
section::before {
display: block;
content: "";
margin-top: -100px;
height: 100px;
visibility: hidden;
pointer-events: none;
}
#email-section {
margin-top:100px;
}
input {
padding: 8px;
border-radius: 5px;
border: 1px solid var(--green);
}
#submit {
background-color: var(--green);
color: var(--white);
cursor: pointer;
}
section {
margin: 40px 20px;
text-align: center;
}
h2 {
font-family: "fraunces";
}
.icon {
color: var(--green);
margin-right: 30px;
}
#features {
text-align: left;
max-width: 800px;
margin: auto;
}
#audio {
margin: auto;
}
#for_sale {
margin: auto;
}
.feature {
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
font-family: "montserrat";
}
#video {
width: 100%;
}
.product-image {
width: 100%;
margin: auto;
height: 500px;
border: 1px solid var(--text);
border-radius: 10px 10px 0 0;
background-repeat: no-repeat;
background-size: cover;
}
.product1 {
background-image: url(https://slimages.macysassets.com/is/image/MCY/products/0/optimized/21979800_fpx.tif?op_sharpen=1&wid=500&hei=611&fit=fit,1&fmt=webp);
}
.product2 {
background-image: url(https://m.media-amazon.com/images/I/81BE7eeKzAL._AC_UF1000,1000_QL80_.jpg);
}
.product3 {
background-image: url(https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcS4hltYuuT0WuhWowBgHzFVlphiazJxzs4f0XG1dnr7Ogos0zkaAiWyZDiCRvt0xHGCJLzd7WpN47yehv4c6oFJuhrGvQqjDxlJDdG9q5sxlhJJp9Aw2mpHyg&usqp=CAc);
}
.card {
background-color: var(--white);
border-radius: 10px;
width: 90%;
margin: auto;
margin-bottom: 10px;
}
.inner-card {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px;
}
.content {
font-family: "montserrat";
color: var(--text);
margin-bottom: 10px;
}
.flex {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.main-prive {
margin-right: 20px;
font-size:30px;
font-family: "fraunces";
color: var(--green);
}
.old-price {
text-decoration: line-through;
color: var(--text);
}
.author {
font-family: "montserrat";
letter-spacing: 5px;
color: var(--text);
text-transform: uppercase;
}
.header {
font-family: "fraunces";
margin: 10px 0;
color: var(--header-text)
}
.add {
background-color: var(--green);
cursor: pointer;
padding: 15px;
border: none;
border-radius: 10px;
width: 100%;
color: var(--white);
font-family: "montserrat";
font-weight: 700;
margin-bottom: 10px;
}
@media only screen and (min-width: 600px) {
#nav-bar {
flex-direction: row;
}
}
@media only screen and (450px < width < 600px) {
.card {
font-size: 0.85rem;
}
.product-image {
height: 400px;
}
}
@media only screen and (450px <= width) {
.card {
display: flex;
max-width: 525px;
}
.inner-card {
width: 300px;
padding: 20px;
}
.product-image {
width: 400px;
border-radius: 10px 0 0 10px;
}
}
@media only screen and (width >= 1000px) {
#video {
width: 70%;
}
.inner-card {
width: 300px;
padding: 20px;
}
.product-image {
width: 400px;
border-radius: 10px 0 0 10px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page