Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

i am so confused. i know that there is some kind of problem with the nav-bar

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
</html lang="en">
<head>
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
    <nav id="nav-bar">
    <ul>
      <li class="nav-link"><a href="#Features">Features</a></li>
      <li class="nav-link"><a href="#How-it-works">How it works</a></li>
      <li class="nav-link"><a href="#Pricing">Pricing</a></li>
    </ul>
  </nav>
</header>
<div id="Features"></div>
<div id="How-it-works"></div>
<div id="Pricing"></div>
<section id="hero">
  <h2>Handcrafted, home-made masterpieces<h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" placeholder="Enter your email address" type="email" name"email" required></input>
    <input type="submit" id="submit" value="GET STARTED"></input>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/smK-TGbemLw?si=39vYTKHvZY3Bfi9x" title="YouTube video player" frameborder="0" 
    </form>
  </section>
</body>
</html>

/* file: styles.css */
body {
  background-color: #eee;
  font-family: Lato, sans-serif;
}
#header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
logo {
  width: 60vw;
}
#header-img {
  max-width: 300px;
  width: 100%;
  height: 100%;
}
nav-bar {
  font-weight: 400;
  width: 40vw;
  justify-content: space-around;
  position: fixed;
  top: 0;
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
li {
  list-style: none;
  display: inline-block;
}
nav-link {
  color: black;
  text-decoration: none;
}
#hero, #form {
  display: flex;
  flex-direction: column;
   justify-content: center;
   align-items: center;
}
email {
  max-width: 275px;
  width: 100%;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

The img before the nav-bar is missing the closing angular bracket, that will solve a few of the tests

3

Also, you probably want to move the .nav-link attributes into the anchor elements so that they’re alongside the href attributes. That will pass another of the navbar tests.

4

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