Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Ola! boa tarde rs realizando uma aulinha no horário de almoço, segue meu código:

</head>
<body>
    <header> 
        <div class="caixa">
            <h1><img src="logo.png" alt=""></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contatos</a></li>
                </ul>
            </nav>
        </div> 
    </header>

    <main>
        <form>
            <label for="nomesobrenome">Nome e sobrenome</label> 
            <input type="text" id="nomesobrenome">

            <label for="email">Email </label>
            <input type="text" id="email">

            <label for="telefone">Telefone</label>
            <input type="text" id="telefone">

            <input type="submit" value="Enviar Formulário">

    </main>

    <footer>
        <img src="logo-branco.png" alt="">
        <p class="Copyright"> &copy; Copyright Barbearia Alura - 2019</p>
    </footer>
</body>
style.css

header{
background: #BBBBBB;
padding: 20px 0;

} .caixa{ width: 940px; position: relative; margin: 0 auto;

} nav{ position: absolute; top: 110px; right: 0; }

nav li { display: inline; margin: 0 0 0 15px; }

nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none;

} nav a:hover{ color: #c78c19; text-decoration: underline; }

.produtos { width: 940px; margin: 0 auto; padding: 50px 0;

}

.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px;

}

.produtos li:hover { border-color: #c78c19; }

.produtos li:active{ border-color: #088c19;

}

.produtos li:hover h2{ font-size: 34px; } .produtos h2 { font-size: 30px; font-weight: bold; }

.produto-descrição { font-size: 18px;

} .produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }

footer{ text-align: center; background: #000000; padding: 40px 0;

}

.Copyright{ color: #ffffff; font-size: 13px; margin: 20px; }

main{ width: 940px; margin: 0 auto; }

form { margin: 40px 0; }

form label { display: block; font-size: 20px; margin: 0 0 10px; }

form input { display: block; margin: 0 0 20px; padding:10px 25px; width: 50%; }

1 resposta
solução!

Oi Jamile, tudo bem?

Parabéns por praticar o que viu nas aulas, com certeza você vai conseguir fixar bem o que viu nas aulas. E muito obrigada por dedicar uma parte do seu tempo para compartilhar aqui o seu projeto.

Só não esquece de preencher os alts das imagens, é super importante para questões de acessibilidade. :D

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software