Responsive Web Design Projects - Build a Product Landing Page - _o0fBP_MrBX_uNHxuxlO_

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have one mission to complete: ( Your #nav-bar should always be at the top of the viewport) and I don’t know why my code doesn’t work. I hope anyone tells me the answer.
Thanks!!

**Your code so far**

/* file: index.html */
<link rel="stylesheet" href="styles.css">

<header id="header">
    <nav id="nav-bar">
        <a class="nav-link" href="#form">Feature</a>
        <a class="nav-link" href="#video">How it works</a>
        <a class="nav-link" href="#submit">Pricing</a>
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="" id="header-img">
    </nav>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <h1>Handcrafted, home-made masterpieces</h1>
        <input id="email" type="email" name="email" required placeholder="Enter your email">
        <input id="submit" type="submit" value="GET STARTED">

    </form>
    <video id="video" width="560" height="315" controls autoplay mutedsrc="https://youtu.be/y8Yv4pnO7qc"></video>


</header>

/* file: styles.css */



#header-img{
max-width: 400px;
}
.nav-bar{
display: flex;
justify-content: space-between;
}
#nav-bar{
display:flex;
flex-direction: column;
}

#form{
max-width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}

@media (maxwidth="720px") {
#header-img{
    max-width: 200px;
}
}

**Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

2

Hi.
Try to do some research about position property.

1 Like
3

oh… I see it.
position: fixed;
top: 0;

4

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