Entrar Ainda não tem acesso?
2
respostas

[Projeto] projeto final

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Projeto do curso

por MATEUS DE CASTRO DA SILVA
| 27.1k xp | 37 posts

html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width>
    <title>Barbearia alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="inicio.css"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
    <body>
        <header>
            <div class="caixa">
                <h1>
                    <a href="inicio.html">
                        <img src="logo.png" alt="logo">
                    </a>
                </h1>

                <nav>
                      <ul>
                        <li><a href="inicio.html">home</a></li>
                        <li><a href="produto.html">produtos</a></li>
                        <li><a href="contato.html">contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <img class="banner" src="banner.jpg">

        <main>
                <section class="principal">
                    <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

                    <img class="utensilios" src="utensilios.jpg" alt="utensilios">

                    <p class="texto">Localizada no coração da cidade a <strong>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="texto"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                    <p class="texto">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>

                </section>


                <section class="mapa">
                    <h3 class="titulo-principal">Nosso estabelecimento</h3>
                    <p>Nosso estabelecimento está localizado no coração da cidade.</p>

                    <div class="mapa-conteudo">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4483278365396!2d-46.63466568562861!3d-23.588249068469487!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum!5e0!3m2!1spt-BR!2sbr!4v1568814489656!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                    </div>

                </section>



                <section class="beneficios">
                    <h3 class="titulo-principal">beneficios</h3>

                    <div class="couteudo-beneficios">
                        <ul class="lista-beneficios"> 
                            <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 class="imagem-beneficios" src="beneficios.jpg">
                    </div>

                    <div class="video">
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </section>

        </main>

        <footer>
            <img src="logo-branco.png" alt="logo">
            <p class="copyright">&copy; copyright barberia alura - 2019</p>
        </footer>
    </body>
</html>
2 respostas
por MATEUS DE CASTRO DA SILVA
| 27.1k xp | 37 posts

css

header{
    background: linear-gradient(rgb(255, 255, 255), black);
    padding: 20px 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 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: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: rgba(253, 199, 100, 0.493);
    text-decoration: underline;
}

.banner{
    width: 100%;
    height: 620px;
}


.titulo-principal{
    text-align: center;
    margin: 0 0 1em;
    color: #bbbbbb;
    font-size: 2em;
    text-transform: uppercase;
    clear: left;
}

.titulo-principal::before{
    content: "[  ";
}
.titulo-principal::after{
    content: "   ]";
}
.texto{
    color: #bbbbbb;
    text-align: left;
    font-size: 20px;
    padding: 20px;  
}

.utensilios{
    width: 150px;
    float:left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
    color: #bbbbbb;   
}

.beneficios{
    font-size: 20px;
    text-align: center;
    color: #bbbbbb;
    margin: 10% 0;


}

.couteudo-beneficios{
    width: 640px;
    margin: 0 auto;
    padding: 2em;
}

.lista-beneficios{
    width: 40%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

.imagem-beneficios{
    width: 60%;
    padding: 1em;
    opacity: 50%;

}

.imagem-beneficios:hover{
    opacity:100%;
    transition: 1s;

}
.video{
    width: 560px;
    margin: 2em auto;
}

.itens{
line-height: 1.5;

}

.itens:before {
    content: "✄";
}

main{
    background: #000000;
    padding: 110px;
    line-height: 1;
}

footer{
    background: #000000;
    text-align: center;
    padding: 20px ;
    background: linear-gradient(black,rgb(94, 94, 94));
}
.copyright{
    font-size: 13px;
    color: #bbbbbb;
    padding: 10px;
}

@media screen and (max-width: 480px) { 
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
        width: auto;
    }
    h1 {
        text-align: center;
    }
    nav {
        position:static;
    }
    .lista-beneficios, imagem-beneficios {
        width: 100%
    }
}
por Lorena Garcia
| 8309k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Oi Matheus, tudo bem?

Muito obrigada por compartilhar com a gente o seu código e cada parte dele, foi muito legal acompanhar cada parte dele.

Parabéns por chegar ao fim! Seu projeto está incrível. :D

Não sei se você já fez, mas posta nas suas redes sociais contando um pouco sobre o projeto e marca a Alura.

Um abraço e bons estudos.