Your nav-bar should always be at the top of the viewport

HTML-CSS
1

Tell us what’s happening:
What am i doing wrong? , Everything was fine in codepen, but in the legacy responsive web design editor i get this error

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.
HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="https://kit.fontawesome.com/4adf6b44a3.js" 
        integrity="sha384-W5rS1eWXU+FIrFl/ZMRwUjiG9KAm6RE+PeChEVD00HwCrewjQZXkte7dwn1N3t3q" 
        crossorigin="anonymous"></script>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <div id="page-wrapper">
        <header id="header">
            <div class="logo">
                <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
                alt="original trombones logo"
                />
            </div>

            <nav id="nav-bar">
                <ul>
                    <li>
                        <a class="nav-link" href="#features">
                            Features
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="#how-it-works">
                            How It Works
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="#pricing">
                            Pricing
                        </a>
                    </li>
                </ul>
            </nav>
        </header>

        <body>
        <div class="container"></div>

        <section id="hero">
            <h2>
                Handcrafted, home-made masterpieces 
            </h2>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
                <input name="email" id="email" type="email" placeholder="Enter your email address"
                required
                />
                <input type="submit" id="submit" value="Get Started" class="btn" 
                />
            </form>
        </section>

        <div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fas fa-3x fa-shield-alt"></i>
                    </div>
                <div class="desc">
                    <h2>
                        Premuim Materials
                    </h2>
                    <p>
                        Our trombones use the shiniest brass which is sourced locally.
                         This will increase the longevity of your purchase.
                    </p>
                </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa-solid fa-3x fa-bolt"></i>
                    </div>
                    <div class="desc">
                        <h2>
                            Fast Shiping 
                        </h2>
                        <p>
                            We make sure you recieve your trombone as soon as we have finished making it. 
                            We also provide free returns if you are not satisfied.
                        </p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fas fa-3x fa-heartbeat"></i>
                    </div>
                    <div class="desc">
                        <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-works">
                <iframe id="video" width="625" height="315" src="https://www.youtube.com/embed/5oa0fYkmVZQ" title="YouTube video player" frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowfullscreen></iframe>
            </section>
            
            <section id="pricing">
                <div class="product" id="tenor">
                    <div class="level"> 
                        Tenor Trombone
                    </div>
                    <h2 class="six"> 
                        $600
                    </h2>
                    <ol>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum dolor.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                    </ol>
                    <button class="btn">
                        Select 
                    </button>
                </div>
                <div class="product" id="bass">
                    <div class="level2"> 
                        Bass Trombone
                    </div>
                    <h2>
                        $900
                    </h2>
                    <ol>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum dolor.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                    </ol>
                    <button class="btn">
                        Select 
                    </button>
                </div>
                <div class="product" id="valve">
                    <div class="level3"> 
                        Valve Trombone
                    </div>
                    <h2>
                        $1200
                    </h2>
                    <ol>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum dolor.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                    </ol>
                    <button class="btn">
                        Select 
                    </button>
                </div>
            </section>
            <footer>
                <ul>
                    <li>
                        <a href="#">
                            Privacy
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Terms 
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Contact
                        </a>
                    </li>
                </ul>
                <span>
                    © 2022, Original Trombones
                </span>
            </footer>
        </div>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

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

body{
    background-color: white;
    font-family: 'Poppins', sans-serif;
}

#page-wrapper {
    position: relative;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.btn {
    padding: 0 20px;
    height: 40px;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    border: 3px solid black;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.grid {
    display: flex;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    min-height: 75px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1em;
}

@media (max-width: 600px) {
    header {
        flex-wrap: wrap;
    }
}

.logo {
    width: 50vw;
}

@media (max-width: 650px) {
    .logo {
        margin-top: 15px;
        width: 100%;
        position: relative;
    }
}

.logo > img {
    width: 100%;
    height: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}

@media (max-width: 650px) {
    .logo > img {
        margin: 0 auto;
    }
}

nav {
    font-weight: 400;
}

@media (max-width: 650px) {
    nav {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 50px;
    }
}

nav li {
    padding-bottom: 5px;
}

nav > ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

@media (max-width:650px) {
    nav > ul {
        flex-direction: column;
    }
}

#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    margin-top: 100px;
}

#hero > h2 {
    margin-bottom: 20px;
    word-wrap: break-word;
}

#hero input[type= 'email'] {
    max-width: 275px;
    width: 100%;
    padding: 5px;
    height: 2.3rem;
    line-height: 1.4;
    font-family: inherit;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    

}


#hero input[type= 'submit']{
    max-width: 160px;
    width: 100%;
    height: 43px;
    margin: 15px 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 7px;
    color: white;
    background-color: rgba(9, 9, 36, 0.9);
    font-weight: 700;
    
    
}

#hero input[type='submit']:hover {
    border-radius: 5px;
    max-width: 170px;
    height: 45px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: border-radius 1s ;
  }

@media (max-width: 650px) {
    #hero > h2 {
        margin-top: 100px;
    }
}

@media (max-width: 650px) {
    #hero {
        margin-top: 120px;
    }
}

#features {
    margin-top: 30px;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 20vw;
    color: rgba(6, 6, 24, 0.9);
}

#features .icon > i {
    border: 15px solid rgba(9, 9, 36, 0.8);
    border-radius: 50% ;
}

@media (max-width: 550px) {
    #features .icon {
        display: none;
    }
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 125px;
    width: 80vw;
    padding: 5px;
}

@media (max-width: 550px) {
    #features .desc {
        width: 100%;
        text-align: center;
        padding: 0;
        height: 150px;
    }
}

@media (max-width: 650px) {
    #features {
        margin-top: 20px;
    }
}

#how-it-works {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

#how-it-works > iframe{
    max-width: 580px;
    width: 100%;
    border: 1px solid rgba(6, 6, 24, 0);
    border-radius: 7px;
    
}

#pricing {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% / 3);
    margin: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 6px;
}

.product > .level {
    background-color: rgba(207, 16, 16, 0.9);
    border: 0;
    border-radius: 5px 5px 0 0;
    color: black;
    padding: 10px 0;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
}



.product > .level2 {
    background-color: rgb(5, 189, 143, 0.9);
    border: 0;
    border-radius: 5px 5px 0 0;
    color: black;
    padding: 10px 0;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
}

.product > .level3 {
    background-color: rgb(0, 0, 255, 0.6);
    border: 0;
    border-radius: 5px 5px 0 0;
    color: black;
    padding: 10px 0;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
}



.product > h2 {
    margin-top: 15px;
}



.product > ol {
    margin: 15px 0;
}

.product > ol > li {
    padding: 5px 0;
}

.product > button {
    max-width: 120px;
    border: 0;
    border-radius: 5px;
    margin: 15px 0;
    height: 40px;
    width: 100%;
    background-color: rgba(6, 6, 24, 0.9);
    font-weight: 700;
    color: white;
}

.product > button:hover {
    border-radius: 7px;
    max-width: 130px;
    height: 42px;
    transition: border-radius 1s;
}

@media (max-width: 800px) {
    #pricing {
        flex-direction: column;
    }

    .product {
        max-width: 300px;
        width: 100%;   
        margin: 0 auto;
        margin-bottom: 10px;
     }
}

footer {
    margin-top: 30px;
    background-color: rgba(13, 13, 63, 0.3) ;
    padding: 10px;
}

footer > ul {
    display: flex;
    justify-content: flex-end;
}

footer > ul > li {
    padding: 0 10px;
}

footer > span {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #444;
}

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

screenbud-a1c95777-810c-437d-8d48-7a919017a559
screenbud-a1c95777-810c-437d-8d48-7a919017a5591366×657 125 KB

1 Like
2

It didn’t load any code at all for me when I clicked on the link to inspect the code you entered to be tested. If you didn’t enter any code that’s the problem, there’s no code for it to test.

The test pages have recently be changed. I’m going to post a ‘get help’ question to test whether that’s an internal error or not.

3

I’m not even getting “get help” button when I purposely fail the tests.

4

Please post all of your code, HTML and CSS.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

5

Same for me, tried several pages and styles, it just stuck

6

Same is happening to me, I even tried to set position: fixed to both my #nav-bar and #header to see if that would make it, but still been unable to pass that one :confused:

7

@cartagra @joaovinicius1234576 please create your own topic with your own code so that we can help you!

8

Hey ilenia, I created my topic. I would be glad if you could help me

9

To solve this task you have to specify all of the axis positions (top, right, bottom, left) of the section you set the positioning. In this case it was the header, so you need to set as the following:

header {
    position: fixed;
    width: 100%;
/*Axis positions*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*Axis positions*/
    min-height: 75px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1em;
}

I set all of them as 0, but of course you should set it as what is best for you.
You an check the solution in my topic as well #nav-bar at the top of viewport - #4 by joaovinicius1234576

10

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