Product Landing Page

HTML-CSS
1 
<!DOCTYPE html>
<html lang=en>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <div id="nav-div">
        <nav id="nav-bar">
          <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
          <ul id="nav-list">
            <li><a href="#Features" class="nav-link">Features</a></li>
            <li><a href="#video" class="nav-link">How it works</a></li>
            <li><a href="#Pricing" class="nav-link">Pricing</a></li>
          </ul>
       </nav>
      </div>
      <div id="extra-space"></div>
        <div id="email-div">
          <h1>Handcrafted, home-made masterpieces</h1>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input name="email" id="email" placeholder="enter your email" type="email" required><br><br>
            <input id="submit" type="submit" value="GET STARTED">
          </form>
        </div>
    </header>
    <div id="div-Features">
      <ul id="Features">
        <ii><h3>
Premium Materials</h3><p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></li>
        <ii><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></li>
        <ii><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></li>
      </ul>
    </div>
    <div id="div-How_it_Works">
      <iframe id="video" width="420" height="315"
src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="Pricing">
      <div class="package" id="tenor">
        <div class="type"><h2>TENOR TROMBONE</h2></div>
        <h3>$600</h3>
        <ul>
          <li><p>Lorem ipsum.</p></li>
          <li><p>Lorem ipsum.</p></li>
          <li><p>Lorem ipsum dolor.</p></li>
          <li><p>Lorem ipsum.</p></li>
          <input id="select" type="button" value="SELECT">
        </ul>
      </div>
      <div class="package" id="bass">
        <div class="type"><h2>BASS TROMBONE</h2></div>
        <h3>$900</h3>
        <ul>
          <li><p>Lorem ipsum.</p></li>
          <li><p>Lorem ipsum.</p></li>
          <li><p>Lorem ipsum dolor.</p></li>
          <li><p>Lorem ipsum.</p></li>
          <input id="select" type="button" value="SELECT">
      </div>
      <div class="package" id="valve">
        <div class="type"><h2>VALVE TROMBONE</h2></div>
        <h3>$1200</h3>
        <ul>
          <li><p>Plays similar to a Trumpet</p></li>
          <li><p>Great for Jazz Bands</p></li>
          <li><p>Lorem ipsum dolor.</p></li>
          <li><p>Lorem ipsum.</p></li>
          <input id="select" type="button" value="SELECT">
      </div>
    </div>
  </body>
</html>

html {
  font-size: 10px;
  font-family: sans-serif;
  line-height: 1;
  background-color: #edece9;
}

nav {
  font-size: 1.4rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: fixed;
  background-color: #edece9;
  width: 100%;
  top: 0;
}

a {
  text-decoration: none;
  color: black;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#nav-list li {
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
}

img {
  padding: 10px 10px;
  margin: 0;
  height: 20px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: -1;
}

#extra-space {
  width: 100%;
  height: 50px;
}

#email {
  max-width: 150px;
}

#submit {
  max-width: 150px;
  width: 100%;
  height: 30px;
  text-align: center;
  border: 0;
  background-color: #f1c40f;
  font-weight: 900;
  font-size: 1.5rem;
}

form {
  text-align: center;
}

header {
  margin-bottom: 10px
}

#Features {
  font-size: 1.3rem;
  padding: 10px 20px;
}

div-Features {
  display: flex;
  justify-content: center;
  height: 125px;
  width: 80vw;
  padding: 5px;
}

li p {
  display: block;
}

#div-How_it_Works {
  padding: 10px;
  display: flex;
  justify-content: center;
}

#pricing {
  display: flex;
  flex-direction: row;
}

.package {
  justify-content: space-between;
  text-align: center;
  align-items: center;
  border: 1px solid #000;
  width: calc(100% / 3);
  margin: 6px;
}

.type {
  width: 100%;
  background-color: #ddd;
}

h2 {
  font-size: 1.6em;
  width: 10px;
}

h3 {
  font-size: 2em;
  margin-bottom: 10px;
}

#select {
  max-width: 100px;
  width: 100%;
  height: 30px;
  text-align: center;
  border: 0;
  background-color: #f1c40f;
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 10px
}

Hi, I’m almost done with the product landing page but when i run the test for the nav-bar, it says that I don’t have my nav bar at the top all the time but when I go to preview and I scroll, its always at the top. Please help me.

2

I think this may be a bug in the test. This particular test doesn’t seem to like that you wrapped a div around the nav. If I get rid of the #nav-div div around the nav then that test passes.

3

It worked, thank you

4

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