I am stuck in this landing page project, please help

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Landing page</title>
  </head>
  <body>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous">

    <div id="page-wrapper">
      <header id="header">
        <div class="logo">
          <img
            id="header-img"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
            alt="original trombones logo"/>
        </div>
        <nav id="nav-bar">
          <ul>
            <li><a class="nav-link" href="#features">Features</a></li>
            <li><a class="nav-link" href="#Sounds">Sounds</a></li>
            <li><a class="nav-link" href="#Products">Products</a></li>
          </ul>
        </nav>
      </header><br>

      <div class="container"></div>
      <section id="hero"><br>
      <form id="form" action="https://www.freecodecamp.com/email-submit"><br>
          <input name="email"
           id="email"
          type="email"
          placeholder="Enter your email address"
          required=""/>
          <input id="submit" type="submit" value="Send it!" class="btn">
          <h1 >Sounds of the Strings</h1>
          <p>
         "We Believe that mellifious sounds brings peace and harmony"
          </p>
      </form>
      </div>
    </section>

    <div class="container">
      <section id="features">
        <div class="grid">
          <div class="icon"><i class="fa fa-3x fa-fire"></i></div>
          <div class="desc">
            <h2>Quality Materials</h2>
            <p>
            Our Custom Guiters are from all over the world and 
            use the Finest of wood and best quality strings to
            provide desired sound and make you fall in love the sound.
            </p>
        </div>
      </div><br>

    <div class="grid">
      <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
      <div class="desc">
        <h2>Fast Delivery</h2>
        <p>
          We will make sure that, You get your Dream Guiter on time,
          We also provide free returns if you are not satisfied.
        </p>
      </div>
      </div><br>

      <div class="grid">
        <div class="icon"><i class="fa fa-3x fa-thumbs-up" aria-hidden="true"></i></div>
        <div class="desc">
          <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>
  </section>

  <section id="Sounds">
    <iframe 
    id ="video"
    type="text/html"
    height ="315"
    src="https://www.youtube.com/embed/watch?v=Ctpcwi1o210"
    frameborder="0" allowfullscreen></iframe>
  </section><br>

  <section id="Products">
    <div class="product" id="oud">
      <div class="level">
        <b>Oud Arab-Sounds</b>
      </div>
      <h2>$100</h2>
      <img src="images/OUD.jpg" alt="Oud">
      <p>If the world of Arab music were a kingdom, this instrument would, without a doubt, be its bonafide ruler.
        It has often been called the “king of instruments” and rightly so as the sound iconic tones it produces has come to symbolize the world of traditional Arab music. Literally meaning ‘twig’ or ‘flexible rod,’ the oud is the main instrument of composition similar to the piano.</p><br>
      <ol style="text-align:justify;">
        <li>Quality of sound is also a distinctive feature of the Oud</li>
        <li>tight tuning of the banjaq, with the banjaq carved on a piece of wood</li>
      </ol>
      <a href="https://www.youtube.com/watch?v=fY4YW-Wmf-Y"><em>Listen</em></a>
      <button class="btn">Select</button>
    </div><br>

    <div class="project" id="acoustic">
      <div class="level">
        <b>Acoustic Guiter</b>
      </div>
      <h2>$80</h2>
      <img src="images/Acoustic.jpg">
      <p>An acoustic guitar is a musical instrument in the guitar family. Its strings vibrate a sound board on a resonant body to project a sound wave through the air. The original, general term for this stringed instrument is guitar, and the retronym 'acoustic guitar' distinguishes it from an electric guitar, which relies on electronic amplification. Typically, a guitar's body is a sound box, of which the top side serves as a sound board that enhances the vibration sounds of the strings.</p><br>
      <a href="https://www.youtube.com/watch?v=owx7g3ZYbFs">Listen To My heart will go on guiter version</a>
      <ol>
        <li>Acoustic Guiter</li>
        <li>The vibrations carry through the air and do not require electrical amplification</li>
        <li> This acoustic guitar tuning pegs providing for finer adjustment, and greater stability.</li>
      </ol>
      <button class="btn">Select</button>
    </div>

    <div class="project" id="violin">
      <div class="level">
        <b>Violin</b>
      </div>
      <h2>$120</h2>
      <img src="images/Violin.jpg">
      <p>Violin, byname fiddle, bowed stringed musical instrument that evolved during the Renaissance from earlier bowed instruments: the medieval fiddle; its 16th-century Italian offshoot, the lira da braccio; and the rebec. The violin is probably the best known and most widely distributed musical instrument in the world.</p><br>
      <a href="https://www.youtube.com/watch?v=wh-pBxeHE3U">Sound of Violin</a>
      <ol>
        <li>Violin</li>
        <li>n the 19th century, with the advent of large auditoriums and the violin virtuoso, the violin underwent its last changes in design. The bridge was heightened, the sound post and bass bar were thickened, and the body became flatter.</li>
        <li>A bowed string vibrates and moves in a circular motion that produces the fundamental tone, while the vibration produces overtones like a rippling wave. This complex movement of the string is transmitted to the body by the bridge.</li>
      </ol>
      <button class="btn">Select </button>
    </div>
  </section>
  <footer>
    <ul>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <span>Copyright 2021, mellifious sounds </span>
  </footer>
</div>
</div>



  <style>
    * {
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }

    header {
      position: fixed;
      width: 100%;
      top: 0;
      min-height: 40px;
      padding: 0px 20px;
      align-items: left;
      background-color: #eee;
      color: white;
      font-family: 'Exo 2', sans-serif;
      z-index: 1000;
    }
    header-img{
      z-index: 100;
      height: 40px;
      padding-top: 50px;

    }

    @media (max-width: 600px) {
      header {
        flex-wrap: wrap;
     }
    }

    .logo {
      width: 60vw;
      height: 20px;
      float: left;
    }




    #page-wrapper {
      position: relative;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }



   
    li {
      float: left;
    }
    li a {
      display: block;
      color: white;
      padding: 14px 16px;
      text-decoration: solid;
    }
    li a:hover {
      background-color: #111;
    }
    body {
      background-color: #eee;
      font-family: 'Lato', sans-serif;
    }
    .logo {
      display: inline-block;
      vertical-align: right;
      width: 100px;
      height: 50px;
      margin-right: 50px;
      margin-top: 10px;
    }
    .nav-bar > a {
      display: inline-block;
      vertical-align: top;
      margin-right: 20px;
      height: 80px;
      line-height: 80px;
    }
  </style>  
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

*So, I am sorry I didn't provide the link because I am building it on my code editor, I am able to pass the test but my header is in fixed position and somehow is hiding my content ,  If i use position relative or anything it solves but the test requires it to be fixed please help*

I’m a little confused. The error I am getting is:

“My product landing page should utilize CSS flexbox at least once.”

And I don’t see display: flex anywhere in your CSS.

1 Like

Hey,
There your error is because you haven’t put display:flex;
I don’t know where exactly but you have to put it and it will solve the problem

Oh noooo
Sorry about that
You were talking about my error no that’s not a problem actually I can display flex anywhere and it will pass all the tests but the nav header or nav is hidden the first part

Will you please post a link to your code so we don’t have to copy/paste.

You may be coding locally but you have to have a live link to your project when you submit. Post that link please.

I’m guessing you are asking why the content after the header is below it?

position: fixed takes the element out of normal document flow. This means it will not interact with other elements on the page and therefore will not push down any content that comes after it. You have to push down the content yourself. Not sure why you have an empty container div but the first section would be #hero so that is what you would put a top margin or padding on.

#hero {
  margin-top: 60px; /* height of header */
}

I deleted every styling and guess I am gonna start all over again with a fresh new day, Thanks a lot for advice really appreciate that

like how? the javascript test bundle?

oh the #hero? what does it mean?

Not sure what you are asking. It’s an id selector.

It selects the HTML element with id="hero" and sets a margin-top to push it down so it isn’t behind the header.

The code that you’ve presented, with some slight modifications, is a copy of the sample project.

I mentioned this with your first project too. Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

  • The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.

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