Product Landing Page - Build a Product Landing Page

I am trying to align the battery icon with the heading and text of “quality Assurance”

<head>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<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 trombone image"/></div><nav id="nav-bar">
  <ul>
    <li>
  <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
  </li>
  <li>
  <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
  </li>
  <li>
  <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
  </li>
  </ul>
  <div class="container"></div>
  <section id="hero">
  <h2 id="heading1">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"/>
 <input id="submit" type="submit" value="GET STARTED" class="btn"/>
 
 </form>
 </section>
 <div class="container">
   <section id="premium-materials">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i></div>
       <div class="desc">
     <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>
     
     
     </section>
     <section id="fast-shipping">
          <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
       <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>
     </section>
     <section id="quality-assurance">
              <div class="icon">
          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
       <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>
 <iframe id="video"></iframe>

 </div>
  </nav>
  </div></header>
  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    #submit{
    display:block;
    margin:0 auto;
    text-align:center;
    }
    #email{
    display:block;
    margin:0 auto;
    width:45%;
    padding:5px;

}
.btn{
width:25%;
height:25px;
background-color:#FEA500;
border:none;
color:#0D0902;
font-weight:bold;
}
.fa-fire{
color:#FF8C00;
margin-left:300px
}

#heading1{
text-align:center;
}
.fa-truck{
color:#FF8C00;
margin-left:300px;
}

.fa-battery-full{
color:#FF8C00;

}
#fast-shipping {
margin-top: 50px;
display: flex;
justify-content: center;
}

#premium-materials{
margin-top: 50px;
display: flex;
justify-content: center;
}

#quality-assurance {
margin-top: 50px;
display: flex;
justify-content: center;
}

/* file: index.html */
<head>
<link
 rel="stylesheet"
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
 integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
 crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<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 trombone image"/></div><nav id="nav-bar">
 <ul>
   <li>
 <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
 </li>
 <li>
 <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
 </li>
 <li>
 <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
 </li>
 </ul>
 <div class="container"></div>
 <section id="hero">
 <h2 id="heading1">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"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>

</form>
</section>
<div class="container">
  <section id="premium-materials">
    <div class="icon">
      <i class="fa fa-3x fa-fire"></i></div>
      <div class="desc">
    <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>
    
    
    </section>
    <section id="fast-shipping">
         <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
      <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>
    </section>
    <section id="quality-assurance">
             <div class="icon">
         <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
      <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>
<iframe id="video"></iframe>

</div>
 </nav>
 </div></header>
/* file: styles.css */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
#submit{
 display:block;
 margin:0 auto;
 text-align:center;
}
#email{
  display:block;
 margin:0 auto;
 width:45%;
 padding:5px;
 
 
}
.btn{
 width:25%;
 height:25px;
 background-color:#FEA500;
 border:none;
 color:#0D0902;
 font-weight:bold;
}
.fa-fire{
 color:#FF8C00;
margin-left:300px
}

#heading1{
 text-align:center;
}
.fa-truck{
 color:#FF8C00;
 margin-left:300px;
}

.fa-battery-full{
   color:#FF8C00;

}
#fast-shipping {
 margin-top: 50px;
 display: flex;
 justify-content: center;
}

#premium-materials{
  margin-top: 50px;
 display: flex;
 justify-content: center;
}

#quality-assurance {
margin-top: 50px;
 display: flex;
 justify-content: center;
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You didn’t close the div element with the icon class on the last one.

I’d suggest you validate your HTML.


I’m a little confused why the nav element is used the way it is as a container for almost everything. I would expect that to be closed after the ul before the page sections.

You also have an empty container element before the hero section.

ok i think i have fixed the error but the icon still didn’t align with the text.

<head>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<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 trombone image"/></div><nav id="nav-bar">
  <ul>
    <li>
  <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
  </li>
  <li>
  <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
  </li>
  <li>
  <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
  </li>
  </ul>
  <div class="container"></div>
  <section id="hero">
  <h2 id="heading1">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"/>
 <input id="submit" type="submit" value="GET STARTED" class="btn"/>
 
 </form>
 </section>
 <div class="container">
   <section id="premium-materials">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i></div>
       <div class="desc">
     <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>
     
     
     </section>
     <section id="fast-shipping">
          <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
       <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>
     </section>
     <section id="quality-assurance">
              <div class="icon">
          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
       <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.
</div>
</p>
     </section>
 <iframe id="video"></iframe>

 </div>
  </nav>
  </div></header>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#submit{
  display:block;
  margin:0 auto;
  text-align:center;
}
#email{
   display:block;
  margin:0 auto;
  width:45%;
  padding:5px;
  
  
}
.btn{
  width:25%;
  height:25px;
  background-color:#FEA500;
  border:none;
  color:#0D0902;
  font-weight:bold;
}
.fa-fire{
  color:#FF8C00;
margin-left:300px
}

#heading1{
  text-align:center;
}
.fa-truck{
  color:#FF8C00;
  margin-left:300px;
}

.fa-battery-full{
    color:#FF8C00;

}
#fast-shipping {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#premium-materials{
   margin-top: 50px;
  display: flex;
  justify-content: center;
}

#quality-assurance {
 margin-top: 50px;
  display: flex;
  justify-content: center;
}

You need to close the div in the same place as you do with the other ones.

Also, for the first one, you have a desc container for the h2 and p elements which you do not have for the other two.

If this is how the first one looks:

<section id="premium-materials">
  <div class="icon">
    <i class="fa fa-3x fa-fire"></i>
  </div>
  <div class="desc">
    <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>
</section>

The rest should look the same.


I would strongly advise you to format the code better. Without proper formatting, it’s much harder to read and you are much more likely to start making mistakes.

I would suggest using an editor that can help you format the document. You can transfer it back to the fCC editor when you are done.

ok so i figured out where i was missing a div. now i just need to align the icons so how do i do that? do i use display:flex?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#submit{
  display:block;
  margin:0 auto;
  text-align:center;
}
#email{
   display:block;
  margin:0 auto;
  width:45%;
  padding:5px;
  
  
}
.btn{
  width:25%;
  height:25px;
  background-color:#FEA500;
  border:none;
  color:#0D0902;
  font-weight:bold;
}


#heading1{
  text-align:center;
}

#fast-shipping {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#premium-materials{
   margin-top: 50px;
  display: flex;
  justify-content: center;
}

#quality-assurance {
 margin-top: 50px;
  display: flex;
  justify-content: center;
}
.icon{
  display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 20vw;
    color: darkorange;
}

original trombone image

Handcrafted, home-made masterpieces

Premium Materials

Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.

 </section>
 <section id="fast-shipping">
      <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
      <div id="desc">
   <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.

Quality Assurance

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.

``` ```
<head>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<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 trombone image"/></div><nav id="nav-bar">
  <ul>
    <li>
  <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
  </li>
  <li>
  <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
  </li>
  <li>
  <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
  </li>
  </ul>
  <div class="container"></div>
  <section id="hero">
  <h2 id="heading1">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"/>
 <input id="submit" type="submit" value="GET STARTED" class="btn"/>
 
 </form>
 </section>
 <div class="container">
   <section id="premium-materials">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i></div>
       <div class="desc">
     <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>
     
     
     </section>
     <section id="fast-shipping">
          <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
          <div id="desc">
       <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>
     </section>
     <section id="quality-assurance">
              <div class="icon">
          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
          </div>
       <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.
</div>
</p>
     </section>
 <iframe id="video"></iframe>

 </div>
  </nav>
  </div></header>

You need to make each of the sections a flex container and use the flex justify/align properties.


BTW, the point of the challenge isn’t to recreate the example project and you really shouldn’t copy it, and definitely not the code.

1 Like