<header id="header">
<div class="logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a href="#featured" class="nav-link">Features</a>
</li>
<li>
<a href="#how-it-works" class="nav-link">How It Works</a>
</li>
<li>
<a href="#pricing" class="nav-link">Pricing</a>
</li>
</ul>
</nav>
</header>
<div class="container subscribe">
<h2>Handcrafted, home-made masterpieces</h2>
<input id="email" name="email" type="email" placeholder="Enter Your Email Address">
<input id="submit" type="submit" value="get started" class="btn">
</form>
</div>
<section >
<div id="featured">
<div class="features">
<div class="icon">
<i class="fa fa-firefox"></i>
</div>
<div>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa fa-truck"></i>
</div>
<div>
<h3>Fast Shipping</h3>
<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="features">
<div class="icon">
<i class="fa fa-battery"></i>
</div>
<div>
<h3>Quality Assurance</h3>
<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>
</section>
<section>
<div class="video-player" id="how-it-works">
</video>
</div>
</section>
<section >
<div id="pricing">
<div class="pricing-box">
<h4>TENOR TROMBONE</h4>
<div class="box-body">
<p class="price">$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
<div class="pricing-box">
<h4>BASS TROMBONE</h4>
<div class="box-body">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button> select
</button>
</div>
</div>
<div class="pricing-box">
<h4>VALVE TROMBONE</h4>
<div class="box-body">
<p class="price">$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
</div>
</section>
Hi!
Please edit your post to include your code, without seeing it we can’t check to see what isn’t working.
i have done dat ma’am
what issue did you need help with? (please write a description of the issue and provide a link to the challenge)
I’ve edited your code for readability. When you enter a code block into a forum post, 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 (').
<nav id="nav-bar">
<ul>
<li>
<a href="#featured" class="nav-link">Features</a>
</li>
<li>
<a href="#how-it-works" class="nav-link">How It Works</a>
</li>
<li>
<a href="#pricing" class="nav-link">Pricing</a>
</li>
</ul>
</nav>
</header>
<div class="container subscribe">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" name="email" type="email" placeholder="Enter Your Email Address">
<input id="submit" type="submit" value="get started" class="btn">
</form>
</div>
<section >
<div id="featured">
<div class="features">
<div class="icon">
<i class="fa fa-firefox"></i>
</div>
<div>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa fa-truck"></i>
</div>
<div>
<h3>Fast Shipping</h3>
<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="features">
<div class="icon">
<i class="fa fa-battery"></i>
</div>
<div>
<h3>Quality Assurance</h3>
<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>
</section>
<section>
<div class="video-player" id="how-it-works">
<video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
</video>
</div>
</section>
<section >
<div id="pricing">
<div class="pricing-box">
<h4>TENOR TROMBONE</h4>
<div class="box-body">
<p class="price">$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
<div class="pricing-box">
<h4>BASS TROMBONE</h4>
<div class="box-body">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button> select
</button>
</div>
</div>
<div class="pricing-box">
<h4>VALVE TROMBONE</h4>
<div class="box-body">
<p class="price">$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
</div>
</section>
<footer>
<div id="footer-nav">
<ul>
<li><a href="">Privacy</a></li>
<li><a href="" class="nav-link">Terms</a></li>
<li><a href="" class="nav-link">contact</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</body>
</html>
i am finding it difficult in the task that said, 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).
<nav id="nav-bar">
<ul>
<li>
<a href="#featured" class="nav-link">Features</a>
</li>
<li>
<a href="#how-it-works" class="nav-link">How It Works</a>
</li>
<li>
<a href="#pricing" class="nav-link">Pricing</a>
</li>
</ul>
</nav>
</header>
<div class="container subscribe">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" name="email" type="email" placeholder="Enter Your Email Address">
<input id="submit" type="submit" value="get started" class="btn">
</form>
</div>
<section >
<div id="featured">
<div class="features">
<div class="icon">
<i class="fa fa-firefox"></i>
</div>
<div>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa fa-truck"></i>
</div>
<div>
<h3>Fast Shipping</h3>
<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="features">
<div class="icon">
<i class="fa fa-battery"></i>
</div>
<div>
<h3>Quality Assurance</h3>
<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>
</section>
<section>
<div class="video-player" id="how-it-works">
<video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
</video>
</div>
</section>
<section >
<div id="pricing">
<div class="pricing-box">
<h4>TENOR TROMBONE</h4>
<div class="box-body">
<p class="price">$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
<div class="pricing-box">
<h4>BASS TROMBONE</h4>
<div class="box-body">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button> select
</button>
</div>
</div>
<div class="pricing-box">
<h4>VALVE TROMBONE</h4>
<div class="box-body">
<p class="price">$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
</div>
</section>
<footer>
<div id="footer-nav">
<ul>
<li><a href="">Privacy</a></li>
<li><a href="" class="nav-link">Terms</a></li>
<li><a href="" class="nav-link">contact</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</body>`Preformatted text`
make sure you match the exact characters and case for the ids and the name of the section.
so for eg here, it should be fixed to #Features not #featured
i did same thing but is still not working ma
have you double checked every id?
if yes, post your new code for review.
yes i have. okay ma let me re-post my code;
type o<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Produt 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" alt="original trombones logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link">Features</a>
</li>
<li>
<a href="#how-it-works" class="nav-link">How It Works</a>
</li>
<li>
<a href="#pricing" class="nav-link">Pricing</a>
</li>
</ul>
</nav>
</header>
<div class="container subscribe">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" name="email" type="email" placeholder="Enter Your Email Address">
<input id="submit" type="submit" value="get started" class="btn">
</form>
</div>
<section >
<div id="features">
<div class="features">
<div class="icon">
<i class="fa fa-firefox"></i>
</div>
<div>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa fa-truck"></i>
</div>
<div>
<h3>Fast Shipping</h3>
<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="features">
<div class="icon">
<i class="fa fa-battery"></i>
</div>
<div>
<h3>Quality Assurance</h3>
<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>
</section>
<section>
<div class="video-player" id="how-it-works">
<video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
</video>
</div>
</section>
<section >
<div id="pricing">
<div class="pricing-box">
<h4>TENOR TROMBONE</h4>
<div class="box-body">
<p class="price">$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
<div class="pricing-box">
<h4>BASS TROMBONE</h4>
<div class="box-body">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button> select
</button>
</div>
</div>
<div class="pricing-box">
<h4>VALVE TROMBONE</h4>
<div class="box-body">
<p class="price">$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
</div>
</section>
<footer>
<div id="footer-nav">
<ul>
<li><a href="">Privacy</a></li>
<li><a href="" class="nav-link">Terms</a></li>
<li><a href="" class="nav-link">contact</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</body>
</html>r paste code here
you haven’t matched the exact case yet.
Please re-read the post.
Also make sure you are not duplicating the ids anywhere.
The ids should be an exact match down to the capital letters or lower case letters.
i have made the correct but have not been pass ma. this is the correction
t<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Produt 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" alt="original trombones logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link">features</a>
</li>
<li>
<a href="#how-it-works" class="nav-link">how it works</a>
</li>
<li>
<a href="#pricing" class="nav-link">pricing</a>
</li>
</ul>
</nav>
</header>
<div class="container subscribe">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" name="email" type="email" placeholder="Enter Your Email Address">
<input id="submit" type="submit" value="get started" class="btn">
</form>
</div>
<section >
<div id="features">
<div class="feature">
<div class="icon">
<i class="fa fa-firefox"></i>
</div>
<div>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="feature">
<div class="icon">
<i class="fa fa-truck"></i>
</div>
<div>
<h3>Fast Shipping</h3>
<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="feature">
<div class="icon">
<i class="fa fa-battery"></i>
</div>
<div>
<h3>Quality Assurance</h3>
<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>
</section>
<section>
<div class="video-player" id="how-it-works">
<video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
</video>
</div>
</section>
<section >
<div id="pricing">
<div class="pricing-box">
<h4>TENOR TROMBONE</h4>
<div class="box-body">
<p class="price">$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
<div class="pricing-box">
<h4>BASS TROMBONE</h4>
<div class="box-body">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button> select
</button>
</div>
</div>
<div class="pricing-box">
<h4>VALVE TROMBONE</h4>
<div class="box-body">
<p class="price">$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
</div>
</section>
<footer>
<div id="footer-nav">
<ul>
<li><a href="">Privacy</a></li>
<li><a href="" class="nav-link">Terms</a></li>
<li><a href="" class="nav-link">contact</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</body>
</html>ype or paste code here
this is not part of your code correct?
remove the class nav-link from these lines as it is confusing the test.
(all nav-links should link to something according to the test and these 2 link nowhere)
is not is a typo when i was trying to post my code let me resend it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Produt 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" alt="original trombones logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link">features</a>
</li>
<li>
<a href="#how-it-works" class="nav-link">how it works</a>
</li>
<li>
<a href="#pricing" class="nav-link">pricing</a>
</li>
</ul>
</nav>
</header>
<div class="container subscribe">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" name="email" type="email" placeholder="Enter Your Email Address">
<input id="submit" type="submit" value="get started" class="btn">
</form>
</div>
<section >
<div id="features">
<div class="feature">
<div class="icon">
<i class="fa fa-firefox"></i>
</div>
<div>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="feature">
<div class="icon">
<i class="fa fa-truck"></i>
</div>
<div>
<h3>Fast Shipping</h3>
<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="feature">
<div class="icon">
<i class="fa fa-battery"></i>
</div>
<div>
<h3>Quality Assurance</h3>
<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>
</section>
<section>
<div class="video-player" id="how-it-works">
<video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
</video>
</div>
</section>
<section >
<div id="pricing">
<div class="pricing-box">
<h4>TENOR TROMBONE</h4>
<div class="box-body">
<p class="price">$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
<div class="pricing-box">
<h4>BASS TROMBONE</h4>
<div class="box-body">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button> select
</button>
</div>
</div>
<div class="pricing-box">
<h4>VALVE TROMBONE</h4>
<div class="box-body">
<p class="price">$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>
select
</button>
</div>
</div>
</div>
</section>
<footer>
<div id="footer-nav">
<ul>
<li><a href="">Privacy</a></li>
<li><a href="" class="nav-link">Terms</a></li>
<li><a href="" class="nav-link">contact</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</body>
</html>
thank you so much ma it has worked. i really appreciate you ma
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.