Product Landing Page - Build a Product Landing Page

HTML-CSS
1

How do i change the icon color?

   ```
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.

``` * { margin: 0; padding: 0; box-sizing: border-box; } #submit{ display:block; margin:0 auto; } #email{ display:block; margin:0 auto; width:50%; padding:5px;

}
.btn{
width:30%;
height:25px;
background-color:#FEA500;
border:none;
color:#0D0902;
font-weight:bold;
}
.fa fa-3xfa-fire{
color: #FEA500
}

/* file: index.html */
<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 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>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="fast_shipping">
    <div class="icon">
      <i class="fa fa-3x fa-fire"></i>
    <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>
<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;
}
#email{
  display:block;
 margin:0 auto;
 width:50%;
 padding:5px;
 
}
.btn{
 width:30%;
 height:25px;
 background-color:#FEA500;
 border:none;
 color:#0D0902;
 font-weight:bold;
}
.fa fa-3xfa-fire{
color: #FEA500
}

   **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:

2

The Font Awesome icons act just like a font, so you just gotta select it on CSS and use the color property

The issue here seems to happen because you selected the classes incorrectly, it should be:

.fa .fa-3x .fa-fire{
color: #FEA500
}
3

i tried your solution and it still didn’t work unfortunately

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#submit{
  display:block;
  margin:0 auto;
}
#email{
   display:block;
  margin:0 auto;
  width:50%;
  padding:5px;
  
}
.btn{
  width:30%;
  height:25px;
  background-color:#FEA500;
  border:none;
  color:#0D0902;
  font-weight:bold;
}
.fa .fa-3x .fa-fire{
  color:#FF8C00
}
4

oh, I just went over your code again and it seems like you forgot to link your external styles.css to your code, can you link it in your <head> and check if that was it?

5

ok i did that but still nothing maybe i added the link wrong?

<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>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="fast_shipping">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i>
     <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>
 <iframe id="video"></iframe>

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

I don’t see the necessity in selecting all of its classes like this, you can just select .fa-fire to change the color of this icon in specific or select .fa to change the color of all Font Awesome icons you include throughout your project.

7

it worked! thank you! :blush:

8

this selector doesn’t work for what you are trying to achieve.

it should be like

.fa ,  
.fa-3x , 
.fa-fire{
color : dodgerblue;
}
9

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