Mão na massa 5****

Adicionando conteúdo à página "Sobre mim", 2) Aplicando estilos à página "Sobre mim", 3) Definindo variáveis de cores no CSS, 4) Aplicando as variáveis de cores no projeto, 5) Aplicando variáveis CSS para cores e fontes e 6) Testando a flexibilidade das variáveis CSS com uma nova paleta de cores. about.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>Portfólio - Sobre Mim</title>
    <link rel="stylesheet" href="/styles/style.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">
        <section class="apresentacao_conteudo">
            <h1 class="apresentacao_conteudo_titulo">Sobre Mim</h1>
            <p class="apresentacao_conteudo_texto">At vero eos et accusamus et iusto odio 
            dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, 
            similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et 
            dolorum fuga.</p>
            <p class="apresentacao_conteudo_texto">Et harum quidem rerum facilis est et 
            expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
            cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis 
            voluptas assumenda est, omnis dolor repellendus.Temporibus autem quibusdam et 
            aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates 
            repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
            aut perferendis doloribus asperiores ipsum delis forum birol parela maxime 
            infena. Excepteur sint occaecat cupidatat non.</p>
        </section>
        <img src="/assets/Imagem.png" alt="Foto de Joana
            Santos Programando">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Joana Santos da Alura. @copyright 2024</p>
    </footer>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cor-primaria: #000000;
    --cor-secundaria:#f6f6f6;
    --cor-tercearia: #22D4FD;
    --cor-hover: #272727;   

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

*{
    margin: 0;
    padding: 0;
}

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

.cabecalho_menu {
    display: flex;
    gap: 83px;
}

.cabecalho_menu_link {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-tercearia);
    text-decoration: none;
}

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

.titulo-destaque {
    color: var(--cor-tercearia);
}

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

.apresentacao_conteudo {
    width: 646px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 0 3.75% 0;
    
}

.apresentacao_conteudo_titulo {
    font-family: var(--fonte-primaria);
    font-size: 36px;
}

.apresentacao_conteudo_texto {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    text-align: justify;
}

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

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

.apresentacao_links_link {
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-tercearia);
    width: 378px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;      
    border-radius: 8px;
    padding: 21.5px 0;    
    text-decoration: none;
    font-family: var(--fonte-secundaria);
    color: var(--cor-secundaria);
}

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

.rodape {
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-tercearia);
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-weight: 400;
    font-size: 24px;
}