html-css-cabecalho-footer-variaveis-css - 10 Lista de exercícios

1.Adicionando conteúdo à página "Sobre mim"
about.html:

<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Sobre Mim</h1>
        <p class="apresentacao__conteudo__texto">
            Sou Joana Santos, desenvolvedora Front-end apaixonada por criar interfaces intuitivas e funcionais. 
            Trabalho com React, HTML e CSS para transformar ideias em realidade digital.
        </p>
        <p class="apresentacao__conteudo__texto">
            Nos meus projetos busco sempre a melhor experiência para o usuário e performance no desenvolvimento. 
            Gosto de aprender novas tecnologias e compartilhar conhecimento com a comunidade.
        </p>
    </section>

    <img src="./assets/Imagem.png" alt="Foto da Joana Santos programando">
</main>

2.Aplicando estilos à página "Sobre mim"
css:

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

.apresentacao__conteudo {
    width: 100%;
    max-width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__texto {
    font-size: 24px;
}

3.Definindo variáveis de cores no CSS

css:
:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
}

4.Aplicando as variáveis de cores no projeto
css:

body {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    background-color: var(--cor-primaria);
}

.cabecalho__menu__link {
    color: var(--cor-secundaria);
}

.cabecalho__menu__link:hover {
    background-color: var(--cor-terciaria);
    color: var(--cor-primaria);
}

.cabecalho__menu__link.destaque {
    background-color: var(--cor-terciaria);
    color: var(--cor-secundaria);
}

.cabecalho__menu__link.destaque:hover {
    background-color: var(--cor-terciaria);
    color: var(--cor-primaria);
}

.apresentacao__links__link {
    border: 2px solid var(--cor-terciaria);
    color: var(--cor-secundaria);
}

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

.sobre-foto {
    border: 4px solid var(--cor-terciaria);
    box-shadow: 0 0 20px var(--cor-terciaria);
}

.sobre-nome, .sobre-titulo, .sobre-card h3 {
    color: var(--cor-terciaria);
}

.sobre-card {
    background-color: #111; 
    border: 1px solid var(--cor-terciaria);
    box-shadow: 0 0 15px rgba(34, 212, 253, 0.3);
}

.rodape {
    background-color: var(--cor-terciaria);
    color: var(--cor-primaria);
}

5.Aplicando variáveis CSS para cores e fontes

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --fonte-principal: "Montserrat", sans-serif;
    --fonte-secundaria: "Krona One", sans-serif;
}

6.Testando a flexibilidade das variáveis CSS com uma nova paleta de cores
css:

:root {
    --cor-primaria: #1E1E2F; 
    --cor-secundaria: #FFFFFF;
    --cor-terciaria: #FF6F61; 
    --fonte-principal: "Montserrat", sans-serif;
    --fonte-secundaria: "Krona One", sans-serif;
}