Product Landing Page - Build a Product Landing Page

my last step is; Your #nav-bar should always be at the top of the viewport. I’m having trouble fixing that.

<!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>
    <body>
        <header id="header">
            <img id="header-img" src="SoldeJaneiro-logo.webp">
            <nav id="nav-bar">
                <ul>
                    <li><a href="#welcome" class="nav-link">Discover the Magic of Brazil with Sol de Janeiro</a></li>
                    <li><a href="#second" class="nav-link">Escape to Rio with Our Signature Bum Bum Cream</a></li>
                    <li><a href="#third" class="nav-link">More Treasures from Brazil</a></li>
                </ul>
            </nav>
        </header>
        <section id="products">
            <img src="soldejanerio.jpg" id="image1" alt="a picture of sol de janerio products">
            <img src="soldejanerio2.jpg" id="image2" alt="a picture of sol de janerio products">
            <img src="soldejanerio3.jpg" id="image3" alt="a picture of sol de janerio products">
            <img src="soldejanerio4.webp" id="image4" alt="a picture of sol de janerio products">
            <img src="soldejanerio5.webp" id="image5" alt="a picture of sol de janerio products">
        </section>
        <hr>
        <section id="welcome">
            <header id="one">Discover the Magic of Brazil with Sol de Janeiro</header>
            <p id="p-one">Welcome to paradise! Sol de Janeiro captures the vibrant spirit, sights and scents of Brazil. Our luxurious body care products are infused with deliciously addictive Brazilian superfruit extracts that will transport you to an exotic tropical getaway.</p>
        </section>
        <section id="second">
            <header id="two">Escape to Rio with Our Signature Bum Bum Cream</header>
            <p id="p-two">Our star product, the award-winning Brazilian Bum Bum Cream, is a fast-absorbing body cream that deeply moisturizes and firms your skin. The name says it all! This lush cream helps smooth and tighten your bum and thighs for a supermodel silhouette.
                Bum Bum Cream features our proprietary Brazilian Blend - a powerhouse cocktail of antioxidant-rich Cupuaçu Butter, super-nourishing Açaí Oil and firming Guaraná Extract sourced from the Amazon Rainforest. The exotic cherry-almond pistachio scent is downright addictive! Massage this vitamin-enriched cream daily into your bum, hips, thighs and anywhere you want supple, touchably soft skin.</p>
        </section>
        <section id="third">
            <header id="three">More Treasures from Brazil</header>
            <p id="p-three">Transport your senses with our entire collection of Brazilian-inspired body care. Discover indulgent body scrubs and butters, hand creams, delicately scented perfume mists and more. We use ethically-sourced ingredients from the Amazon, formulated without harsh chemicals or parabens.
                Try our best-selling Brazilian Kiss Lip Butter - a deeply conditioning, cocoa-infused lip treatment with a decadent vanilla cherry scent. Or spritz on our Cheirosa '62 fragrance mist that combines notes of pistachio, salted caramel and jasmine.
                With Sol de Janeiro, every day is a trip to paradise. Get your glow on and experience the magic of Brazil!</p>
        </section>
        <hr>
        <section>
            <video  id="video" src="The World's Most Iconic Body Cream & Our Irresistible Perfume Mist.mp4" controls captions></video>
        </section>
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
            <p id="text">Get news of ongoing coupons and sales by joining the newsletter</p>
            <label id="email-label">Email:</label>
            <input id="email" type="email" name="email" placeholder="Input your email"></input>
            <input id="submit" type="submit" ></input>
        </form>
    </body>
</html>
#header-img{
    width: 200px;
    height: 100px;
    top: 15px;
    align-items: left;
    margin-left: 20px;
}
#header{
    border-radius: 10px;
    background-color: #fff;
    height: 5%;
    margin-bottom: 20px;
}
body{
    background-color: rgb(244, 243, 229);
}
#submit{
    font-size: 14px;
    background-color: rgb(255, 150, 55);
    border-radius: 5px;
    border: 0;
    font-family: sans-serif;
    max-width: 150px;
    width: 100%;
    height: 30px;
    margin-bottom: 30px;
    color: white;
}
#text{
    font-size: 20px;
    font-weight: bold;
    font-family: sans-serif;
    text-align: center;
}
#products{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
#image1, #image2, #image3, #image4, #image5{
    width: 18%;
    margin-bottom: 10px;
    height: 375px;
    transition: transform 1s;
}
#video{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
}
li{
    list-style: none;
    display: list-item;
}
#image1:hover {
    transform: scale(1.1);
  }
  
#image2:hover {
    transform: scale(1.1);
  }
#image3:hover {
    transform: scale(1.1);
  }
  
#image4:hover {
    transform: scale(1.1);
  }
#image5:hover {
    transform: scale(1.1);
}
#one, #two, #three{
    font-weight: bold;
    text-align: center;
    font-family: sans-serif;
    font-size: 22px;
    margin-top: 40px;
}
#p-one, #p-two, #p-three{
    font-size: 18px;
    text-align: center;
    width: 70%;
    font-family: sans-serif;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid rgb(244, 243, 229);
}
hr{
    border: 0.1rem solid black;
}
nav ul {
    list-style: none;
    display: flex;
  }
  
  nav li {
    margin-right: 20px;
  }
  nav a {
    color: black;
    text-decoration: none;
  }
  nav{
    text-align: right;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 35px;
    left: 30%;
    right: 0; 
}
#email{
    font-size: 15px;
    font-family: open-sans;
    font-weight: regular;
    margin: 10px;
    padding: 10px;
    width: 200px;
    height: 5px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid rgb(244, 243, 229);
}
#email-label{
    font-weight: bold;
    text-align: center;
    padding: 0;
    font-size: 16px;
    margin-right: auto;
    margin-left: auto;
    border: 0
}
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(soldejaneriologo.webp);
  }
  @media (min-width: 992px) {
  .container {
    width: 60%;
  }
  
  body {
    font-size: 18px; 
  }
}

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hello!

I think this may be able to help you.

Happy coding! :slight_smile:

3 Likes

It did! Thanks for the help!

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