Resultado de aplicar o conhecimento no modulo 2 de html e css estou estudando a 3 dias programação | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

codigo que usei

<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">Contatos</a></li>
                    </ul>
                </nav>
        </div>    
    </header>
    <main>
        <H2 class="centralizado">Sobre A Barbearia Alura</H2>
            <div class="conteudo">
                <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 class="missao">Nossa missão é:Proporcionar auto-estima e qualidade de vida aos clientes</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>

                <img src="banner.jpg">
            </div>
            <h3 class="beneficios">Beneficios</h3>

              <div>
                  <ul class="vantagens">
                    <li>
                        <h4>Atendimento aos Clientes</h4>
                            <img src="beneficios.jpg"width="150" height="150" >
                    </li>
                    <li>
                        <h4>Espaço diferenciado</h4>
                            <img src="barbeariareal.png"width="150" height="150">
                    </li>
                    <li>
                        <h4>Localização<h4>
                            <img src="localização.png"width="150"height="150">
                    </li>
                    <li>
                        <h4>Profissionais Qualificados</h4>
                            <img src="barbeiro.png"width="150"height="150">
                    </li>
                  </ul>
               </div>

    </main>

    <footer>
        <img src="logo-branco.png">
        <p class="Copyrigth">&copy; Copyrigth Barbearia Alura - 2019</p>
        <p class="Copyrigth">&copy; Copyrigth Caique Dev's - 2023</p>
    </footer>
</body>

parte de css

header { background: #BBBBBB; padding: 20px 0 0 ; } .caixa{ position: relative; width: 940px; margin: 0 auto; }

nav li { display: inline; margin: 0 0 0 15px; } nav{ position: absolute; top: 110px; right: 0; }

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

h2{ text-align: center; font-size: 25px; font-weight: bold; margin:0 auto; background: #BBBBBB; }

.conteudo{ margin: 0 ; color: white; text-align: center; font-family: Sofia Sans Condesed; border: solid; background: url("bg.jpg") } .missao{ color: #ff0000; } .beneficios{ text-align: center; text-transform: uppercase; font-weight: bold; }

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

.vantagens li { display: inline-block; text-align: center; width: 24%; vertical-align: top; margin: 0 0,6%; padding: 30px 20px; box-sizing: border-box; border: 3px solid #000000; border-radius: 88px; } .vantagens li:hover{ border-color: #C78C19; } .vantagens li:hover h4 { font-size: 30px; }

.vantagens h4{ font-size: 15px; font-weight: bold;

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

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

codigo pode nao ter ficado muito limpo ou bonito mas o importante e por em pratica oque aprendeu e entender oque esta fazendo, rumo ao primeiro emprego de dev junior <3 ![]( Insira aqui a descrição dessa imagem para ajudar na acessibilidade )