Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
I have no idea what I am doing wrong. Kindly help me with this.

  1. 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 ).
    This is what I am getting wrong

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Original Trombone</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>
     <header id="header">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img">
 <nav class="header" id="nav-bar">
     <ul>
       <li><a href="#Feature" class="nav-link">Feature</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>
</header>
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <h1>Handcrafted, home-made masterpieces</h1>
  <input id="email" placeholder="Enter your E-mail here.." type="email" name="email">
  <input id="submit" value="Get Started" type="submit">      
      <section id="feature">
        <h1>Premium Materials</h1>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        <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>
        <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>
        </section>

        <section id="how_it_works">
          <video id="video" src="https://youtu.be/y8Yv4pnO7qc" type="video/mp4">
          </section>
          </body>
          </html>

/* file: styles.css */
@media(max-width:500px){
  .nav-bar{width:100px}
}

#nav-bar{width:100%;
display:flex;
justify-content:flex-end;
top:0;
bottom:0;
left:0;
right:0;
height:50px;
position:fixed;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

The ‘href’ attribute has a different value than corresponding section’s id attribute. Check all three section elements (actually, the third doesn’t exist).

3

I am still not getting it. Tried adding everything. My brain has stopped working :sob:

4

Post the corrected html code here.

5

I tried everything came back to this

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Original Trombone</title>
    <link rel="stylesheet" href="styles.css">
    </head>
     <body>
       <main>
     <header id="header">
     <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img"/>
 <nav class="header" id="nav-bar">
 <ul>
 <li><a href="#Feature" class="nav-link">Feature</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>
</header>

<form id="form" action="https://www.freecodecamp.com/email-submit">
  <h1>Handcrafted, home-made masterpieces</h1>
  <input id="email" placeholder="Enter your E-mail here.." type="email" name="email">
  <input id="submit" value="Get Started" type="submit">   

      <section id="Feature">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        <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>
        <h4>Quality Assurance</h4>
        <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>
        </section>

        <section id="How_it_works">
          <video id="video" src="https://youtu.be/y8Yv4pnO7qc" type="video/mp4">
          </section>
          </main>
          </body>
          </html>
6

Where is the section with the id set to the value of “Pricing”?

7

OMG that’s it!!! THANKYOU

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.