Product landing page css

Hi there,
I need help with this page, I don´t what to use in css so that the header wont overlap the rest of the content. it should look something similar to
https://product-landing-page.freecodecamp.rocks/

Here is the code as I have it so far:

** start of undefined **

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>product-landing-page</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <div id="page">
      <header id="header">
        <<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
        <nav id="nav-bar">
          <ul>
            <li><a class="nav-link" href="#Features">Features</a></li>
            <li><a class="nav-link" href="#How it works">How It Works</a></li>
            <li><a class="nav-link" href="#Pricing">Pricing</a></li> 
          <ul>
        </nav>
      </header>
    <div>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <p>Handcrafted, home-made masterpieces</p>
        <input type="email" name="email" required id="email" placeholder="enter email address"/>
        <input id="submit" type="submit" value="get started">
      </form>
      <div id="classes">
        <section id="Features">
          <h2>Premium Materials</h2>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
          <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>
          <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>
        </section>
      </div>
    </div>
    <section id="How it works">
      <iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"></iframe>
    </section>
    <section id="Pricing">
      <div class="tenor">TENOR</div>
        <div id="price"><h2>$600<h2></div>
        <p class="characteristics">
          <div>Lorem ipsum.</div>
          <div>Lorem ipsum.</div>
          <div>Lorem ipsum dolor.</div>
          <div>Lorem ipsum.</div>
        </p>
        <input type="submit" class="select" value="select" />   
      </div>
      <div class="bass trombone">BASS TROMBONE</div>
        <div id="price"><h2>$900<h2></div>
        <p class="characteristics">
          <div>Lorem ipsum.</div>
          <div>Lorem ipsum.</div>
          <div>Lorem ipsum dolor.</div>
          <div>Lorem ipsum.</div>
        </p>
        <input type="submit" class="select" value="select" />   
      </div>
      <div class="VALVE TROMBONE">VALVE TROMBONE</div>
        <div id="price"><h2>$1200<h2></div>
        <p class="characteristics">
          <div>Plays similar to a Trumpet</div>
          <div>Great for Jazz Bands</div>
          <div>Lorem ipsum dolor.</div>
          <div>Lorem ipsum.</div>
        </p>
        <input type="submit" class="select" value="select" />   
      </div>
    </section>
    </div>
  </body>
</html>

** end of undefined **

** start of undefined **

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

body {
  background-color: #eee;
}

header {
  position: fixed;
  top: 0;
  align-items: center;
  background-color: #eee;
}

li {
  list-style: none;
}

page {
  position: relative;
}

#classes  {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 650px) {
  #features {
    margin-top: 0;
  }
}

#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}


** end of undefined **

Any feedback would be appreciated!!! Thanks a lot

You have added an extra < at the beginning of your image element.

Your css is also weird, you have the position for your header (which the image logo is nested) set to fixed instead of absolute.

Try to also call more things in your css to get some extra customization of the layout. ie; “.nav-link…” “#header-img…”

Ok! I´ll try that, the position is fixed because the navigation bar should be visible when scrolling down, is there another way to do it?
Thanks a lot for your reply!

Yes actually I believe the way you do that is using position: sticky

However it might not work as i’ve tried before to get the same effect and it didn’t respond properly. My guess is because it’s being compiled through the websites algorithms.

That worked!! I totally forgot about sticky position!! Thanks a lot. I´ll try to add more format and brb. :smiley:

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