Atividade 6 - consolidando o conhecimento - cabeçalho | HTML5 e CSS3 parte 1: crie uma página da Web

HTML

<!DOCTYPE html>
<!--informa a últia versão HTML-->
<html lang="pt-br">
<!--tag de conteúdo/linguagem-->

<head>
    <!--head = informações que passamos para o navegador-->
    <meta charset="UTF-8">
    <!--codificação de caracteres - Unicode Transformation Format - 8 bit -->
    <title>Barbearia Alura - revisão 2 </title>
    <!--título da página na guia-->
    <link rel="stylesheet" href="style.css"> <!-- link referência do arquivo style.css que liga ao css-->
</head>

<body>
    <header>
        <!--tag usada para cabeçalho-->
        <h1 class="titulo-principal"> Barbearia Alura </h1>
        <!-- quando inserimos a classe, a tag <img> não precisa de fechamento -->
    </header>
    <!--divisão do cabeçalho da página-->
    <img id="banner" src="img/img02.jpg">
    <div class="principal">
        <h2 class="titulo-centralizado"> Sobre a Barbearia Alura </h2>
        <!--H1 é a tag principal do conteúdo-->

        <p> 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 id="missao"><em> Nossa missão é: <strong>"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>
    </div>

    <div class="beneficios">
        <h3 class="titulo-centralizado">Benefícios</h3>

        <ul>
            <!--lista não ordenada-->
            <li class="itens">Atendimento aos Clientes </li>
            <!--tag <li> deixa o texto com ponto e itálico -->
            <li class="itens">Espaço diferenciado</li>
            <li class="itens">Localização</li>
            <li class="itens"> Profissionais Qualificados </li>
        </ul>

        <img src="img/img03.jpg" class="imagembeneficios">
    </div>
</body>

</html>

css

body {

}

#banner {
    width:100%;
}

.principal{ /*bloco principal*/
    background: #CCCCCC;
    padding: 30px; /*espaçamento interno*/
}

.titulo-centralizado {
    text-align: center
}

.titulo-principal {
    padding-left: 20px; /*espaçamento interno à esquerda*/
}

p {
    text-align: center;
}

#missao {
    font-size: 20px
}

em strong {
    color: #FF0000;
}

.itens {
    font-style: italic;
}

.beneficios {
    background: #FFFFFF;  
  padding: 20px;  /*espaçamento da imagem com o texto para todo o lado*/    
}

ul{/*aqui é a tag de edição da segunda imagem*/
    display: inline-block; /*tag ocupa a linha da margem com o texto, bloqueia a largura, mas a largura é fixa
    ocupa só o tamanho do conteúdo, mas não deixa mexer na largura nem comprimento. 
    Todos os elementos estão alinhados na linha de baixo do texto.*/
    vertical-align: top; /*a imagem está centralizada no texto vertical*/
    width: 20%; /*largura da imagem*/
    margin-right: 15%; /*espaçamento externo para direita*/
} 

.imagembeneficios {
    width: 50%; /*largura da pagina*/
}

Mergulhe em programação