**Código** ```html <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

Lista de Exercício | HTML e CSS: cabeçalho, footer e variáveis CSS

Código

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Site</title>
  <!-- Importando a fonte Montserrat -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <!-- Cabeçalho estilizado -->
  <header>
    <nav>
      <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#sobre">Sobre mim</a></li>
      </ul>
    </nav>
  </header>

  <!-- Seção de apresentação com espaçamento interno ajustado -->
  <section class="apresentacao">
    <h1>Bem-vindo ao meu site!</h1>
    <p>Aqui vai o conteúdo de apresentação, com espaçamento adequado para melhorar a estética.</p>
  </section>

  <!-- Rodapé personalizado -->
  <footer>
    <p>Este é o rodapé do site</p>
  </footer>
  
</body>
</html>

CSS (style.css)

/* 3) Removendo o height para adaptar o layout */
/* Comentamos a propriedade abaixo para que o conteúdo não seja restrito a 100vh */
/*
body {
  height: 100vh;
}
*/

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

/* 4) Estilizando o cabeçalho com CSS */
header {
  background-color: #f5f5f5;
  padding: 16px;
}

/* Menu de navegação centralizado e alinhado horizontalmente */
.menu {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* Espaçamento entre os itens do menu */
.menu li {
  margin: 0 12px;
}

/* 5) Ajustando o espaçamento interno dos links */
.menu li a {
  text-decoration: none;
  font-size: 18px;
  color: #333;
  padding: 8px 16px;  /* Espaçamento interno para que os links não fiquem muito próximos */
  transition: color 0.3s ease;
}

/* Hover para os links */
.menu li a:hover {
  color: #22D4FD;
}

/* 2) Ajustando o espaçamento interno da apresentação */
/* Substituindo margin por padding; o valor inicial é 5%, podendo ser ajustado conforme necessário */
.apresentacao {
  padding: 5%;
}

/* 1) Personalizando o rodapé do seu site */
footer {
  background-color: #22D4FD;
  color: #000000;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  padding: 24px;
}

Explicação

Rodapé Personalizado:
- Fundo: background-color: #22D4FD
- Cor do Texto: color: #000000
- Fonte: 'Montserrat' (já importada no HTML)
- Centralização do Texto: text-align: center
- Tamanho da Fonte e Peso: font-size: 24px; font-weight: 400
- Espaçamento Interno: padding: 24px
Espaçamento na Apresentação:
- Em .apresentacao foi definido padding: 5% para afastar o conteúdo das bordas. Esse valor pode ser ajustado conforme a necessidade visual.
Remoção do height: 100vh:
- A linha com height: 100vh foi comentada para que o conteúdo e o rodapé se adaptem dinamicamente à altura da página.
Estilização do Cabeçalho:
- O cabeçalho possui um fundo claro e os links são alinhados horizontalmente usando display: flex e justify-content: center.
- Os links possuem um espaçamento interno (padding: 8px 16px) e um efeito de hover que muda sua cor para #22D4FD.
Espaçamento Interno dos Links:
- Já ajustado nos estilos de .menu li a, garantindo que os links “Home” e “Sobre mim” tenham uma área de clique confortável e uma aparência moderna.

Este exemplo integra as cinco demandas solicitadas e pode ser testado localmente para visualizar os ajustes no layout do seu site. Basta copiar os códigos para os respectivos arquivos e abri-los em um navegador.