Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Nav link issue?? " 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 )." I don’t understand what is not passing. It looks all correct to me…

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
<title>Product Landing Page</title>
<script src="https://kit.fontawesome.com/431c2859ea.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
      <header id="header">
        <div class="logo">
          <img id="header-img" alt="logo" 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="howitworks">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 type="email" name="email" id="email" placeholder="Enter your email address" required></input>
        <input type="submit" id="submit" value="GET STARTED"></input>
        </form>
      </section>

      <div class="container">
    <div id="features">
      <div class="grid">
        <div class="icon">
          <i class="fa-solid fa-fire-flame-curved" style="color: #ff9500;"></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>
    <div class="grid">
        <div class="icon">
          <i class="fa-sharp fa-solid fa-truck" style="color: #ff9500;"></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>
    <div class="grid">
        <div class="icon">
          <i class="fa-solid fa-battery-full" style="color: #ff9500;"></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="howitworks"></div>
<iframe id="video" height="315" \href="https://youtu.be/y8Yv4pnO7qc" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen>
 </iframe>
    <div id="pricing"></div>
      </div>
    </body>
</html>

/* file: styles.css */
@media (min-width: 600px) and (max-width: 768px) {
body{
  background-color: #eee;
  font-family: "Lato", sans-serif;
}
}
#header{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: fixed;
}

.logo{
  width: 60vw;
}

#header-img{
  max-width: 300px;
  width: 100%;
  height: 100%;
}

#nav-bar{
  font-weight: 400;
  width: 40vw;
}

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: #f1c40f;
  border: none;
  font-weight: 900;
  font-size: 1em;
}



.grid{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 800px;
}

.fa-solid{
  color: #ff9500;
  font-size: 3em; 
  justify-content: space-around;
  margin-right: 45px;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

The .nav-link with href=“features” is not linked to a corresponding element on the page. Actually, all three ‘href’ attributes should have the value that starts with #. In other words, the first ‘href’ should have the value #features. Do the same for all ‘href’ attributes.

3

Thank you!! It worked

2 Likes
4

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