Product Landing Page - Build a Product Landing Page

HTML-CSS
1

For some resaon my navigation bar won’t work, I’m linking it the same way I linked on my other project but it’s not working.

Your code so far

<!DOCTYPE html>
<html lang en>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" hrel="Logo"/>
      <ul>
        <li class="nav-link" href="#Features"><a class="link">Features</a></li>
        <li class="nav-link" href="#Video"><a class="link">How it works</a></li>
        <li class="nav-link" href="#Pricing"><a class="link">Pricing</a></li>
      </ul>
  </header>
  <video id="video"></video>
  <form id="form">
    <p id="description">Handcrafted, home-made masterpieces></p>
    <input id="email" type="email" placeholder="Enter your email address"></input>
    <div class="button-div">
        <button class="button">
            Get Started
        </button>
    </div>
  </form>
  <section id="Features">
    <img src="https://imgs.search.brave.com/v8q5Dum6XG6k3-ipm6MtwkTMKE-yMqEPhoSUZbX5AjU/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9sb2dv/bWFrZXIuZGVzaWdu/ZnJlZWxvZ29vbmxp/bmUuY29tL21lZGlh/L3Byb2R1Y3RkZXNp/Z25lci9sb2dvL3Jl/c2l6ZWQvMDAwOTIx/X0ZyZWVfaGVhbHRo/eV9vaWxfTG9nb19N/YWtlci0wMS5wbmc" class="icon">
    <p id="Features" class="title">Premuim Materials</p>
    <p class="description">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>

    <img src="https://cdn-icons-png.flaticon.com/128/4947/4947193.png" class="icon">
    <p class="title">Fast Shipping</p>
    <p class="description">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>
  
    <img src="https://cdn-icons-png.flaticon.com/128/664/664883.png" class="icon">
    <p class="title">Fast Shipping</p>
    <p class="description">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 id="Video" class="video-div">
    <iframe id="Video" class="vid" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc?si=k7wMar0R_Jt_pXcd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </div>
    <section id="Pricing">
    <div class="prices" id="tenor">
        <h3 class="price-header">Tenor Trombone</h3>
        <p class="actual-price">600$</p>
        <p class="lorem">Lorem ipsum</p>
        <p class="lorem">Lorem ipsum</p>
        <p class="lorem">Lorem ipsum dolor</p>
        <p class="lorem">Lorem ipsum</p>
        <button class="price-button">
            Select
        </button>
    </div>

    <div class="prices" id="bass">
      <h3 class="price-header">Bass Trombone</h3>
      <p class="actual-price">600$</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum dolor</p>
      <p class="lorem">Lorem ipsum</p>
      <button class="price-button">
          Select
       </button>
    </div>
  
    <div class="prices" id="valve">
      <h3 class="price-header">Valve Trombone</h3>
      <p class="actual-price">600$</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum dolor</p>
      <p class="lorem">Lorem ipsum</p>
      <button class="price-button">
          Select
       </button>
    </div>

 </section>

 </html>


*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:sans-serif;
  }
  #nav-bar{
    position:fixed;
    float:top;
    width:100%;
    height:50px;
    background-color:white;
  }
  #header-img{
    width:350px;
    padding: 6;
  }
  .nav-link{
    display:inline-block;
    text-align:right;
    padding:15px;
    list-style-type:none;
    text-decoration:none;
  }
  nav ul{
    float:right;
    margin-right: 20px;
  }
  nav ul li a{
    text-transform:uppercase;
  }
  .link,a:hover{
    cursor:pointer;
    padding:10px;
  }
  #form{
   text-align:center;
  }
  #description{
    font-weight:bold;
    font-size:25px;
    margin-bottom:15px;
  }
  #email{
    width:250px;
    height:25px;
    text-align:center;
  }
  .button-div{
    padding-top:15px;
  }
  .button{
    font-size:16px;
    padding: 5px 5px 20px 5px;
    width:150px;
    text-transform:uppercase;
    height:20px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold;
  }
  .button:hover{
    background-color: orange;
    cursor:pointer;
    transition:1s;
  }
  .icon{
    width:60px;
  }
  .title{
    font-size:25px;
    font-weight:bold;
  }
  .description{
  }
  #Features{
    text-align: ;
    
  }
  #tenor,#bass,#valve{
    border:1px solid black;
  }
  #Pricing{
    display:flex;
    margin-top:60px
  }
  .price-header{
    background-color:lightgray;
    margin-bottom:20px;
    padding:10px 50px;

  }
  .prices{
    text-align: center;
    padding: 0px 0px 50px 0px;
    margin:auto;
  }
  .actual-price{
    padding-bottom:15px;
    font-size: 23px;
    font-weight: bold;
  }
  .lorem{
    padding-bottom: 10px;
  }
  .price-button{
    width:110px;
    text-transform:uppercase;
    height:40px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold;
  }
  .price-button:hover{
    background-color: orange;
    cursor:pointer;
    transition:1s;
  }
  .video-div{
    display:grid;
    place-items: center;
  }
  .vid{
    width:560px;
    
  }

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

in line 17 for some reason I have a video element, I don’t remember writing it but when I try to delete it the “Handcrafted, home-made masterpiece” gets deleted that’s so weird, I think I’m missing out on something because when I delete it in vs code or in freeCodeCamp the same thing happens so I don’t think it’s a glitch there’s just something I’m not seeing.

1 Like
3

Try using anchor tags instead of an unordered list. That’s what I did with this project and it worked. Here’s my nav-bar, hope this helps!

<nav id="nav-bar">
      <a class="nav-link" href="#contents">Contents</a>
      <a class="nav-link" 
      href="#about">About Family Guy</a>
      <a class="nav-link"           href="#characters">Characters</a>
  </nav>
4

The ‘href’ attributes go into the opening anchor tags:

<a href="value">Text</a>

You have added them into the ‘li’ element.

If you delete the video element <video id="video"></video>, the Handcrafted, home-made masterpieces text stays.

2 Likes
5

Alright I moved the href value to the anchor element that worked but but when I delete the video element <video id="video"></video> , the Handcrafted, home-made masterpieces text disappears. I also have another question, the section with the id Features is not how I want it to be, it should be in the middle and each image to the left with the title and description next to it to the right but now each one is on a line, how can I put the images with the text next to it?

6

As you can see, the video element has converted into a comment, but the text in question is visible. Solving the second issue mentioned requires adding some CSS rules in your styles.css file, and changing the HTML code.
In the following example, I have changed the HTML and added a few rules that change the layout of your page. It is up to you to find the rules which suit your design preferences:

image
image1878×918 172 KB

image
image1890×792 126 KB

7

Ok I’ve removed the video element, turns out even though I didn’t have a video src it still took space for the video and when I removed it the space went away and since my navbar has a position fixed the text was stuck behind it, so I added some padding to it and it worked. As for the layout of the Features section I see what you did and that’s what I want it to look like just a little different padding and size and stuff like that so I tried changing my code a bit to make look like yours but the fast shipping section (the last one) stays the same.(The reason I have 2 buttons in line 20-25 is because the project requires an input with a type submit, but I didn’t know how make it look yellow and have it change color like I did with button). Thank you so much for helping I appreciate it a lot.

Here’s my current code:

<!DOCTYPE html>
<html lang en>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" hrel="Logo"/>
      <ul>
        <a class="nav-link" href="#Features">Features</a>
        <a class="nav-link"  href="#Video">How it works</a>
        <a class="nav-link" href="#Pricing">Pricing</a>
      </ul>
  </header>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <p id="description">Handcrafted, home-made masterpieces</p>
    <input id="email" name="email" type="email" placeholder="Enter your email address"></input>
    <div class="button-div">
        <button id="submit" type="submit" class="button">
            Get Started
        </button>
    </div>
    <input id="submit" type="submit"></input>
  </form>




  <section id="Features">
    
  <div class="Features">
     <img src="https://imgs.search.brave.com/v8q5Dum6XG6k3-ipm6MtwkTMKE-yMqEPhoSUZbX5AjU/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9sb2dv/bWFrZXIuZGVzaWdu/ZnJlZWxvZ29vbmxp/bmUuY29tL21lZGlh/L3Byb2R1Y3RkZXNp/Z25lci9sb2dvL3Jl/c2l6ZWQvMDAwOTIx/X0ZyZWVfaGVhbHRo/eV9vaWxfTG9nb19N/YWtlci0wMS5wbmc" class="icon">
    <div class="text"> 
     <p id="" class="title">Premuim Materials</p>
     <p class="description">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
    </div>
  </div>

  <div class="Features">
     <img src="https://cdn-icons-png.flaticon.com/128/4947/4947193.png" class="icon">
    <div class="text">
     <p class="title">Fast Shipping</p>
     <p class="description">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="Features">
     <img src="https://cdn-icons-png.flaticon.com/128/664/664883.png" class="icon">
    </div class="text">
     <p class="title">Fast Shipping</p>
     <p class="description">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>
 </section>





 <div id="Video" class="video-div">
    <iframe id="Video" class="vid" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc?si=k7wMar0R_Jt_pXcd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </div>
    <section id="Pricing">
    <div class="prices" id="tenor">
        <h3 class="price-header">Tenor Trombone</h3>
        <p class="actual-price">600$</p>
        <p class="lorem">Lorem ipsum</p>
        <p class="lorem">Lorem ipsum</p>
        <p class="lorem">Lorem ipsum dolor</p>
        <p class="lorem">Lorem ipsum</p>
        <button class="price-button">
            Select
        </button>
    </div>

    <div class="prices" id="bass">
      <h3 class="price-header">Bass Trombone</h3>
      <p class="actual-price">600$</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum dolor</p>
      <p class="lorem">Lorem ipsum</p>
      <button class="price-button">
          Select
       </button>
    </div>
  
    <div class="prices" id="valve">
      <h3 class="price-header">Valve Trombone</h3>
      <p class="actual-price">600$</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum dolor</p>
      <p class="lorem">Lorem ipsum</p>
      <button class="price-button">
          Select
       </button>
    </div>

 </section>

 </html>


@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:sans-serif;
  }
  #nav-bar{
    position:fixed;
    float:top;
    width:100%;
    height:50px;
    background-color:white;
  }
  #header-img{
    width:350px;
    padding: 6;
  }
  .nav-link{
    display:inline-block;
    text-align:right;
    list-style-type:none;
    text-decoration:none;
    color:black;
  }
  nav ul{
    float:right;
    margin-right: 20px;
  }
  nav ul a{
    text-transform:uppercase;
  }
  .nav-link,a:hover{
    cursor:pointer;
    padding:10px;
  }
  #form{
   text-align:center;
  }
  #description{
    font-weight:bold;
    font-size:25px;
    margin-bottom:15px;
    padding-top:60px;
  }
  #email{
    width:250px;
    height:25px;
    text-align:center;
  }
  .button-div{
    padding-top:15px;
  }
  .button{
    font-size:16px;
    padding: 5px 5px 20px 5px;
    width:150px;
    text-transform:uppercase;
    height:20px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold;
  }
  .button:hover{
    background-color: orange;
    cursor:pointer;
    transition:1s;
  }
  .icon{
    width:60px;
  }
  .title{
    font-size:25px;
    font-weight:bold;
  }
  #tenor,#bass,#valve{
    border:1px solid black;
  }
  #Pricing{
    display:flex;
    margin-top:60px
  }
  .price-header{
    background-color:lightgray;
    margin-bottom:20px;
    padding:10px 50px;

  }
  .prices{
    text-align: center;
    padding: 0px 0px 50px 0px;
    margin:auto;
  }
  .actual-price{
    padding-bottom:15px;
    font-size: 23px;
    font-weight: bold;
  }
  .lorem{
    padding-bottom: 10px;
  }
  .price-button{
    width:110px;
    text-transform:uppercase;
    height:40px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold;
  }
  .price-button:hover{
    background-color: orange;
    cursor:pointer;
    transition:1s;
  }
  .video-div{
    display:grid;
    place-items: center;
  }
  .vid{
    width:560px;
    
  }
  #Features{
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  .Features{
    display: flex;
    justify-content: space-around;
    align-items:center;
    width:500px;  
  }

Here’s a picture of what I want it to look like, as you can see it’s very close I just have to space them around a bit:

product-landing-page.freecodecamp.rocks_#features - Brave 11_27_2023 2_45_08 PM
product-landing-page.freecodecamp.rocks_#features - Brave 11_27_2023 2_45_08 PM1920×1040 235 KB

1 Like
8

Can anyone help? I’m still having difficulties with this project.

9 
input[type="submit"] { }

you can make it look yellow
I hope this helps!

1 Like
10

Thank you it worked! Now I just have the to work on the middle section and try to figure out how to move it.

1 Like
11

Ok I’m pretty much done just a couple things left, I used positions to fix the middle part, I just have to fix the video. So far I used iframe element to get the video from youtube but they want me to use the video element, how do I get a video from youtube while using the video element.

Here’s my code:

<!DOCTYPE html>
<html lang en>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" hrel="Logo"/>
      <ul>
        <a class="nav-link" href="#Features">Features</a>
        <a class="nav-link"  href="#Video">How it works</a>
        <a class="nav-link" href="#Pricing">Pricing</a>
      </ul>
  </header>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <p id="description">Handcrafted, home-made masterpieces</p>
    <input id="email" name="email" type="email" placeholder="Enter your email address"></input>
    <div class="button-div">
      <input id="submit" type="submit" value="Get Started"></input>
    </div>
  </form>




  <section id="mid">
    
  <div id="Features" class="Features">
     <img src="https://imgs.search.brave.com/v8q5Dum6XG6k3-ipm6MtwkTMKE-yMqEPhoSUZbX5AjU/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9sb2dv/bWFrZXIuZGVzaWdu/ZnJlZWxvZ29vbmxp/bmUuY29tL21lZGlh/L3Byb2R1Y3RkZXNp/Z25lci9sb2dvL3Jl/c2l6ZWQvMDAwOTIx/X0ZyZWVfaGVhbHRo/eV9vaWxfTG9nb19N/YWtlci0wMS5wbmc" class="icon">
     
     <p class="title">Premuim Materials</p>
     <p class="description">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      
      </div>

  <div class="Features">
     <img src="https://cdn-icons-png.flaticon.com/128/4947/4947193.png" class="icon">
    
     <p class="title">Fast Shipping</p>
     <p class="description">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 class="Features">
     <img src="https://cdn-icons-png.flaticon.com/128/664/664883.png" class="icon">
    
     <p class="title">Fast Shipping</p>
     <p class="description">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>
 </section>





 <div id="Video" class="video-div">
    <iframe id="Video" class="vid" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc?si=k7wMar0R_Jt_pXcd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </div>
    <section id="Pricing">
    <div class="prices" id="tenor">
        <h3 class="price-header">Tenor Trombone</h3>
        <p class="actual-price">600$</p>
        <p class="lorem">Lorem ipsum</p>
        <p class="lorem">Lorem ipsum</p>
        <p class="lorem">Lorem ipsum dolor</p>
        <p class="lorem">Lorem ipsum</p>
        <button class="price-button">
            Select
        </button>
    </div>

    <div class="prices" id="bass">
      <h3 class="price-header">Bass Trombone</h3>
      <p class="actual-price">600$</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum dolor</p>
      <p class="lorem">Lorem ipsum</p>
      <button class="price-button">
          Select
       </button>
    </div>
  
    <div class="prices" id="valve">
      <h3 class="price-header">Valve Trombone</h3>
      <p class="actual-price">600$</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum</p>
      <p class="lorem">Lorem ipsum dolor</p>
      <p class="lorem">Lorem ipsum</p>
      <button class="price-button">
          Select
       </button>
    </div>

 </section>

 <nav id="footer">
  <ul>
    <a class="footer-link" href="">Privacy</a>
    <a class="footer-link"  href="">Terms</a>
    <a class="footer-link" href="">Contact</a>
  </ul>
  <p class="footer-text">Copyright 2016, Original Trombones</p>

 </html>


@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:sans-serif;
  }
  #nav-bar{
    position:fixed;
    float:top;
    width:100%;
    height:50px;
    background-color:white;
    z-index:2;
  }
  #header-img{
    width:350px;
    padding: 6;
  }
  .nav-link{
    display:inline-block;
    text-align:right;
    list-style-type:none;
    text-decoration:none;
    color:black;
  }
  nav ul{
    float:right;
    margin-right: 20px;
  }
  nav ul a{
    text-transform:uppercase;
    padding:10px;
  }
  .nav-link,a:hover{
    cursor:pointer;
  }
  #form{
   text-align:center;
  }
  #description{
    font-weight:bold;
    font-size:25px;
    margin-bottom:15px;
    padding-top:60px;
  }
  #email{
    width:250px;
    height:25px;
    text-align:center;
  }
  .button-div{
    padding-top:15px;
  }
  .button{
    font-size:16px;
    padding: 5px 5px 20px 5px;
    width:150px;
    text-transform:uppercase;
    height:20px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold;
  }
  .button:hover{
    background-color: orange;
    cursor:pointer;
    transition:1s;
  }
  .icon{
    width:60px;
  }
  .title{
    font-size:25px;
    font-weight:bold;
  }
  #tenor,#bass,#valve{
    border:1px solid black;
  }
  #Pricing{
    display:flex;
    margin-top:60px
  }
  .price-header{
    background-color:lightgray;
    margin-bottom:20px;
    padding:10px 50px;

  }
  .prices{
    text-align: center;
    padding: 0px 0px 50px 0px;
    margin:auto;
  }
  .actual-price{
    padding-bottom:15px;
    font-size: 23px;
    font-weight: bold;
  }
  .lorem{
    padding-bottom: 10px;
  }
  .price-button{
    width:110px;
    text-transform:uppercase;
    height:40px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold;
  }
  .price-button:hover{
    background-color: orange;
    cursor:pointer;
    transition:1s;
  }
  .video-div{
    display:grid;
    place-items: center;
    padding-top:90px;
    padding-bottom:20px;
  }
  .vid{
    width:560px;
    
  }
  input[type="submit"] {    font-size:16px;
    padding: 5px 5px 20px 5px;
    width:150px;
    text-transform:uppercase;
    height:20px;
    background:rgb(252, 196, 13);
    border:0;
    font-weight:bold; }

.title{
  position:relative;
  left:35%;
  z-index:0;
}
.description{
  position:relative;
  left:35%;
  max-width: 60%;
}
.icon{
  position:relative;
  left:25%;
  top:70px;
}
#footer{
  background-color: lightgray;
  margin-top:40px;
  margin-left:auto;
  margin-right:auto;
  padding:30px;
  width:70%;
}
.footer-link{
  text-decoration: none;
  color: black;
  text-transform:capitalize;
  margin-left:20px;
}
.footer-text{
  position:relative;
  top:25px;
  left:69%;
  font-size:14px;
}```
12

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