Tell us what’s happening: im missing something but i dont get it help me please
error: 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
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.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
Hello!
It appears the code you attempted to share with the community was to large to post this way.
Please copy and paste the complete code between ``` both before and after the end of the complete code?
Thank you!
Happy coding!
1 Like
thank you for helping but i dont think its working i mean im sorry but i couldnt do it
1 Like
No problem!
What is the issue you are having, or if you have it on CodePen somebody may be able to help you there. I am not familiar with CodePen, but I know many of the community have it.
Could you use the Help and post it in the < /> preformatted area?
I would like to see you get help with it, though, I do not think I will be the one responding.
You are doing great with your progress.
@Cody_Biggs can you help me please im stuck and i dont know what to do. i think my code is perfectly fine except one error it says : " 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 ). "
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
1 Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" >
<script src="https://kit.fontawesome.com/5a7bc7b8ae.js" crossorigin="anonymous"></script>
<title>Landing Page</title>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how_It_Works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email" placeholder="Enter your email address" required />
<input type="submit" id="submit" value="GET STARTED" />
</form>
</section>
<div class="container">
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-fire-flame-curved"></i>
</div>
<div class="text">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-truck"></i>
</div>
<div class="text">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-battery-full"></i>
</div>
<div class="text">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</div>
<div id="how it works">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" height="315" width="500" title="Product Video" frameborder="0"></iframe>
</div>
<div id="pricing">
<div class="product">
<div class="level">TENOR TROMBONE</div>
<h2>$600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">BASS TROMBONE</div>
<h2>$900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">VALVE TROMBONE</div>
<h2>$1200</h2>
<ol>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
</div>
</div>
</body>
</html>
body{
background-color: #2785;
font-family: 'Lato', sans-serif;
margin: 0;
}
#header{
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.logo{
width: 60vw;
}
#header-img{
max-width: 300px;
width: 100%;
height: 100%;
}
#nav-bar{
font-weight: 400;
width: 35vw;
}
ul{
display: flex;
flex-direction: row;
justify-content: space-around;
}
li{
list-style: none;
}
.nav-link{
color: black;
text-decoration: none;
}
#hero, #form{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero input[type="email"] {
max-width: 275px;
min-width: 100px;
width: 275px;
height: 30px;
margin-bottom: 15px;
}
#hero input[type="submit"]{
max-width: 150px;
width: 100%;
height: 30px;
background-color: #007BA7;
border: none;
font-weight: 900;
font-size: 1em;
}
.features{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1000px;
margin: 0;
padding: 0;
}
.grid{
display: flex;
flex-direction: row;
}
.icon{
width: 12vw;
display: flex;
justify-content: center;
align-items: center;
}
.fa-solid{
color: darkorange;
font-size: 50px;
}
#howItWorks{
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#pricing{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
margin-top: 60px;
margin-bottom: 90px;
}
.product{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100%/3);
border: 1px solid black;
margin: 20px;
border-radius: 3px;
}
.level{
background-color: #007BA7;
color: black;
width: 100px;
font-weight: 700;
padding: 15px 0;
}
ol > li{
margin-right: 25px;
}
.btn{
background-color: #007BA7;
margin: 15px 0;
font-weight: 400;
border: 0;
width: 30%;
height: 30px;
font-size: 1em;
min-width: 100px;
}
@media(max-width: 700px){
#pricing{
flex-direction: column;
align-items: center;
}
.product{
width: 300px;
}
}
superior:
<div id="how it works">
This id needs to have underscores where the spaces are. An id cant have space in it, and then after you fix that you need to compare the capitalization for each word in this id with the capitalization for each word in the href you have for this. They are not the same right now
still same error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" >
<script src="https://kit.fontawesome.com/5a7bc7b8ae.js" crossorigin="anonymous"></script>
<title>Landing Page</title>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how_It_Works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email" placeholder="Enter your email address" required />
<input type="submit" id="submit" value="GET STARTED" />
</form>
</section>
<div class="container">
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-fire-flame-curved"></i>
</div>
<div class="text">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-truck"></i>
</div>
<div class="text">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-battery-full"></i>
</div>
<div class="text">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</div>
<div id="how-it-works">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" height="315" width="500" title="Product Video" frameborder="0"></iframe>
</div>
<div id="pricing">
<div class="product">
<div class="level">TENOR TROMBONE</div>
<h2>$600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">BASS TROMBONE</div>
<h2>$900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">VALVE TROMBONE</div>
<h2>$1200</h2>
<ol>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
</div>
</div>
</body>
</html>
superior:
<div id="how-it-works">
These are dashes . Underscores look_like_this
i tried it too but sill not working
Did you check the capitilization?
This#how_It_Works ”
is not the same as
id=“how-it-works”
well i tried to give them all “#” and delete the all"#" still same
You are not supposed to do anything with that.
Cody_Biggs:
href=“#how_It_Works ”
Do you notice how you have the I and the w capitalized here?
Cody_Biggs:
id=“how-it-works”
Are they capitalized here?
1 Like
omg yes that was the problem thank you so much i didnt notice
2 Likes
system
March 4, 2024, 8:14am
18
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
