Atividade 01
Na primeira atividade, eu comecei marcando o rodapé no HTML com um texto por meio de um parágrafo para especificar quem foi o desenvolvedor do site:
index.html
<footer class="rodape">
<p> Desenvolvido por Diego </p>
</footer>
Depois, eu parti para o CSS para fazer a estilização requisitada:
style.css
.rodape {
background-color: #22D4FD;
color: black;
text-align: center;
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
padding: 24px;
}
Atividade 02
Troquei a margem pelo padding e considerei que 5% já seria um valor ideal. Além disso, adicionei também um gap e um flex-wrap entre os elementos do próprio bloco para que o layout ficasse mais coeso e responsivo.
style.css
.apresentacao {
/*Resto das Propriedades*/
padding: 5% 10%;
flex-wrap: wrap;
gap: 30px;
}
Atividade 03
Ao comentar essa linha, percebi que o body, que antes ocupava apenas 100% da viewport do usuário, agora também foi expandido para exibir o footer, que ficava abaixo da área visível da viewport.
Atividade 04 - 05
Nessa atividade, comecei marcando todo o cabeçalho e a navbar no HTML:
index.html
<header class="cabecalho">
<nav class="cabecalho__links">
<a class="cabecalho__links__texto" href=""> Home </a>
<a class="cabecalho__links__texto" href=""> Sobre Mim </a>
</nav>
</header>
Eu defini uma altura padrão para o cabeçalho equivalente a 5% da viewport. Para os elementos dentro do cabeçalho, defini a fonte Montserrat com peso 600 e tamanho 16px, ocupando 100% do espaço disponível do cabeçalho. Criei uma flexbox com gap de 16 pixels entre os elementos e uma margem de 1% na parte superior e 16% nas laterais para proporcionar um bom posicionamento.
Depois, removi a decoração do texto e defini a cor como preta. Também apliquei um padding de 16px para que os elementos tivessem espaço durante o hover. Por fim, implementei um efeito de hover que não consistia apenas em uma mudança de cor, mas também na criação de uma borda inferior no link, por ser uma forma mais moderna de representar esse efeito nesse estilo de documento.
style.css
.cabecalho {
height: 5vh;
}
.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;
}
.cabecalho__links__texto:hover {
border-bottom: 2px solid black;
}
