Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I am having an annoying bug in my CSS.
The only thing left for my webpage is for me to make “#nav-bar” the top of my viewport for my query. I have destroyed my webpage just to do so and now I am frustrated and tired. Please help!!!

Unfortunately, we cannot see your code

Unfortunately, I can’t see what you are talking about or how to do it. Do you have any suggestions, because I am out of ideas.

I suggest you read your very first post.

HTML CODE:

<!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="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./styles.css">
    <title>Product landing page</title>
</head>
<body>
    <div class="header-container">
    <header id="header">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="company-logo" id="header-img">
    
    <nav id="nav-bar">
        <ul>
           <a class="nav-link" href="#Features"><li>Features</li></a>
           <a class="nav-link" href="#How-it-work"><li>How It Works</li></a>
           <a class="nav-link" href="#Pricing"><li>Pricing</li></a>
        </ul>
    </nav>
</header>
</div>
<div class="container">
    <div class="sub-head">
    <h2 class="heading">Handcrafted,home-made masterpieces</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input type="email" id="email" name="email" placeholder="Your Email Address">
        <br>
        <input type="submit" id="submit" value="GET STARTED" class="btn">
    </form>
</div>

    <div class="grid-container">
        <section id="Features">
        <div class="item-1-icon icon"><i class="fa fa-3x fa-fire"></i></div>
        <div class="item-1">
            <h2>Premium Materials</h2>
            <p>Our trombones use the shiniest brass whicg is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
        <div class="item-2-icon icon">
            <i class="fa fa-3x fa-truck"></i>
        </div>
        <div class="item-2">
            <h2>Fast Shipping</h2>
            <p>We make sure you recieve your trombone as son as we have finished making it. We also provide free returns if you are not satisfied</p>
        </div>
        <div class="item-3-icon icon">
            <i class="fa fa-3x fa-battery-full"></i>
        </div>
        <div class="item-3">
            <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>
    </section>
    <section id="How-it-work">
        <iframe src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" id="video"  ></iframe>
    </section>
    
    <section id="Pricing">
        <div class="tenor trombone" >
            <h2>TENOR TROMBONE</h2>
            <div class="desc">
            <h3>$600</h3>
            <ul>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum dolor.</li>
                <li>Lorem ipsum.</li>
            </ul>
            <a href="#" class="btn">SELECT</a>
        </div>
        </div>
        <div class="bass trombone">
            <h2>BASS TROMBONE</h2>
            <div class="desc">
            <h3>$900</h3>
            <ul>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor</li>
                <li>Lorem ipsum</li>
            </ul>
            <a href="#" class="btn">SELECT</a>
            </div>
        </div>
        <div class="valve trombone">
            <h2>VALVE TROMBONE</h2>
            <div class="desc">
            <h3>$1200</h3>
            <ul>
                <li>Plays similar to Trumpet</li>
                <li>Great for Jazz Bands</li>
                <li>Lorem ipsum dolor</li>
                <li>Lorem ipsum</li>
            </ul>
            <a href="#" class="btn">SELECT</a>
            </div>
        </div>

    </section>
    <footer>
        <ul>
            <a href="#">
                <li>Privacy</li>
            </a>
            <a href="#">
                <li>Terms</li>
            </a>
            <a href="#">
                <li>Contact</li>
            </a>
        </ul>
        <p>Copyright 2016, Original Trombones</p>
    </footer>
</div>
</body>
</html>

CSS CODE:

/* RESET */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* VARIABLES */
:root{
    --background-color1: rgb(216, 216, 216);
    --background-color2: rgba(241, 241, 241, 0.966);
    --background-color3: rgba(255, 153, 0, 0.904);
}

body{
    background: var(--background-color2);
    margin: auto;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* HEADER */
.header-container{
    display: flex;
    justify-content: center;
    width: 1300px;
    margin-top: 0 ;
    margin-bottom: 10px;
    background: var(--background-color2);
}

#header{
    display: flex;
    flex-direction: row;
    width: 900px;
    margin: 5px;
    padding: 10px;
}

#header-img{
    margin: 15px;
    padding: 1px;
    width: 450px;
}


/* NAVBAR */
#nav-bar{
    margin-top:35px;
}

#nav-bar ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#nav-bar ul li{
    list-style: none;
}

.nav-link{
    font-size: 1.3rem;
    list-style: none;
    text-decoration: none;
    color: #000;
    padding: 10px 45px;
}

.nav-link:hover{
    font-size: 1.4rem;
    color: black;
    background: rgba(128, 128, 128, 0.603);
}

/* CONTENT */
.container{
    width: 900px;
    margin: 4px auto;
}

.heading{
    font-size: 1.7rem;
    font-family: sans-serif;
    text-align: center;
    padding: 2px;
    margin: 5px 10px;
}

/* EMAIL ADDRESS */
#form{
    display: block;
    width: 500px;
    text-align: center;
    margin: 10px auto;
    padding: 10px;
}

#email{
    width: 300px;
    margin-bottom: 15px;
    padding: 12px;
}

/* BUTTONS */
.btn{
    font-weight: 800;
    font-size: 16px;
    padding: 10px;
    margin: 5px;
    color: black;
    background:var(--background-color3);
}

/* FEATURES */
#Features{
    display: grid;
    grid-template-columns: 100px 2fr;
    grid-gap:30px;
}
/* ICON */
.icon{
    width: 50px;
    color: var(--background-color3);
    margin: 50px;
}

.item-1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    padding: 5px;
    margin: 10px;
}

.item-1 h2{
    padding: 5px;
    text-align: left;
}

.item-2{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    padding: 5px;
    margin: 10px;
}

.item-2 h2{
    padding: 5px;
    text-align: left;
}

.item-3{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    padding: 5px;
    margin: 10px;
}

.item-3 h2{
    padding: 5px;
    text-align: left;
}

/* HOW IT WORKS - YOUTUBE VIDEO */

#How-it-work{
    margin: 50px;
    display: flex;
    justify-content: center;
}

#video{
    height: 350px;
    width: 540px;
    margin:20px;

}

/* PRICING */

#Pricing{
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    grid-gap: 10px;
}

.trombone{
    border: 1px solid #000;
    height: 300px;
}

.trombone h2{
    font-size: 14px;
    height: 50px;
    padding-top: 25px;
    text-align: center;
    background: var(--background-color1);
}

.desc{
    display: flex;
    flex-direction: column;
    justify-content: center;
   background: var(--background-color2);
   height: 245px;
   padding: 10px;
}

#Pricing h3{
    text-align: center;
    font-size: 21px;
    padding: 5px;
}

#Pricing ul{
    padding-left: 2px;
}

#Pricing ul li{
    font-size: 19px;
    text-align: center;
    align-self: center;
    list-style: none;
    padding: 3px;
    margin: auto;
}

#Pricing a{
    text-align: center;
    margin: auto;
    text-decoration: none;
}

/* FOOTER */
footer{
    font-size: 17px;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-top: 20px;
    margin-bottom: 0;
    height: 70px;
    background: var(--background-color1);
}

footer ul {
    display: flex;
    flex-direction: row;
    text-decoration: none;   
}

footer li{
    list-style: none;
    padding: 7px;
}

footer a{
    color: #000;
    text-decoration: none;
}

footer p{
    margin-bottom: 0;
    padding: 5px; ;
}

/* TABLET SCREENS */

@media (min-width:600px) and (max-width:1300px){
    body{
        width: 800px;
    }

    .header-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 800px;
        margin-top: 0 ;
        margin-bottom: 10px;
        margin-left: 0px;
    }

    #header{
        display: flex;
        flex-direction: row;
        width: 600px;
        margin: auto;
    }

    #header-img{
        padding: 1px;
        width: 450px;
    }
    
    /* NAVBAR */
#nav-bar{
    margin-top:5px;
    width: 500px;
    margin: auto;
}

#nav-bar ul{
    width: 450px;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-left: 0px;
    margin-bottom: 30px;
}

#nav-bar ul li{
    list-style: none;
    padding: 5px;
}

.nav-link{
    font-size: 1.1rem;
    list-style: none;
    text-decoration: none;
    color: #000;
    padding: 5px 25px;
}

.nav-link:hover{
    width: 50px;
    margin: auto;
    font-size: 1.4rem;
    color: black;
    background:var(--background-color2);
}
.container{
    width: 700px;
    margin: 4px auto;
}

/* FEATURES */
#Features{
    display: grid;
    grid-template-columns: 100px 500px;
    grid-gap:30px;

} 

/* HOW IT WORKS - YOUTUBE VIDEO */

#How-it-work{
    margin: 30px;
}

#video{
    margin:10px;
}

/* PRICING */

#Pricing{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}
.trombone{
    border: 1px solid #000;
    height: 300px;
    width: 500px;
    margin: auto;
    padding: 10px;
}
.desc{
   height: 230px;
   padding: 10px;
}
footer{
    width: 700px;
    margin: auto;
}

}

@media (max-width:500px){
    body{
        width: 350px;
        
    }
    .header-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 300px;
        margin-top: auto;
        margin-bottom: 10px;
        margin-left: 10px;
        
    }

    #header-img{
        padding: 1px;
        width: 200px;
    }
    /* Nav-bar */
    #nav-bar{
        margin-top:2px;
        width: 100px;
        margin: auto;
    }
    
    #nav-bar ul{
        width: 100%;
        align-items:center;
        display: flex;
        flex-direction: row;
        margin-left: 0px;
    }
    
    #nav-bar ul li{
        list-style: none;
        padding: 5px;
        text-align: center;
    }
    
    a.nav-link:last-child{
        margin-left: 0px;
        margin-bottom: 15px;
    }

    .nav-link{
        font-size: 1.1rem;
        list-style: none;
        text-decoration: none;
        color: #000;
        padding: 5px 25px;
    }
    
    .nav-link:hover{
        width: 50px;
        margin: auto;
        font-size: 1.4rem;
        color: black;
        background:var(--background-color2);
    }
    .container{
        width: 200px;
        margin: 4px auto;
    }

    
.heading{
    font-size: 1.5rem;
    font-family: sans-serif;
    text-align: justify;
    padding: 2px;
    margin:auto;
}

/* EMAIL ADDRESS */
#form{
    width: 100px;
    text-align: left;
    margin: 10px 3px;
    padding: 5px;
}

#email{
    width: 250px;
    margin-bottom: 10px;
    padding: 12px;
}

/* BUTTONS */
.btn{
    font-weight: 800;
    font-size: 16px;
    padding: 10px;
    margin: 10px 50px;
    color: black;
    background:var(--background-color3);
}

#How-it-work{
    margin-left: 150px;
}

#video{
    height: 200px;
    width: 400px;
}

#Pricing{
    display: grid;
    grid-template-columns: 300px;
    grid-gap: 10px;
    
}

footer{
    width: 320px;
}


}

I went ahead and formatted your code per the instructions above.

1 Like

Thanks for going all out for me. How do I get to see the code ?

I have finally figured it out thank you so much!!!

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