Build a Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

No passing the last 3 checks, the nav bar must be fixed on the top of the page, at least one media query and to use a flexbox, Thanks for any tip.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="styless.css">
</head>
<body>
    <header id="header">
        <img src="logo.png" alt="Logo de la compañia" id="header-img"
        width="15%"
        height="auto">
        <nav id="nav-bar">
            <ul>
                <li><a href="#introduction" class="nav-link">Introduction</a></li>
                <li><a href="#products" class="nav-link">Products</a></li>
                <li><a href="#footer" class="nav-link">Contact</a></li>
            </ul>             
        </nav>
    </header>
      <form action="https://www.freecodecamp.org/email-submit" id="form" target="_blank">
        <input type="email" name="email" id="email" placeholder="Enter your email address">
        <input type="submit" id="submit" >
    </form>
    
    <iframe src="https://www.youtube-nocookie.com/embed/EZyLWaDrtbs" 
            frameborder="0" 
            title="Video musica para trabajar"
            id="video">
    </iframe>
    <main id="main">
        <section id="introduction">Introduction</section>
        <section id="products">Products</section>
    </main>
    <footer id="footer">
        <address>
            Me<br>
            Example street <br>
            Ciudad,Pais <br>
            <a href="tel:+34555555555">+34 555555555</a><br>
        </address>
    </footer>
</body>
</html>

/* file: styles.css */
header {
    position: fixed;
    background-color: black;
    height: 15vh;
    width: 100vw;
    left: 0;
    top: 0;
}
#nav-bar {
  position:fixed;
  top: 0px;
  display:flex;
}


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

li {
    margin: 40px 15px;
}
a {
    text-decoration: none;
    color: white;
}

#header-img {
    width: 15%;
    height: 100%;
body {
    padding-top: 15vh;
}
main {
    
    display: flex;
    justify-content: center;
    
}
section {
    display: block;
}
    
#form   {
    display: flex;
    top: 25px;
    justify-content: center;
}
iframe {
    display: flex;
    position: absolute;
    width: 50%;
    height: auto;
    top: 25%;
    left: 30%;
}

@media (max-width:768px) {
    body {
        background: gray;
            }
    #main-doc {
        color: black;
    }

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Challenge Information:

Build a Product Landing Page - Build a Product Landing Page

1 Like
2

My advice is go back and start over and don’t code just to the test and try to recreate the example or put your own spin on it. You will learn so much more if you do.

Your CSS has missing curly brackets and you are referencing an ID that doesn’t exist.

How are you testing that your navbar is sticking visually?

:white_check_mark: Test :man_mechanic: Fix
23. Nav bar stays at top Use position: fixed only on header, not #nav-bar
24. Media query used Change layout (e.g., #nav-bar, iframe, main) inside a visible media query
25. Use Flexbox Ensure visible elements (like main, header, ul) are styled with Flexbox
1 Like
4

double check this

is any of your css applying?

5

Thanks, I will try that, but I have a doubt, in a freecodecamp tutorial, I read that if I apply the position:fixed; to the header(the father of the nav-bar on this case ) it was not necesary to apply it to the descendant(the nav-bar on this case) and reading from another source it is kind of a bad practice, but I am not sure, any way I have applied that position to nav-bar and the header and both but the test not pass. Do you know why is that?

6

it depends on what the tests are checking for, iirc they want the nav bar or a direct descendant to have that position

7

Thanks, that was the reason.