- Adicionando conteúdo à página "Sobre mim" Abra o arquivo about.html e adicione o conteúdo principal:
html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre mim</title>
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<header>
<h1 class="apresentacao__conteudo__titulo">Portfólio de [Seu Nome]</h1>
<nav>
<a href="index.html" class="cabecalho__link">Home</a>
<a href="about.html" class="cabecalho__link">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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia nulla nec erat gravida, et tempor nisi sagittis.</p>
<p class="apresentacao__conteudo__texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia nulla nec erat gravida, et tempor nisi sagittis.</p>
<img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
</section>
</main>
<footer>
<p>© 2025 [Seu Nome]. Todos os direitos reservados.</p>
</footer>
</body>
</html>
- Aplicando estilos à página "Sobre mim" No arquivo styles.css, adicione as classes apropriadas:
css
.apresentacao__conteudo {
display: flex;
flex-direction: column;
align-items: center;
}
.apresentacao__conteudo__titulo {
font-family: 'Krona One', sans-serif;
font-size: 2em;
color: var(--cor-primaria);
}
.apresentacao__conteudo__texto {
font-family: 'Montserrat', sans-serif;
font-size: 1em;
color: var(--cor-secundaria);
margin-bottom: 10px;
}
.apresentacao__conteudo img {
max-width: 100%;
height: auto;
}
- Definindo variáveis de cores no CSS No arquivo styles.css, defina as variáveis globais no início do arquivo:
css
:root {
--cor-primaria: #000000;
--cor-secundaria: #F6F6F6;
--cor-terciaria: #22D4FD;
}
- Aplicando as variáveis de cores no projeto Substitua todas as ocorrências das cores hexadecimais pelas variáveis no arquivo styles.css:
css
body {
font-family: 'Montserrat', sans-serif;
/* height: 100vh; */
margin: 0;
background-color: var(--cor-secundaria);
color: var(--cor-primaria);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header {
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
padding: 20px 0;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav {
display: flex;
gap: 20px; /* Espaçamento entre os links */
}
.cabecalho__link {
font-size: 18px;
color: var(--cor-secundaria);
text-decoration: none;
padding: 10px 20px; /* Espaçamento interno dos links */
}
.cabecalho__link:hover {
color: var(--cor-terciaria); /* Cor dos links ao passar o mouse */
}
section {
padding: 20px;
margin: 20px 0;
}
footer {
background-color: var(--cor-terciaria); /* Fundo azul claro */
color: var(--cor-primaria); /* Texto preto */
text-align: center; /* Texto centralizado */
font-family: 'Montserrat', sans-serif; /* Fonte Montserrat */
font-size: 24px; /* Tamanho da fonte */
font-weight: 400; /* Peso da fonte */
padding: 24px; /* Espaçamento interno */
}
h1, h2 {
color: var(--cor-primaria);
}
p {
font-size: 16px;
line-height: 1.5;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
a {
color: var(--cor-primaria);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.apresentacao {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5%; /* Espaçamento interno ajustável */
}
.apresentacao__conteudo {
width: 60%; /* Ajuste conforme necessário baseado no design do Figma */
}
.apresentacao__conteudo__titulo {
font-family: 'Krona One', sans-serif;
font-size: 2em; /* Ajuste conforme necessário baseado no design do Figma */
}
.apresentacao__conteudo__texto {
font-family: 'Montserrat', sans-serif;
font-size: 1em; /* Ajuste conforme necessário baseado no design do Figma */
}
.botoes {
display: flex;
justify-content: space-between;
margin: 10%;
}
.botao {
padding: 15px 30px; /* Ajuste conforme necessário */
margin: 0 10px;
font-size: 16px;
border-radius: 5px;
}
.botao-comum {
background-color: var(--cor-terciaria);
color: var(--cor-secundaria); /*
