Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

This keeps not working for 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">
</head>
<body>
  <header name="header" id="header" class="header">
    <div name="logo img" class="logo" id="logo">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img" class="header-img">
    </div>
    <nav name="nav-bar" id="nav-bar" class="nav-bar">
      <ul name="menu" id="menu" class="menu">
        <li><a href="#video" class="nav-link">Video</a></li>
        <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>
        <li><a href="#contact" class="nav-link"">Contact</a></li>
      </ul>
    </nav>
    
  </header>




  <main>
    <section name="login" class="login" id="login">
      <h1>Handcrafted, home-made masterpieces</h1>
      <form id="form" class="form" action="https://www.freecodecamp.com/email-submit">
        <input type="email" name="email" id="email" class="email" placeholder="Enter your email address">
        <input type="submit" value="GET STARTED" name="submit button" id="submit">
      </form>
    </section>
    <section name="content" id="content" class="content">
      <iframe src="https://youtu.be/y8Yv4pnO7qc" id="video" name="video"><iframe>
    <section>
  </main>



  
  <footer class="footer" id="footer">
    <a href="https://product-landing-page.freecodecamp.rocks/#features" class="features" id="features" name="footer">Features</a>
    <a href="https://product-landing-page.freecodecamp.rocks/#how-it-works" class="how-it-works" id="how-it-works" name="footer">How It Works</a>
    <a href="https://product-landing-page.freecodecamp.rocks/#pricing" class="pricing" id="pricing" name="footer">Pricing</a>
    <a href="https://product-landing-page.freecodecamp.rocks/#contact" class="contact" id="contact" name="footer">Contact</a>
  </footer>
</body>
</html>
/* file: styles.css */
html {
  margin: 0 20px;
}
main {
  width: 100%;
}
a {
  text-decoration: none;
  color: black;
}
.content {
  display: flex;
  justify-content: center;
}
.header-img {
  float: left;
  display: block;
}
.nav-bar > ul > li {
  float: right;
}
li {
  display: inline;
}
header {
  height: 15%;
  display: inline;
  flex-direction: column;
  width: 100%;
  position: fixed;
}
.nav-bar {
  display: block;
  position: fixed;
  float: right;
}
img {
  width: 40%;
}
#header-img, #nav-link {
  display: inline-block;
}
#email, #submit {
  display: block;
}

#submit {
  font-family: Helvetica;
  font-weight: 1000;
  border: none;
  padding: 5px 10px;
  background-color: yellow;
}
#login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
@media only screen and (max-width: 600px) {
  nav {
    display: flex;
    flex-direction: column;
  }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

i already found it

and my iframe ending is missing ‘/’
i shouldn’t use .nav-bar > ul> li but instead .nav-bar li

1 Like

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