[Projeto] Lista e Display - Consolidando o seu conhecimento | Front-end

<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <style>
            #banner {
                width: 100%;
            }

            .principal {
                background: #CCCCCC;
                padding: 30px;
            }

            h1 {
                text-align: center;
            }

            p {
                text-align: center;
            }

            #missao {
                font-size: 20px;
            }

            em strong {
                color: #f46600;
            }

            .itens {
                font-style: italic;
            }

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

            h2 {
                text-align: center;
            }

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


            .imagembeneficios {
                width: 50%;
            }

        </style>
    </head>

    <body>
        <img id="banner" src="banner.jpg">

        <div class="principal">

            <h1>Sobre a Barbearia Alura</h1>

            <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">
            <h2>Benefícios</h2>

            <ul class="itens">
                <li>Atendimento aos Clientes</li>
                <li>Espaço diferenciado</li>
                <li>Localização</li>
                <li>Profissionais Qualificados</li>
            </ul>

            <img src="beneficios.jpg" class="imagembeneficios">

        </div>
    </body>
file:///D:/Users/Gabriel%20Gaede/Desktop/CURSO%20-%20HTM_CSS_JAVASCRIPT/PROJETO%2001%20-%20BARBEARIA%20ALURA/index.html