Projeto Finalizado!

Bom, aproveitei o desafio e fiz algumas alterações no CSS. Também estou enviando uma imagem do site. Tirei o texto sobre a barbearia para poder enviar aqui o código!

*Código HTML *

Barbearia Alura

• Home
• Produtos
• Contato

Benefícios

Atendimento aos Clientes

Espaço diferenciado

Localização

Profissionais Qualificados

© Copyright Barbearia Alura - 2022

*Código CSS *

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:wght@100&display=swap'); /* <------------- Limpando a formatação da página ----------- */

• { box-sizing: border-box; margin: 0; padding: 0; font-family: "Montserrat", sans-serif;} body{ background-color: white;} /* <------------- Declarando as configurações padrão para o site ----------- / li, a, button { font-weight: 500; font-size: 16px; text-decoration: none; vertical-align: middle;} / <------------- Header ----------- / header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%;} .wrapper { text-align: center;} .titulo { display: inline-block; vertical-align: middle;} .logo { cursor: pointer; transform: scale(0.8); width: 34px; height: 44px; vertical-align: middle;} / <------------- Nav Bar ----------- / .menu_navegacao { list-style: none;} .menu_navegacao li { display: inline-block; padding: 0px 20px;} .menu_navegacao li a { transition: all 0.3s ease 0s;} .menu_navegacao li a:hover { color: #0088a9; text-decoration: underline;} .link_logo {vertical-align: middle;} / <------------- Main ----------- / main { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; align-items: center;} / <------------- Imagem Central ----------- / .banner {max-width: 90%; height: 345px; background: transparent url('img/banner.png') 0% 0% no-repeat padding-box; border-radius: 25px; border-style: solid;} .banner:hover { border-color: #0088a9; transition: all 0.3 ease 0s;} / <------------- Texto ----------- / .section_principal { width: 80%; box-sizing: border-box; margin: 30px auto 10px auto; justify-content: center;} .section_about{ text-align: center; font-weight: bold;} .missao { font-size: 20px;} .missao em strong:hover { color: red;} .list-itens { display: inline-block; vertical-align: top; width: 30%; margin-left: 15%;} .itens { font-style: italic;} .titulo_footer{ text-align: center; margin: 30px auto 10px auto;} p { text-align: center; } .section_beneficios { display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 2em; justify-content: space-around; width: 70%; text-align: center; max-width: 80%; margin: auto auto 50px auto; } .servicos{ width: auto; height: 218px; border: 1px solid #707070; border-radius: 25px; opacity: 1;} .servicos:hover{ transform: translateY(10px);} .lista_beneficios { margin-top: 10px; margin-bottom: 15px;} / <------------- Footer ----------- */ footer { display: flex; flex-direction: column; text-align: center; background-image: url("bg.jpg"); width: 100%; color: white; height: 300px; } footer p{ font-size: 13px; align-self: center;} .logo_rodape { align-self: top; transform: scale(0.5); margin-bottom: -80px; filter: invert(1);} .logo_rodape:hover{ filter: invert(0.5) sepia(1);}