Tell us what’s happening:
I’ve been failing these these tasks on 2 different projects. I not sure what’s wrong.
.nav-link element should have an href attribute.
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 #nav-bar should always be at the top of the viewport.
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" />
<title>Fcc Product Landing Page</title>
<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:opsz,wght@9..144,500&family=Montserrat:ital,wght@0,500;1,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.0.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:ANd9GcQR6NS_7hk4tXC89WAOjrRZDhS2JVnaRuOwvRuXUfqu4AHsLgaSv11u41Q9hXymnLSFbCk&usqp=CAU"
alt="logo"
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"
name="email"
/>
<input type="submit" id="submit" value="GET STARTED" />
</form>
</section>
<section id="features">
<div class="feature">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>Premium Materials</h2>
<p>
I Our Books use the best paper which is sourced lo increase the
longevity of your purchase.
</p>
</div>
</div>
<div class="feature">
<i class="ri-truck-fill ri-4x icon"></i>
<div>
<h2>1 Day Shipping</h2>
<p>
We make sure you receive your classic book as so that you can start
reading immediately. We also if you are not satisfied
</p>
</div>
</div>
<div class="feature">
<i class="ri-book-open-line ri-4x icon"></i>
<div>
I
<h2>Quality Books Only</h2>
<p>
We make sure to only provide awesome classic boo that the book you
buy is one of the top classic
</p>
</div>
</div>
</section>
<section id="audio">
<iframe
id="video"
height="400"
src="https://www.youtube.com/embed/YKAfKprBXQc?si=wOCjZdekL6PhH1fF"
title="YouTube video player"
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 & Influence People</h1>
<p class="content">Dale Carnegue's rock-solid, time tested....</p>
<div class="flex"></div>
<p class="main-price">$16.12</p>
<p class="old-price">$22.21</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add To Cart</p>
</button>
</div>
<div class="card">
<div class="product-image product2"></div>
<div class="inner_card">
<div class="author">Robert Kioasakis</div>
<h1 class="header">Why I want you to become rich!</h1>
<p class="content">
Robert Kiyosaki Rich dad poor dad is a great book on why to buy
assets and not expenses.
</p>
<div class="flex"></div>
<p class="main-price">$22.22</p>
<p class="old-price">$25.21</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add To Cart</p>
</button>
</div>
<div class="card">
<div class="product-image product3"></div>
<div class="inner_card">
<div class="author">James Clear</div>
<h1 class="header">Why I want you to become rich!</h1>
<p class="content">
James Clear's Atomic Habits will teach you how to make small changes that will transform your habits and deliver amazing results.
</p>
<div class="flex"></div>
<p class="main-price">$22.22</p>
<p class="old-price">$25.21</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add To Cart</p>
</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(222,21%,14%);
}
*{
margin:0;
}
body{
background-color: var(--pale);
margin: 0;
}
#header-img{
width:60px;
object-fit: contain;
}
#navbar{
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100vw;
top:0;
background-color: var(--white);
}
.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: 700;
font-family: "montserrat";
}
#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::before{
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden;
pointer-events: none;
}
section{
margin: 40px 20px;
text-align: center;
}
h2{
font-family: "fraunces";
margin-bottom: 10px;
}
.icon{
color: var(--green);
margin-right: 30px;
}
#features{
text-align: left;
max-width: 800px;
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://target.scene7.com/is/image/Target/GUEST_12513515-a5ca-411f-9457-ff907de76a6b?wid=600&hei=600&qlt=80&fmt=webp)
}
.product2{background-image: url(https://m.media-amazon.com/images/I/51NuMV9SJ8L._SL500_.jpg)};
.product3{background-image: url(https://m.media-amazon.com/images/I/51NuMV9SJ8L._SL500_.jpg)};
.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:"monserrat";
color: var(--text);
margin-bottom: 10px;
}
.flex{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.main-price{
margin-right: 20px;
font-size:30px;
font-family: "fraunces";
color: var(--green);
}
.old-price{
text-decoration: line-through;
color: var(--text);
}
.author{
font-family: "monserrat";
letter-spacing: 5px;
color:var(--text);
text-transform: uppercase;
}
.header{
position:fixed;
top:10px;
font-family:"fraunces";
margin: 10px;
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;
display: flex;
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%;
}
.product-cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page