1 - Personalizando o rodapé do seu site
HTML:
<footer class = "rodape">
<p> Desenvolvido por Victor. </p>
</footer>
CSS:
.rodape {
background-color: #22D4FD;
color: #000000;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 400;
text-align: center;
padding: 24px;
}
2 - Ajustando o espaçamento interno da apresentação
CSS:
.apresentacao {
padding: 7% 18%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
3 - Removendo o height para adaptar o layout
CSS:
body {
/* height: 100vh;*/
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}
Nota: eu não vi nenhuma diferença, mas ok kkkk
4 - Estilizando o cabeçalho com CSS
HTML:
<header class = "cabecalho">
<nav class = "cabecalho__navegacao">
<a class = "cabecalho__navegacao__link"> Home </a>
<a class = "cabecalho__navegacao__link"> Sobre Mim </a>
</nav>
</header>
CSS:
.cabecalho__navegacao {
padding: 3% 18%;
display: flex;
flex-direction: row;
}
.cabecalho__navegacao__link {
color: #22D4FD;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
}
.cabecalho__navegacao__link:hover {
border: solid 2px #22D4FD;
border-radius: 8px;
padding: 4px;
color: #F6F6F6;
background-color: #22D4FD;
cursor: pointer;
}
Nota: Eu fiz desse jeito, a correção estava um pouco confusa.
5 - Ajustando o espaçamento interno dos links
CSS:
.cabecalho__navegacao {
padding: 3% 18%;
display: flex;
flex-direction: row;
gap: 80px;
}
.cabecalho__navegacao__link {
color: #22D4FD;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
}
.cabecalho__navegacao__link:hover {
border: solid 2px #22D4FD;
border-radius: 8px;
padding: 4px;
color: #F6F6F6;
background-color: #22D4FD;
cursor: pointer;
}