Oi, bom dia, tudo bem ? Eu fiquei em dúvida em relação ao padding na aula, no home e menu, usou o padding superior com uma porcentagem de 2%, que é o primeiro valor, e esse home e menu desceram um pouco e usou o padding superior naquela parte "eleve seu negócio", mas nesse segundo caso, o conteúdo ele subiu, e no primeiro caso ele desceu um pouco, é por conta que o home e menu estavam lá no topo por isso que ele desceu um pouco? Obrigado!
hoje, com a Alura e o Google Gemini
Oii Ruan, como você está?
Na aula, o padding superior de 2% foi aplicado no cabeçalho em geral, que inclui o menu e o bloco de texto da apresentação. Quando o padding é aplicado no cabeçalho, todo o conteúdo dentro dele é afetado, incluindo o menu. Por isso, o menu desceu um pouco. Já no bloco de texto da apresentação, o padding superior de 5% foi aplicado apenas nele, e não no cabeçalho inteiro. Antes, o padding era 15%, por isso ele subiu quando diminuímos pra 5%.
Espero ter esclarecido sua dúvida!
Abraços.
Estou bem também Entendi, ajudou sim Larissa, muito obrigado!
Bom dia
O padding no header simplismente não funciona já revisei o codigo, refiz a aula do 0 e nada
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Em Guarulhos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<herder class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link">Home</a>
<a class="cabecalho__menu__link">Sobre nós</a>
</nav>
</herder>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">O que você conhece da <strong class="titulo-destaque">sua cidade?</strong></h1>
<p class="apresentacao__conteudo__paragrafo">Conheça melhor sua cidade, com avaliações sem pegadinhas ou tranbiques, somos uma pagina independente, sem financiamento que mude a real opinião, todo nosso faturamento é gerado por ADS neste site</p>
<div class="apresentacao__link">
<h2 class="apresentacao__link_subtitulo">Acesse nossas Redes</h2>
<a class="apresentacao__links__link" href="https://www.instagram.com/emguarulhos">
<img src="assets/instagram.png" alt="Logo Instagram" width="30" height="30">
Instagram</a>
<a class="apresentacao__links__link" href="https://www.Facebook.com/emguarulhos">
<img src="assets/facebook.png" alt="Logo Facebook" width="30" height="30">
Facebook</a>
</div>
</section>
<img src="LOGO.png" alt="Logo Em Guarulhos">
</main>
<footer>
<p class="rodape">Desenvolvido por TK147 Marketing</p>
</footer>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap');
* {margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
background-color: #021e36;
color: #F6F6F6;
}
.cabecalho{
padding: 3% 0% 0% 15%;
}
.cabecalho__menu__link {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #22d4fd;
}
.apresentacao {
padding: 7% 20%;
display:flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo {
width: 500px;
display:flex;
flex-direction: column;
gap: 30px;
}
.apresentacao__conteudo__titulo {
font-size: 35px;
font-family: 'Montserrat', sans-serif;
}
.titulo-destaque {
color: #22d4fd
}
.apresentacao__conteudo__paragrafo {
font-size: 17px;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__link {
display:flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
gap: 15px;
}
.apresentacao__link_subtitulo {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.apresentacao__links__link {
display: flex;
justify-content: center;
gap: 16px;
width: 270px;
text-align: center;
border-radius: 10px;
font-size: 25px;
padding: 15px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
border: 2px solid #22d4fd;
}
.apresentacao__links__link:hover {
background-color: #22d4fd;
font-size: 27px;
}
.rodape {
background-color: #22d4fd;
color:black;
padding: 24px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
}
Oi Diego, como vai?
O problema está acontecendo por um errinho de sintaxe no HTML. A tag <header> está escrita <herder>. Por isso, ela não está sendo selecionada no CSS e o padding não está sendo aplicado.
Espero que solucione :)
Abraços!