Olá pessoal! Terminei o módulo 3 agora e fiz algumas alterações desde a construção da página home. Eu ficava incomodado do layout da página inicial não corresponder à página de produtos e contatos. Então, botei em prática o que estou aprendendo e assim ficaram meus códigos para quem quiser experimentar e avaliar. Sei que dá para melhorar o que fiz, mas fiquei satisfeito com o resultado.

*Na página index.html, refiz o HTML e o CSS e ficaram assim: * index.html

            <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="titulo2-centralizado">Benefícios</h3>

            <ul class="listadebeneficios">
                <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>
    <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura 2023</p>
        </footer>
</body>

O CSS ficou assim:

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; }

#banner { width: 100%; }

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

.titulo-principal { padding-left: 20px; }

.titulo-centralizado { font-weight: bold; font-size: 1.5em; text-align: center; margin-bottom: 15px; }

strong { font-weight: bold; }

p { text-align: center; margin-bottom: 25px; }

#missao { font-style: italic; font-size: 20px; }

.titulo2-centralizado { font-weight: bold; font-size: 1.17em; text-align: center; margin-top: 40px; margin-bottom: 20px; }

em strong { color: #FF0000; }

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

.itens { font-style: italic; margin-bottom: 2px; }

.listadebeneficios { display: inline-block; vertical-align: top; list-style: disc; width: 20%; margin-right: 15%; margin-left: 4%; margin-top: 1%; }

.imagembeneficios { width: 50%; }

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

.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0; }

Já no contato.html, a parte da tabela deixei assim:

<table>
            <thead>
                <tr>
                    <th class="cidade" colspan="2">Belo Horizonte</td> 
                </tr>
                    <th>Dia</th>
                    <th>Horário</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Segunda</td>
                    <td>8h ~ 18h</td>
                </tr>
                <tr>
                    <td>Terça</td>
                    <td>8h ~ 18h</td>
                </tr>
                <tr>
                    <td>Quarta</td>
                    <td>8h ~ 18h</td>
                </tr>
                <tr>
                    <td>Quinta</td>
                    <td>8h ~ 18h</td>
                </tr>
                <tr>
                    <td>Sexta</td>
                    <td>8h ~ 21h</td>
                </tr>
                <tr>
                    <td>Sábado</td>
                    <td>8h ~ 21h</td>
                </tr>
            </tbody>
        </table>
    </main>

    <footer>
            <img src="logo-branco.png" alt="Logo da Barbearia Alura">
            <p class="copyright">&copy; Copyright Barbearia Alura 2023</p>
        </footer>
</body>

E o CSS, assim:

table { margin: 20px 0 40px; }

thead { background: #555555; color: white; font-style: bold; font-size: 18px; }

td, th { border: 1px solid #000000; padding: 8px 15px; }

.cidade { background: url(bg.jpg); color: white; }