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;
}
