Atividade 01 - 02
Estilizei o cabeçalho e o desloquei 1,7% para o lado para que ele se alinhasse um pouco mais ao conteúdo:
style.css
.cabecalho {
height: 5vh;
padding-left: 1.7%;
}
.cabecalho__links {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 16px;
height: 100%;
display: flex;
flex-direction: row;
gap: 16px;
margin: 1% 16%;
}
.cabecalho__links__texto {
text-decoration: none;
color: black;
padding: 10px;
}
Atividade 03
Eu adicionei no href da tag âncora do "Sobre Mim" e do "Home" os links para ambas as páginas.
style.css
<header class="cabecalho">
<nav class="cabecalho__links">
<a class="cabecalho__links__texto" href="index.html"> Home </a>
<a class="cabecalho__links__texto" href="about.html"> Sobre Mim </a>
</nav>
</header>
Depois disso, eu criei um about.html com uma estrutura inicial simples:
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Sobre Mim</title>
</head>
<body>
<h1> Sobre Mim </h1>
</body>
</html>
Atividade 04
Atualizei a página de estilos. Eu já havia removido a decoração dos links:
index.html
<link rel="stylesheet" href="./styles/style.css">
Atividade 05 - 06
Adicionei o link do CSS, copiei o header e o footer e, por fim, criei um elemento main vazio:
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<link rel="stylesheet" href="./styles/style.css">
<title>Sobre Mim</title>
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__links">
<a class="cabecalho__links__texto" href="index.html"> Home </a>
<a class="cabecalho__links__texto" href="about.html"> Sobre Mim </a>
</nav>
</header>
<main></main>
<footer class="rodape">
<p> Desenvolvido por Diego </p>
</footer>
</body>
</html>
