1- Adicionando conteúdo à página "Sobre mim":
<!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>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"></p>
<p class="apresentacao__conteudo__texto"></p>
</section>
<img src="./assets/imagem.png" alt="Foto de Wallace Ribeiro programando">
</main>
<footer class="rodape">
<p>Desenvolvido por Wallace RBR.</p>
</footer>
</body>
</html>
2- Aplicando estilos à página "Sobre mim":
<!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>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">texto</p>
<p class="apresentacao__conteudo__texto">texto</p>
</section>
<img src="./assets/imagem.png" alt="Foto de Wallace Ribeiro programando">
</main>
<footer class="rodape">
<p>Desenvolvido por Wallace RBR.</p>
</footer>
</body>
</html>
3- Definindo variáveis de cores no CSS:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
:root {
--cor-primaria: #000000;
--cor-secundaria: #F6F6F6;
--cor-terciaria: #22D4FD;
}
* {
margin: 0;
padding: 0;
}
//... restante do código
4- Aplicando as variáveis de cores no projeto:
body{
//... outros estilos
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
}
.cabecalho{
//... outros estilos
}
.cabecalho__menu{
//... outros estilos
}
.cabecalho__menu__link{
color: var(--cor-terciaria);
//... outros estilos
}
.apresentacao{
//... outros estilos
}
.apresentacao__conteudo{
//... outros estilos
}
.apresentacao__conteudo__titulo{
//... outros estilos
}
.titulo-destaque{
color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto{
//... outros estilos
}
.apresentacao__links{
//... outros estilos
}
.apresentacao__links__subtitulo{
//... outros estilos;
}
.apresentacao__links__link{
border: 2px solid var(--cor-terciaria);
color: var(--cor-secundaria);
//... outros estilos
}
.apresentacao__links__link:hover{
background-color: var(--cor-hover);
}
.rodape{
color: var(--cor-primaria);
background-color: var(--cor-terciaria);
//... outros estilos
}
5-Aplicando variáveis CSS para cores e fontes:
body{
//... outros estilos
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
.cabecalho__menu__link{
color: var(--cor-terciaria);
//... outros estilos
.titulo-destaque{
color: var(--cor-terciaria);
.apresentacao__links__link{
border: 2px solid var(--cor-terciaria);
color: var(--cor-secundaria);
//... outros estilos
}
.apresentacao__links__link:hover{
background-color: var(--cor-hover);
}
.rodape{
color: var(--cor-primaria);
background-color: var(--cor-terciaria);
//... outros estilos
}
6- Testando a flexibilidade das variáveis CSS com uma nova paleta de cores:
:root {
--cor-primaria: #000000;
--cor-secundaria:#F7F7F7;
--cor-terciaria:#FFB22C;
--cor-hover: #854836;
