Projetos do design responsivo para a web - Criar uma landing page para um produto

Português HTML-CSS
1

Alguém me ajuda.
Fiz o código até aqui tudo certo, mas o site me pede pra deixar o elemento ‘nav’ acima do ‘viewport’. Não entendo isso. o ‘’ tem que escrito ser logo após o elemento “body” ?

Product Landing Page 
        <img width="300" id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Company Logo">
        <nav id="nav-bar">
            <a class="nav-link" href="#features">Features</a>
            <a class="nav-link" href="#video">How It Works</a>
            <a class="nav-link" href="#pricing">Pricing</a>
        </nav>
    </header

Seu código até o momento

AVISO

O código de seed do desafio e/ou sua solução excederam o comprimento máximo que podemos transportar do desafio.

Você precisa realizar uma etapa adicional aqui para que o código que você escreveu apresente um formato de fácil leitura.

Copie e cole todo o código do editor mostrado no desafio de onde você acaba de fazer o link.

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 (X11; Linux x86_64; rv:104.0) Gecko/20100101 Firefox/104.0

Desafio: Projetos do design responsivo para a web - Criar uma landing page para um produto

Link para o desafio:

2

Oi, @gbssdias. Na verdade, não é acima do viewport, nem logo após o elemento body. As instruções (em português) dizem:

3. Dentro do elemento #header, deve haver um elemento nav com um id="nav-bar" correspondente
...
13. A barra de navegação deve estar sempre na parte superior da viewport
14. A página inicial deve ter pelo menos uma media query

Seguindo essas instruções (que, na verdade, são bastante semelhantes às do projeto do portfólio), o teste passará. Bons estudos! :slight_smile:

3

Olá amigo. Boa noite!
Tudo bem?
Infelizmene eu ainda não consegui resolver e finalizar o desafio.
Fiz o recomendado por você porém, ainda me diz:

  • Falhou: O elemento #nav-bar deve estar sempre na parte superior da viewport.

  • Falhou: A página inicial deve ter pelo menos uma media query.

*Falhou: A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez.

To começando a ter vontade de desistir, não sei como resolver isto.

4

Consegue enviar aqui o código que usou para a landing page do mesmo jeito que você fez com a página de portfólio?

5

Sim. Aqui está:

Product Landing Page 
        <img width="300" id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Company Logo">
        <nav id="nav-bar">
            <a class="nav-link" href="#features">Features</a>
            <a class="nav-link" href="#video">How It Works</a>
            <a class="nav-link" href="#pricing">Pricing</a>
        </nav>
    </header>
    
    <form id="form" action=" https://www.freecodecamp.com/email-submit">
        <h2>Handcrafted, home-made masterpieces</h2>
        <input type="email" name="email" id="email" placeholder="Enter your email address">
        <input id="submit" type="submit" value="Get Started">
    </form>

    <div id="features">
        <div class="features">
            <img src="" alt="Logo">
            <div>
                <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>
        <div class="features">
            <img src="" alt="Logo">
            <div>
                <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>
        <div class="features">
            <img src="" alt="Logo">
            <div>
                <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>
    </div>

    <div id="video-container">
        <iframe id="video" height="315" width="560" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"></iframe>
    </div>

    <div id="pricing">
        <div class="prices">
            <h3>Tenor Trombone</h3>
            <h2>$600</h2>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <button>Select</button>
        </div>
        <div class="prices">
            <h3>Bass Trombone</h3>
            <h2>$900</h2>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <button>Select</button>
        </div>
        <div class="prices">
            <h3>Valve Trombone</h3>
            <h2>$1200</h2>
            <p>Plays similar to a trumpet</p>
            <p>Great for Jazz Bands</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <button>Select</button>
        </div>
    </div>

    <footer id="footer">
        <div>
            <a href="/">Privacy</a>
            <a href="/">Terms</a>
            <a href="/">Contact</a>
        </div>
        <p>Copyright 2016, Original Trombones</p>
    </footer>

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
6

Até agora ainda não consegui, já se passaram alguns dias mas eu acabei desistindo pois não tinha encontrado ainda uma maneira de resolver. É meio frustrante pra mim pois quero resolver por conta mas ainda não sou capaz disso.

7

Consegue enviar também o seu CSS? Me parece que ele é o problema.

Antes do seu body, no html, coloquei um head fazendo o link para styles.css.
No arquivo styles.css, coloquei algumas regras para o elemento com o id header, como position: fixed e display: flex. Abaixo disso, coloquei uma media query e testei. Seu código passou sem problemas aqui. Faça esse teste e retorne para nós o resultado. Bons estudos. :smiley:

8

Sim, aqui o CSS:

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    }

body {
background-color: #eee;
}

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

#header {
background-color: #eee;
position: sticky;
top: 0;
display: flex;
padding: 20px;
}

#nav-bar {
display: flex;
justify-content: flex-end;
width: 100%;
}

.nav-link {
margin-right: 60px;
}

#form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
margin-bottom: 70px;
}

#form > * {
margin-bottom: 10px;
}

#email {
padding: 5px;
width: 21%;
}

#submit {
padding: 5px;
border: none;
background-color: #f1c40f;
font-weight: 900;
cursor: pointer;
font-size: 1em;
text-transform: uppercase;
transition: 2s;
}

#submit:hover {
background-color: #ff9900;
}

#features {
width: 67%;
margin-left: auto;
margin-right: auto;
}

#features .features {
display: flex;
flex-direction: row;
}

.features {
margin-bottom: 40px;
}

#video-container {
margin-left: auto;
margin-right: auto;
width: 560px;
}

iframe {
border: none;
}

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

.prices {
width: 25%;
border: 1px solid #000;
border-radius: 3px;
text-align: center;
margin: 10px;
}

.prices > * {
margin-bottom: 15px;
}

.prices > h3 {
background-color: #ddd;
text-transform: uppercase;
padding: 15px 0px;
font-size: 15px;
font-weight: 700;
}

.prices > button {
background-color: #f1c40f;
border: none;
border-radius: 2px;
padding: 10px 20px;
margin: 15px 0px;
cursor: pointer;
text-transform: uppercase;
transition: 2s;
}

.prices > button:hover {
background-color: #ff9900;
}

#footer {
background-color: #ddd;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 20px;
width: 80%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}

#footer a {
margin-right: 10px;
}

#footer div {
margin-bottom: 10px;
}

#footer p {
color: #444;
}

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

9

Coloque isso antes do body no html e teste novamente:

<head>
    <link type="stylesheet" href="styles.css">
</head>
10

Muito obrigado meu amigo, era isso mesmo.
Eu não tinha noção que seria uma coisa simples a se fazer.

1 Like