Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Desafio final

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Conclusão

por Bruno Sabbag Machado
| 97.8k xp | 43 posts
Analista de Criação de Eventos

Oi pessoal.

Postando aqui o desafio final da parte 2. Não consegui fazer muito na página Home, só tentei arrumar o que se perdeu após usar o reset.

Ainda estou tentando entender o HTML e CSS, porque algo ainda não fez muito sentido pra mim kkk.

Mas todo caso, seguem meus códigos:

index.html

<!DOCTYPE html>
<html lang = "pt-br">
    <head>
        <meta charset = "UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="cabecalho">
                <h1 class="titulo-principal">Barbearia Alura</h1>
                <img id="banner" src="banner.jpg">
             </div>
        </header>
        <main>
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
            <p>Localizada no coração da cidade a <strong class="nome-barbearia">Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. 
            Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
            <p class="missao"><em>Nossa missão é: <strong class="frase-missao">"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, 
            garantindo qualidade e satisfação dos nossos clientes.</p>
        </main>
        <div class="beneficios">
            <h3 class="titulo-centralizado">Beneficios</h3>
            <ul>
                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
            </ul>
            <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </body>

</html>

style.css

.cabecalho {
    text-align: center;
}

.titulo-principal{
    padding: 10px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

#banner {
    width: 100%;
}

main {
    background: #CCCCCC;
    margin: 0 auto;
    padding: 50px 0;

}

.titulo-centralizado {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    padding: 20px 0;
}

p {
    text-align: center;
    padding: 15px;
}

.nome-barbearia {
    font-weight: bold;
}

.missao {
    font-size: 18px;
    font-style: italic;
}

.frase-missao {
    color: #FF0000; 
}

.beneficios {
    background: #FFFFFF;
    padding: 50px;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
    padding: 0 0 0 40px;
}

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

.itens {
    font-style: italic;
}

.imagembeneficios {
    width: 50%;
}
3 respostas
por Bruno Sabbag Machado
| 97.8k xp | 43 posts
Analista de Criação de Eventos

produtos.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
           <ul class="produtos">
               <li>
                   <h2>Cabelo</h2>
                   <img src="cabelo.jpg">
                   <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                   <p class="produto-preco">R$ 25,00</p>
                </li>
               <li>
                   <h2>Barba</h2>
                   <img src="barba.jpg">
                   <p class="produto-descricao">Corte e desenho profissinoal de barba</p>
                   <p class="produto-preco">R$ 18,00</p>
                </li>
               <li>
                   <h2>Cabelo + Barba</h2>
                   <img src="cabelo+barba.jpg">
                   <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                   <p class="produto-preco">R$ 35,00</p>
                </li>
           </ul> 
        </main>

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2021</p>
        </footer>
    </body>
</html>

produtos.css

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

.caixa {
    position: relative;
    width: 940px;
    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;
    color: #C78C19;
}

.produtos li:active h2{
    color: #088C19;
}

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

.produto-descricao {
    font-size: 18px;
}

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

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0;
}
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Bruno, tudo bem?

Excelente!

Parabéns pelo empenho e dedicação.

Fique tranquilo! O aprendizado é um processo e todos passam por essa fase de maior dificuldade, quanto mais praticar mais fará sentido.

Queremos fazer parte desse mergulho no aprendizado! Então em caso de dúvidas ou dificuldades, entre em contato conosco aqui pelo fórum, estamos a disposição para ajudar!

Abraços e bons estudos!

por Bruno Sabbag Machado
| 97.8k xp | 43 posts
Analista de Criação de Eventos

Oi Beatriz. Tudo bem e você?

Muito obrigado! :)

Pois é.... to tendo mais dificuldade no HTML/CSS do que na Lógica de programação em Javascript kkkk. Por hora não fiz nenhuma pergunta porque realmente nem sei o que perguntar, não está entrando na cabeça. Mas assim que eu entender melhor, pode deixar que vou perguntar sim.

Muito obrigado pelo apoio e sempre.

Abraços