[Projeto] Desafio Currículo | HTML e CSS: cabeçalho, footer e variáveis CSS

Resolvi criar uma página com minhas habilidades que pretendo aprender e os certificados da alura.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minhas Habilidades</title>
    <link href="./styles/style.css" rel="stylesheet">
</head>
<body>
    <!-- Cabeçalho do site -->
    <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>
            <a class="cabecalho__menu__link" href="myskills.html">Minhas Habilidades</a>
        </nav>
    </header>
    <!-- Conteúdo principal -->
    <main class="apresentacao">
        <section class="apresentacao__conteudo__skills">
            <h1 class="apresentacao__conteudo__titulo">Conheça Minhas Habilidades</h1>

            <h2 class="apresentacao__conteudo__subtitulo">Habilidades:</h2>
            <ul class="apresentacao__conteudo__lista"> 
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>React</li>
                <li>Node.js</li>
            </ul>

            <h2 class="apresentacao__conteudo__subtitulo">Certificados:</h2>
            <ul class="apresentacao__conteudo__lista"> 
                <li>
                    <p>Alura - </p>
                    <a href="https://cursos.alura.com.br/certificate/133a740e-a3b1-46bc-932b-0e10bae0c5ca?lang=pt_BR">Ambientes e Estrutura</a>
                </li>
                <li>
                    <p>Alura - </p>
                    <a href="https://cursos.alura.com.br/certificate/342bb0da-08ac-4db7-a38e-b62c6cfe1e27?lang=pt_BR">Classes e Flexbox</a>
                </li>
                <li>
                    <p>Alura - </p>
                    <a href="#">Cabeçalho e Variáveis CSS</a>
                </li>
            </ul>
            
        </section>

        <!-- Imagem de perfil -->
        <img class="foto__skills" src="./imagens/Foto IA.png" alt="Foto de perfil de Fabricio de Oliveira feita com IA">
    </main>
    
    <!-- Rodapé -->
    <footer class="rodape">
        <p>Desenvolvido por Fabra Oliveira.</p>
    </footer>    
</body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Garante um layout consistente */
}

body {
  background-color: #000000;
  color: #f6f6f6;
  font-family: "Montserrat", sans-serif;
}

/* Cabeçalho */
.cabecalho {
  padding: 2% 0 0 15%;
}

.cabecalho__menu {
  display: flex;
  gap: 80px;
}

.cabecalho__menu__link {
  font-size: 24px;
  font-weight: 600;
  color: #22d4fd;
  text-decoration: none;
}

/* Apresentação */
.apresentacao {
  padding: 5% 15%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.apresentacao__conteudo__skills {
  width: 615px;
  display: flex;
  flex-direction: column;
}

/* Títulos */
.apresentacao__conteudo__titulo {
  font-size: 36px;
  font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__subtitulo {
  font-size: 25px;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  color: #22d4fd;
  margin-top: 50px;
  margin-bottom: 10px;
}

/* Listas */
.apresentacao__conteudo__lista {
  padding: 2% 0 0 5%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apresentacao__conteudo__lista li {
  font-size: 17px;
  font-weight: 100;
  color: #f6f6f6;
}

.apresentacao__conteudo__lista li a {
  text-decoration: none;
  color: #22d4fd;
  font-weight: 400;
}

.apresentacao__conteudo__lista li a:hover {
  text-decoration: underline;
  color: #f6f6f6;
}

.apresentacao__conteudo__lista li p {
  display: inline;
  margin: 0;
}

/* Imagem */
.foto__skills {
  max-width: 100%; /* Garante que a imagem seja responsiva */
  height: auto;
  margin-top: 20px;
}

/* Rodapé */
.rodape {
  padding: 24px;
  color: #000000;
  background-color: #22d4fd;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
}

![]( Print da pagina web do projeto curriculo )