Build a Product Landing Page - Build a Product Landing Page

Curriculum Help
,
1

Tell us what’s happening:

Good day everyone! i need your help to fix it: 9. Each .nav-link element should have an href attribute.
Waiting:10. 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

<!-- file: index.html -->
<!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"/>
    <title>Product Landing Page</title>
  </head>

<body>
  <header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo"/>
    <nav id="nav-bar">
      <ul>
        <li class="nav-link"><a href="#features">Features</a></li>
        <li class="nav-link"><a href="#video">How It Works</a></li>
        <li class="nav-link"><a href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="email">
      <h2>Handcrafted, home-made masterpieces</h2>
      <form id="form" action="https://www.freecodecamp.org/email-submit" method="POST">
        <input type="email" id="email"
        name="email"
         placeholder="Enter your email address"/>
        <input type="submit" id="submit" value="GET STARTED"/>
      </form>
    </section>

    <section id="features">
      <div class="feature-1">
        <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 class="feature-2">
        <h2>Fast Shipping</h2>
        <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
      </div>
      <div class="feature-3">
        <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>
    </section>

    <section class="video-container">
      <iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc" 
              title="YouTube video player" frameborder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
              allowfullscreen>
        </iframe>
    </section>

    <section id="pricing">
      <div class="card">
        <h3 class="card-head">Tenor Trombone</h3>
        <p class="price">$600</p>
        <p class="description">
          Good for beginners<br/>
          Excellent sound quality<br/>
          Great for Jazz Bands<br/>
          Nice and shiny<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
      <div class="card">
        <h3 class="card-head">Bass Trombone</h3>
        <p class="price">$900</p>
        <p class="description">
          Sound quality is unmatched<br/>
          Best for professionals<br/>
          Absolutely stunning<br/>
          Durable and long lasting<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
      <div class="card">
        <h3 class="card-head">Valve Trombone</h3>
        <p class="price">$1200</p>
        <p class="description">
          Plays similar to a Trumpet<br/>
          Great for Jazz Bands<br/>
          Beautiful in sound and appearance<br/>
          Just amazing<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
    </section> 
  </main>

  <footer>
    <nav id="foot-bar">
      <ul>
        <li class="foot-link"><a href="#">Privacy</a></li>
        <li class="foot-link"><a href="#">Terms</a></li>
        <li class="foot-link"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <p class="foot-rights">Copyright 2016, Original Trombones</p>
  </footer>

</body>

</html>

/* file: styles.css */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; 
}

body {
  font-family: sans-serif;
  background-color: #e0e0e0;
}

#header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  background-color: #e0e0e0;
}

#nav-bar ul, #foot-bar ul {
  display: flex;
  gap: 30px;
  margin: 20px;
  list-style: none;
  font-size: 1.1rem
}

a {
  text-decoration: none;
  color: #000;
}

#header-img {
  width: 330px;
}


main {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh; 
}

.email h2 {
  text-align: center;
}

#form {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0 120px;
}

#email {
  background-color: white;
  height: 30px;
  width: 200px;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid black;
}

#email::placeholder {
  text-align: center;
}

#submit {
  background-color: #ffaf69;
  height: 30px;
  border-radius: 10px;
  font-weight: bold;
  padding: 5px;
  border-color: #e0e0e0;
  transition: #ff8a24 0.3s ease;
}

#submit:hover {
  background-color: #ff8a24;
}

#features {
  margin-top: 50px;
  display: grid;
  gap: 20px;
  padding-left: 20px;
}

#features h2 {
  margin-bottom: 10px;
}

#features p {
  font-size: 18px;
}

.feature-1::before {
  content: '🔥';
  font-size: 50px;
  float: left;
}

.feature-2::before {
  content: '🚚';
  font-size: 50px;
  float: left;
}

.feature-3::before {
  content: '💡';
  font-size: 50px;
  float: left;
}

.video-container {
  margin-top: 60px;
}

#video {
  width: 600px;
  height: 400px;
}

#pricing {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.card {
  background-color: whitesmoke;
  text-align: center;
  border: 1px solid black;
  width: 260px;
  height: 240px;
  margin-bottom: 50px;
  border-radius: 5px;
}

.card-head {
  margin-bottom: 20px;
  padding: 5px;
  font-size: 20px;
  background-color: #999;
}

.price {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
  background-color: whitesmoke;
}

.description {
  background-color: whitesmoke;
  margin-bottom: 20px; 
}

.card-btn {
  background-color: #ffaf69;
  height: 30px;
  border-radius: 10px;
  font-weight: bold;
  padding: 5px;
  border-color: #e0e0e0;
  width: 100px;
  font-size: 18px;
  transition: #ff8a24 0.3s ease;
}

.card-btn:hover {
  background-color: #ff8a24;
}

footer {
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 10px;
  padding-bottom: 10px;
}

@media only screen and (max-width: 500px) {
  #pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
  #video {
  width: 400px;
  height: 250px;
}

}

Your browser information:

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

Challenge Information:

Build a Product Landing Page - Build a Product Landing Page

GitHub Link: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-product-landing-page/587d78af367417b2b2512b04.md

2

Hi @meredov_aslan,

Does this section have an id?

Happy coding

3

I tried, but the problem wasn’t solved(

4

Please post your updated code formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

5 
<!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"/>
    <title>Product Landing Page</title>
  </head>

<body>
  <header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo"/>
    <nav id="nav-bar">
      <ul>
        <li class="nav-link"><a href="#features">Features</a></li>
        <li class="nav-link"><a href="#video">How It Works</a></li>
        <li class="nav-link"><a href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="email">
      <h2>Handcrafted, home-made masterpieces</h2>
      <form id="form" action="https://www.freecodecamp.org/email-submit" method="POST">
        <input type="email" id="email"
        name="email"
         placeholder="Enter your email address"/>
        <input type="submit" id="submit" value="GET STARTED"/>
      </form>
    </section>

    <section id="features">
      <div class="feature-1">
        <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 class="feature-2">
        <h2>Fast Shipping</h2>
        <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
      </div>
      <div class="feature-3">
        <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>
    </section>
      
      <iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc" 
              title="YouTube video player" frameborder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
              allowfullscreen>
        </iframe>

    <section id="pricing">
      <div class="card">
        <h3 class="card-head">Tenor Trombone</h3>
        <p class="price">$600</p>
        <p class="description">
          Good for beginners<br/>
          Excellent sound quality<br/>
          Great for Jazz Bands<br/>
          Nice and shiny<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
      <div class="card">
        <h3 class="card-head">Bass Trombone</h3>
        <p class="price">$900</p>
        <p class="description">
          Sound quality is unmatched<br/>
          Best for professionals<br/>
          Absolutely stunning<br/>
          Durable and long lasting<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
      <div class="card">
        <h3 class="card-head">Valve Trombone</h3>
        <p class="price">$1200</p>
        <p class="description">
          Plays similar to a Trumpet<br/>
          Great for Jazz Bands<br/>
          Beautiful in sound and appearance<br/>
          Just amazing<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
    </section> 
  </main>

  <footer>
    <nav id="foot-bar">
      <ul>
        <li class="foot-link"><a href="#">Privacy</a></li>
        <li class="foot-link"><a href="#">Terms</a></li>
        <li class="foot-link"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <p class="foot-rights">Copyright 2016, Original Trombones</p>
  </footer>

</body>

</html>
6

You should have at least three clickable elements inside the nav element, each with the class nav-link.

What elements there are clickable?

7

All three elements are clickable, but the problem is different - we need to match the 'href
’ with the ‘id’

8

The li element is not clickable. Which element there is? That’s where the nav-link class should go.

Also, each section element should have an id that is also used in your nav element. You’re not doing that.

9

Thank you very much for your feedback and help, I was able to solve this problem

<!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"/>
    <title>Product Landing Page</title>
  </head>

<body>
  <header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo"/>
    <nav id="nav-bar">
      <a class="nav-link" href="#features">Features</a>
      <a class="nav-link" href="#video">How It Works</a>
      <a class="nav-link" href="#pricing">Pricing</a>
    </nav>
  </header>

  <main>
    <section class="email">
      <h2>Handcrafted, home-made masterpieces</h2>
      <form id="form" action="https://www.freecodecamp.org/email-submit" method="POST">
        <input type="email" id="email"
        name="email"
         placeholder="Enter your email address"/>
        <input type="submit" id="submit" value="GET STARTED"/>
      </form>
    </section>

    <section id="features">
      <div class="feature-1">
        <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 class="feature-2">
        <h2>Fast Shipping</h2>
        <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
      </div>
      <div class="feature-3">
        <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>
    </section>
      
      <iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc" 
              title="YouTube video player" frameborder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
              allowfullscreen>
        </iframe>

    <section id="pricing">
      <div class="card">
        <h3 class="card-head">Tenor Trombone</h3>
        <p class="price">$600</p>
        <p class="description">
          Good for beginners<br/>
          Excellent sound quality<br/>
          Great for Jazz Bands<br/>
          Nice and shiny<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
      <div class="card">
        <h3 class="card-head">Bass Trombone</h3>
        <p class="price">$900</p>
        <p class="description">
          Sound quality is unmatched<br/>
          Best for professionals<br/>
          Absolutely stunning<br/>
          Durable and long lasting<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
      <div class="card">
        <h3 class="card-head">Valve Trombone</h3>
        <p class="price">$1200</p>
        <p class="description">
          Plays similar to a Trumpet<br/>
          Great for Jazz Bands<br/>
          Beautiful in sound and appearance<br/>
          Just amazing<br/>
        </p>
        <button class="card-btn">Select</button>
      </div>
    </section> 
  </main>

  <footer>
    <nav id="foot-bar">
      <ul>
        <li class="foot-link"><a href="#">Privacy</a></li>
        <li class="foot-link"><a href="#">Terms</a></li>
        <li class="foot-link"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <p class="foot-rights">Copyright 2016, Original Trombones</p>
  </footer>

</body>

</html>