Please help me with challenge / me ajudem com esse desafio

HTML-CSS
1

Conte-nos o que está acontecendo:
meu #nav-bar esta fixo, porém não consta que está fixo, não consigo concluir o desafio por três motivos.

. #nav-bar precisa ser fixo (está fixo, mas consta que não)
. usar pelomenos 1 media queries (estou usando, mas consta que não)
. usar pelomenos 1 Flexbox (estou usando, mas consta que não)

Seu código até o momento

#nav-bar  {
    position: fixed;
    top: 0;
    left: 0;
}

#Pricing {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
   
}

@media (max-width: 400px) {
    #Pricing {
        flex-direction: row;
        justify-content: center;
    }
}

HTML

<nav id="nav-bar">
            <ul id="nav-li">
                <li><a href="#about" class="nav-link">About</a></li>
                <li><a href="#How-it-Works" class="nav-link">How it Works</a></li>
                <li><a href="#Pricing" class="nav-link">Pricing</a></li>
            </ul>
        </nav>

<section id="Pricing">
        <div class="box-1">
            <div class="level">Tenor Trombone</div>
            <h2>$600</h2>
            <ul>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum dolor.</li>
                <li>Lorem ipsum.</li>
            </ul>
            <button class="btn">SELECT</button>
        </div>

        <div class="box-2">
            <div class="level">Tenor Trombone</div>
            <h2>$600</h2>
            <ul>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum dolor.</li>
                <li>Lorem ipsum.</li>
            </ul>
            <button class="btn">SELECT</button>
        </div>

        <div class="box-3">
            <div class="level">Tenor Trombone</div>
            <h2>$600</h2>
            <ul>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum.</li>
                <li>Lorem ipsum dolor.</li>
                <li>Lorem ipsum.</li>
            </ul>
            <button class="btn">SELECT</button>
        </div>
    </section>



Substitua essas duas frases pelo código que você copiou.
Deixe as linhas com ``` acima e ``` abaixo de seu código,
pois elas permitirão a formatação adequada de seu código na publicação.

Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Desafio: Criar uma landing page para um produto

Link para o desafio:

2

Observação: não se esqueça de adicionar <link rel="stylesheet" href="styles.css"> em seu HTML para vincular sua folha de estilo e aplicar seu CSS

3

ta aplicado também, só anexei os pontos principais, pra ver se tem algo errado.

o estilo dele esta pegando certinho, só esses tópicos que não estão passando :frowning:

4

Please paste all of your HTML and CSS so we can test for ourselves.

5
Document 
<header id="header">
    <img id="header-img" src="logo.png" width="50px">
    <nav id="nav-bar">
        <ul id="nav-li">
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#How-it-Works" class="nav-link">How it Works</a></li>
            <li><a href="#Pricing" class="nav-link">Pricing</a></li>
        </ul>
    </nav>
</header>
<div id="main">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <div id="div-main">
            <h2 id="main-h2">Handcrafted, home-made masterpieces</h2>
            <input id="email" type="email" name="email" placeholder="Enter your email address" autocomplete="on">
            <input id="submit" type="submit">GET STARTED

            </input>
    </form>
</div>
<section id="about">
    <div class="flexBox">
        <div class="desc">
            <h2>Premium Materials</h2>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of
                your purchase.</p>
        </div>
        <div class="desc">
            <h2>Fast Shipping</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 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="600" height="320" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
</section>
<section id="Pricing">
    <div class="box-1">
        <div class="level">Tenor Trombone</div>
        <h2>$600</h2>
        <ul>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
        </ul>
        <button class="btn">SELECT</button>
    </div>
    <div class="box-2">
        <div class="level">Tenor Trombone</div>
        <h2>$600</h2>
        <ul>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
        </ul>
        <button class="btn">SELECT</button>
    </div>
    <div class="box-3">
        <div class="level">Tenor Trombone</div>
        <h2>$600</h2>
        <ul>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
        </ul>
        <button class="btn">SELECT</button>
    </div>
</section>
<footer>
    <div class="link-footer">
        <ul id="li-foot">
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <span> Copyright2022, Original Trombones</span>
</footer>
</div>

@import url(‘https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap’);
body {
height: auto;
margin: 0;
font-family: ‘Josefin Sans’, sans-serif;
}

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
background-color: whitesmoke;
align-items: center;
justify-content: center;
}

#nav-bar {
position: fixed;
top: 0;
left: 0;
}

#nav-li {
display: flex;
align-items: center;
}

#header-img {
width: 80px;
height: 80px;
}

a{
display: flex;
flex-direction: row;
margin-left: 200px;
}

#main {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
height: auto;
}

#div-main {
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
height: auto;
}

#email {
width: 50%;
height: 20px;
}

#submit {
padding: 10px;
border: none;
margin: 10px;
background-color: rgb(255, 217, 0);
}

.desc {
margin: 50px;
padding: 2px;
}

#about {
margin: 50px;
}

a {
display: flex;
flex-direction: row;
text-decoration: none;
color: black;
}

#Pricing {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;

}

.level {
background-color: rgb(255, 217, 0);
padding: 30px 50px 30px 50px;
}

@media (max-width: 400px) {
#Pricing {
flex-direction: row;
justify-content: center;
}
}

.box-1 {
margin-right: 30px;
padding: 1px;
border: 1px solid black;
border-radius: 3px;
align-items: center;
display: flex;
flex-direction: column;
}

.box-2 {

margin-right: 30px;
padding: 1px;
border: 1px solid black;
border-radius: 3px;
align-items: center;
display: flex;
flex-direction: column;

}

.box-3 {
padding: 1px;
border: 1px solid black;
border-radius: 3px;
align-items: center;
display: flex;
flex-direction: column;
}

.btn {
padding: 10px;
border: none;
border-radius: 3px;
margin: 10px;
background-color: rgb(255, 217, 0);
}

footer {
background-color: whitesmoke;
justify-content: center;
width: 100%;
padding: 10px 0px;
display: flex;
flex-direction: column;
align-items: center;
}

#li-foot {
margin: 0;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
}

ul {
list-style: none;
}

.flexBox {
width: 1000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

6

Thank you. Unless you forgot something, I don’t see where you have linked styles.css into your HTML.

8

im sorry…

suporte
suporte779×255 7.59 KB

9

I’m really trying to help you here but you aren’t making it easy :slight_smile: You can’t post pictures of code as I’m not going to retype it. In the future, always paste your code in here using the triple back ticks method.

But, I can see what your problem is from the pic. You are linking “style.css” instead of “styles.css” (notice the “s” at the end of “styles”).

10

forgive me, I’m still learning to use the tools, but I’ll improve…

in question of “style.css”, it is linked like this because the file name is “style.css”

but I just changed it and put the “s”
and it worked.
thank you for the patience

11

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