Product Landing Page - Build a Product Landing Page

I’m battling with 2 problems:

  1. The video I added using the iframe element isn’t playing.
  2. The icons I added using font-awesome aren’t showing on the page.
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Product Landing Page</title>
  </head>

  <body>
    <header id="header">
      <a href="#subscribe"><img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRs8z7dKgoImoHPq5dx-tBg3sM_TS4_o0KDUQ&usqp=CAU" /></a>
      <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 id="subscribe">
    <h2 id="catch-phrase">Airpods Made For You</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
        
      <input id="email" type="email" name="email" placeholder="Enter your email and stay updated on our products"  />
    
      <input id="submit" type="submit" value="Subscribe" />

    </form>
    </section>

<section id="features">
<ul>
  <li class="features" id="battery">
    <i class="fa-solid fa-battery-full"></i>
  <h2 class="features-description">6hrs listening time on charge</h2>
  </li>

  <li class="features" id="water-proof">
    <i class="fa-solid fa-droplet-slash"></i>
  <h2 class="features-description">Sweat and Water Resistant</h2>
  </li>

  <li class="features" id="noise-cancelling">
    <i class="fa-sharp fa-solid fa-music-note-slash"></i>
  <h2 class="features-description">Active Noise Cancellation</h2>
  </li>
  
  <li class="features" id="device-switch">
    <i class="fa-solid fa-laptop-mobile"></i>
  <h2 class="features-description">Automatic Switching</h2>
  </li>
</ul>
</section>

<section id="how_it_works">
    
    <iframe id="video" 
    src="https://www.youtube.com/embed/watch?v=NsUIp57lxd4?"> </iframe>

</section>

<section id="pricing">
  <div class="pricing" id="airpro_2ndgen">
    <h1 class="product-name">Airpods Pro<br/> (2nd Generation)</h1>
    <img width="100" src="data:image/jpeg;base64,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"/>
    <p class="price">$249</p>
    <p><a href="https://www.apple.com/shop/product/MPNY3AM/A/airpods-3rd-generation-with-lightning-charging-case">Buy Now</a></p>
  </div>

  <div class="pricing" id="air_2ndgen">
     <h1 class="product-name">Airpods<br/> (2nd Generation)</h1>
     <img width="100" src="data:image/jpeg;base64,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"/>
     <p class="price">$129</p>
     <p><a href="https://www.apple.com/shop/product/MV7N2AM/A/airpods-with-charging-case">Buy Now</a></p>
  </div>

  <div class="pricing" id="air_3rdgen">
     <h1 class="product-name">Airpods<br/> (3rd Generation)</h1>
     <img width="100"  src="data:image/jpeg;base64,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RXS6hRBFdLqFEEV0uoUQRXS6hRBFdRMKlqJiCpap6pmqpQUeVReF4O+N/wC6Vxcu0cqfkn/m3/YVxcpVERFAREQEREBERAREQF1xo8P910f0Km+7auR11vo7/wArovodP921WDJgpEm0qeFIk2lVFO9QKN6gQEREBeEXw4r1EEMcYaA0YACw6lEiIkkkyTkEREUUTFComIJ7VUlUzVUlBRZU/JP/ADb/ALCuL12hlT8k/wDNv+wri9SqIiKAiIgIiICIiAiIgLrbR0f7ro/ocHqYLrkldTaIazlcj0p3sY+M/wC3I5o9QHerBm4UiTapzSpMm1VEh6gUx6gQeIvUQeIvUQeIvUQeIvUQeKJq8UTUE5qqCqdm1T3FBQ5YfaGQ8IpD3NK4xXXufFXyOTqqXC7KWe197tQhvrIXISlUREUBERAREQEREBERAW9v/HvLIdTz0Tnc6KQSsB97kADrdAc39taJV9zJzidk6tjqhcsB1Zmj28LvZDr2EdLQg66a5eSFUGT6+OaNssbg+ORocxzTcOaRcEKr11pELlAvXFQEoIkUN0ugiRQ3S6CJFDrJdBEihul0ESiapd1G0oJ7FG5ykh9lJnqA1pcSAACSSbAAbSSg1/p3y0Icm+Th1pKuRrAAbHk2EPeerBoPz1zmsu0nZ0/hKuc9hJp4bxwdLQec/wCsceoNWIrKiIiAiIgIiICIiAiIgIiIM80baQX5OcKecufRvO7F1O47XNG9pO1vaMbg9A5NyrFURtlikbJG8Xa5hBB/7wXISumQs4auhfr00z47nnN2sf8AOYcD17VdHWuuhK0hkfTQ8ACrpg473wOtf6jvEskptL2TnjnGeI8HxE/uFyI2VdeXWvxpVyX8IPoJ/AnnVyX8JPoKjwINgXS61/51Ml/CT6Co8CedTJfwk+gqPAg2BdLrX/nUyX8JPoKjwJ51Ml/CT6Co8CDYF0utf+dTJfwk+gqPAnnUyX8JPoKjwINggr3XWtajS7k1ou100h4MhcD+3YLHsraabgilpTexs6d+AO7mM2/pBBuKsr2RML3vaxjQS5znBrWgbSScAFozSdpINXrUdG4im2SyC7TP8lu8M47z1bcNzhzrra8/2iYuZe4jbzI2/VG09JuVZE1RERQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQf/Z"/>
     <p class="price">$169</p>
     <p><a href="https://www.apple.com/shop/product/MQD83AM/A/airpods-pro">Buy Now</a></p>
  </div>

</section>

</body>
```
```
*{
    box-sizing: border-box;
}

body{
    background-color: white;
    color: black;
    text-align: center;
    font-family: sans-serif;
}

header{
    background-color: whitesmoke;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
  }
  
#header-img{
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    background-color: transparent;
}
  
#nav-bar{
    width: 50%;
    max-width: 350px;
    height: 30px;
}
  
nav ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
}

nav ul li {
    margin: 0 3px;
    padding: 3px;
    display: block;
}

header .nav-link:active,
header .nav-link:visited,
header .nav-link:link {
    color: black;
}

header .nav-link:hover{
    color: white;
    background-color: grey;
}

a {
    text-decoration: none;
}

#subscribe #catch-phrase{
   padding-top: 50px;
}

form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

input {
    height: 30px;   
}

#email {
    margin: auto;
    width: 40%;
}

#submit {
    width: 100px;
    margin: 15px auto;
    border: none;
    background-color: silver;
    font-weight: bold;
    font-size: 15px;
}

#catch-phrase{
    font-size: 25px;
}
  
#features{
    padding-top: 20px;
}
  
.features{
    display: block;

}

#how_it_works{
   padding: 50px 0 50px 0;
}

#video{
    height: 300px;
    width: 500px;
    border-radius: 10px;
}
  
#pricing{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 50px 0 50px 0;
}
  
.pricing{
    background-color: silver;
    color: black;
    border: 2px solid silver;
    border-radius: 10%;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: 5px 5px 4px 3px black;
}

.pricing .product-name {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 23px;
}

.pricing .price {
    font-size: 16.5px;
    font-family: sans-serif;
    font-weight: bold;
}

.pricing a:active,
.pricing a:visited,
.pricing a:link {
    background-color: rgb(36, 35, 35);
    color: white;
}
``` 

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36</code>

**Challenge:** Product Landing Page - Build a Product Landing Page

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page

I also tried using a kit for the font-awesome icons and the icons still weren’t coming up. Here’s the link below:

<script src="https://kit.fontawesome.com/bc0edbc7fa.js" crossorigin="anonymous"></script>

youtube videos can be annoying,
you cant just copy and past the https from the top of the browser if your embedding a youtube video.

HTML & CSS - How to Embed a YouTube Video in Your Website - YouTube

personally I deleted all but the embedding link itself when embedding a vid,
and tend to give the video a width and ratio,
using a container to prevent jenky website jumping with lazy loading.

I believe the aspect ratio of a typical youtube vid is 16/9,

hope this helps :smiley:

The video was very helpful.
Thanks alot :innocent:

1 Like

The following is the result with your link element:
image
I didn’t change anything else. Try to check the whole process again. Maybe something is deleted or missing.

Yes, those two icons appear but the remaining don’t. That’s my major problem

Of course they don’t work. They are not free icons.

Oh, I didn’t realise that. My bad :sweat_smile:
Thanks for the help

1 Like

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