html-css-cabecalho-footer-variaveis-css - 07 Lista de exercícios | HTML e CSS: cabeçalho, footer e variáveis CSS

1.Estilizando o cabeçalho com CSS
css:

.cabecalho {
  padding: 20px 15%;
  background-color: #000000;
}

.cabecalho__menu {
  display: flex;
  gap: 32px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.cabecalho__menu__link {
  text-decoration: none; 
  color: #F6F6F6;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: 0.3s;
}

.cabecalho__menu__link:hover {
  background-color: #22D4FD;
  color: #000000;
}

2.Ajustando o espaçamento do conteúdo
css:

.apresentacao {
  padding: 5% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

3.Criando e navegando para a página "Sobre mim"
No about.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sobre mim</title>
  <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
  <header class="cabecalho">
    <nav class="cabecalho__menu">
      <a class="cabecalho__menu__link" href="index.html">Home</a>
      <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
    </nav>
  </header>

  <main class="apresentacao">
    <h1>Sobre mim</h1>
    <p>Aqui você escreve seu texto...</p>
  </main>

  <footer class="rodape">
    <p>Desenvolvido por John Lenon Nogueira.</p>
  </footer>
</body>
</html>

No index.html:
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
4.Ajustando a estilização após reorganização de arquivos
O css foi para styles/styles.css, atualizei todos os HTMLs:
<link rel="stylesheet" href="./styles/styles.css">
css:

.cabecalho__menu__link {
  text-decoration: none;
}

5.Estruturando a página "Sobre mim" com cabeçalho e rodapé
Copiado do index.html o <header> e <footer> e colei no about.html.

<main>
  <!-- conteúdo futuro aqui -->
</main>

6.Importando e corrigindo o caminho do arquivo CSS na página "Sobre mim"
about.html:
<link rel="stylesheet" href="./styles/styles.css">