Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I can’t pass this test.
Your #nav-bar should always be at the top of the viewport.
Instead of following the challenge steps, i saw the reference page and then tried to create it on my own. After it was done, i started to add the ids and elements it asked me for. But i have a problem with the navbar, i created a side navbar, that scroll down with you, so you can use it and see it always. But then i saw that it needed to be always at the top, so i changed some things and used the position: absolute element to fix it at the top, but i can’t pass the test. Should i make a simple nav bar at the top to pass the test?

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">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="main-container">
    <header id="header"><img src="images/images.png" alt="logo of the web" id="header-img"><span>Cool T-Shirts </span>
    
    <nav id="nav-bar">
        <a class="nav-link" href="#video">Our Products</a>
        <a class="nav-link" href="#items">Materials</a>
        <a class="nav-link" href="#form">More Info</a>
    </nav>
</header>

<main>
    <section  class="video">
        <iframe id="video"  width="560" height="315" src="https://www.youtube.com/embed/kb0whVogBkI?si=AHng55Cn_98KpP53" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </section>
    <div class="product-container">
        <h2>Our products</h2>
    <section id="items" class="products"> 
        
        <p><img src="/images/p2567760.jpg" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe omnis earum molestiae! Quis quo aspernatur ab ipsa ad temporibus cupiditate alias officia, quaerat fugit incidunt unde accusantium, amet adipisci consequatur!</p>
        <p><img src="/images/Catch-the-Wave-Lilac-2-scaled.jpg" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe omnis earum molestiae! Quis quo aspernatur ab ipsa ad temporibus cupiditate alias officia, quaerat fugit incidunt unde accusantium, amet adipisci consequatur!</p>
        <p><img src="/images/images.jpg" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe omnis earum molestiae! Quis quo aspernatur ab ipsa ad temporibus cupiditate alias officia, quaerat fugit incidunt unde accusantium, amet adipisci consequatur!</p>
    </section>
    </div>
    <section class="forms">
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input type="text" placeholder="name" required>
            <input type="text" placeholder="surname" required>
            <input id="email" name="email" type="email" placeholder="email" required>
            <input type="text" placeholder="doubts" >   
            <input id="submit" type="submit" value="Send" >
        </form>
    </section>
</main>
</div>
</body>
</html>


*{
    margin: 0;
    box-sizing: border-box;
}
.main-container{
   
    margin-left: 50px;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

header{
    display: flex;
    flex-direction: column;
    position:absolute;
    font-weight: bold;
    color: bisque;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.6783963585434174) 35%, rgba(0,212,255,1) 100%);
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
header span{
    padding-bottom: 20px;
}
header img{
        width: 100px;
        padding-bottom: 40px;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
}

nav{
    display: flex;
   
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
a{
    text-decoration: none;
    color: ghostwhite;
    letter-spacing: 3px;
    padding: 20px;
}

.video{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

h2{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.product-container img{

    width: 200px;
}

.products{
    display: flex;
    flex-direction: row;
    row-gap: 10px;
    margin: 0 auto;
    margin-bottom: 40px;
    width: 40%;
}  
p{
     background-color: #f3ec78;
      background-image: linear-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
     background-size: 100%;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: transparent; 
     -moz-text-fill-color: transparent;
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
    row-gap: 10px;
    width: 15%;
}
@media (max-width: 500px) {
    p{
        font-size: 10px;
    }
  }

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

1 Like
2

Hello there @krylol ,

I wonder if setting your #nav-bar to a fixed position and then adjusting the top, left, width etc would help. From there setting the display to inline may yield the desired result.

3

Hello,
on you header element rule replace the position absolute with position sticky and add top: 0; property

1 Like
4

Thanks. That was it.

5

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