Product Landing Page

HTML-CSS
1

I HAVE 2 LITTLE PROBLEMS:

  1. I’m not understanding why the first line “Premium material” is different compared to the two others
  2. How i can remove that little space invisible line over the navbar which allows to see behind of it?
2

Please post your full code.

4 
<!DOCTYPE hml>
<html lang='en'>
  <head>
   <link rel='stylesheet' href='styles.css' />
   <script src="https://kit.fontawesome.com/6fcea5cb78.js" crossorigin="anonymous"></script>
  </head>
  <body>
   <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' />
    </div>
    <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>
   <section class='email-form'>
    <h2 id='form-h2'>Handcrafted, home-made masterpieces</h2>
    <form id='form' action='https://www.freecodecamp.com/email-submit'>
     <input id='email'  type='email' name='email' placeholder='Enter your email address' required />
     <input id='submit' type='submit' value='GET STARTED' />
    </form>
   </section>
   <div class='container'>
    <div id='Features'>
     <div class='grid'>
      <div class='icon'>
       <i class="fa-solid fa-fire-flame-curved" style="color: #ffb61a;"></i>
      </div>
      <div class='text'></div>
       <h2>Premium Materials</h2>
       <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
     </div>
    </div>
    <div class='grid'>
     <div class='icon'>
      <i class="fa-solid fa-truck" style="color: #ffb61a;"></i></div>
     <div class='text'>
      <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>
     </div>
    </div>
    <div class='grid'>
     <div class='icon'>
      <i class="fa-solid fa-battery-full" style="color: #ffb61a;"></i>
     </div>
     <div class='text'>
      <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>
    <div id='How_It_Works'>
     <iframe id='video' src='https://www.youtube.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0' height='315' width='500' frameborder='0'></iframe>
    </div>
    <div id='Pricing'>
     <section class='product'>
      <div class='tenor'>
       <h4 class='product-heading'>TENOR TROMBONE</h4>
       <h1 class='price'>$600</h1>
       <p class='description'>Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.</p>
       <input type='submit' id='product-submit' value='SELECT' />
      </div>
     </section>
     <section class='product'>
      <div class='bass'>
       <h4 class='product-heading'>BASS TROMBONE</h4>
       <h1 clas='price'>$900</h1>
       <p class='description'>Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.</p>
       <input type='submit' value='SELECT' id='product-submit' />
      </div> 
     </section>
     <section class='product'>
      <div class='valve'>
       <h4 class='product-heading'>VALVE TROMBONE</h4>
       <h1>$1200</h1> 
       <p>Plays similar to a Trumpet<br>
Great for Jazz Bands<br>
Lorem ipsum dolor.<br>
Lorem ipsum.</p>
       <input type='submit' value='SELECT' id='product-submit' />
      </div>
     </section>
    </div>
   </div>
  </body>
</html>

CSS:

body{
  background-color: #eee;
  font-family: Lato, sans-serif;
}

#header{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  background-color: #eee;
}

#header-img{
  max-width: 300px;
  width: 100%;
  height: 100%;
}

.logo{
  width: 60vw;
}

ul{
  display: flex;
  justify-content: space-around;
}

#nav-bar{
  font-weight: 400;
  width: 40vw;
}

li{
  list-style-type: none;
}

.nav-link{
  text-decoration: none;
  color: black;
}

.email-form, #form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#form-h2{
  margin-top: 60;
}

#email{
  padding: 5px;
  max-width: 260px;
  width: 260px;
}

#submit{
  background-color: f1c40f;
  margin-top: 15px;
  border: none;
  max-width: 145px;
  width: 100%;
  height: 30;
  font-weight: 900;
  font-size: 1em;
}

.features{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0;
  padding: 0;
}

.grid{
  display: flex;
  flex-direction: row;
}

.fa-solid{
  font-size: 50px;
}

.icon{
  width: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#How_It_Works{
  display: flex;
  justify-content: center;
  align-items: center;
}

#Pricing{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 50;
}

.product{
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid black;
  width: 25vw;
  min-width: 225;
}

.product-heading{
  background-color: #cec9c9;
  margin-top: 0;
  height: 30;
  padding-top: 10;
}

#product-submit{
  background-color: f1c40f;
  border: none;
  padding: 10;
  font-size: 1em;
  margin-bottom: 10;
}

@media (max-width: 800px){
  #Pricing{
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  .product{
    margin-bottom: 20;
  }
}
5

  1. You didn’t put the h2 and p elements inside the text element like you have for the others.

  2. When using position: fixed you should set the offsets as well. In your case you want left and top both to be 0

6

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