[Projeto] Final HMTL & CSS | HTML e CSS: cabeçalho, footer e variáveis CSS

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Inicial</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
     <header class="cabecalho"> <!--cabeçalho-->
        <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">
        <section class="apresentacao__conteudo"> <!--conteúdo principal-->
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <span class="titulo-destaque">com um Front-end de qualidade!</span></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou João Ferreira, desenvolvedor Front-end com especialidade em JavaScript, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="www.instagram.com/joaovf__/"> <img src="./assets/insta.png" class="icone_aplicativos" alt="ícone instagram"> Instagram</a> <!--botão ancora-->
                <a class="apresentacao__links__link" href="https://github.com/joaoferreiral"><img src="./assets/git.png" class="icone_aplicativos" alt="ícone github">Github</a>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/joãoferreiral/"> <img src="./assets/linkedin1.png" class="icone_aplicativos" alt="ícone linkedin"> LinkedIn</a>
            </div>
            </section>
        <img class="fotoperfil" src="./assets/eu.png" alt="Minha foto de perfil">
    </main> 
     <footer class="rodape"> <!--rodapé-->
        <p>Desenvolvido por João Ferreira.</p>
     </footer> 
</body>
</html>

style.css

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

:root { /* CRIANDO VARIÁVEIS*/
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;

    --fonte-primaria: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
} 

body {
    /* height: 100vh; */
    background-color: var(--cor-primaria);
    box-sizing: border-box;
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 1.4% 0 0 15%;
}

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

.cabecalho__menu__link {
    font-family: var(--fonte-secundaria);
    font-size: 20px;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;

}

.apresentacao { /*usa (.) para CLASSES*/
    padding: 2% 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 21.5px;
}

.apresentacao__conteudo__titulo {
    font-size: 22.5px;
    font-family: var(--fonte-primaria);
}

.titulo-destaque{
    color: var(--cor-terciaria);
    /*border: 1px solid #22D4FD;*/
}

.apresentacao__conteudo__texto {
    font-size: 16.5px;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 19px;
}

.apresentacao__links__link {
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 220px;
    text-align: center;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

.icone_aplicativos{
    width: 19px;
    height: 19px;
}

.apresentacao__links__link:hover {
    background-color: var(--cor-hover);
}

.fotoperfil {
    width: 340px;
    border-radius: 38px;
}

.fotoperfil {
    box-sizing: border-box;
    border: 2px solid var(--cor-terciaria);
    border-radius: 38px;
}
.rodape {
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 16px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 17px;
    font-weight: 400;
}