Atividade 01
Decidi iniciar a tarefa criando e estilizando o footer conforme as modificações requisitadas
css.
.rodape {
padding: 24px;
background-color: #22D4FD;
color: #000000;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}
Atividade 02
Apliquei a substituição da propriedade margin para padding no seletor de classe .apresentacao, começando a testar em 5% e parando no valor 10%, onde julguei ser o espaçamento mais apropriado.
css
.apresentacao{
padding: 10% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}
Atividade 03
Originalmente não notei nenhuma difereça, mas compreendi que o motivo era por conta de já ter efetuado a substituição de margin para padding na atividade anterior. Desfazendo as alteração da atividade anterior, 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
Implementei a estilização do cabeçalho conforme instruido; de forma que os links como Sobre mim e Home fiquem alinhados horizontalmente e com uma aparência moderna, usando justify-content, font-family, font-weight. Adicionei a propriedade gap com valor de 80 px (se baseando com o Figma) com o intúito de separar as ancoras. Decidi usar as propriedades como font-size, color, margin, padding, e display. Após isso, também adicionei um hover para alterar a cor dos links quando o mouse passar por cima.
css
.cabeçalho {
height: 5vh;
}
.cabeçalho__menu {
font-family: "Montserrat", sans-serif;
font-weight: 600;
display: flex;
justify-content: center;
gap: 80;
}
.cabeçalho__menu__links {
font-size: 18px;
color: #F6F6F6;
padding: 5px 10px;
margin-top: 2%;
}
.cabeçalho__menu__links:hover {
color: #22D4FD;
}
Atividade 05
Por fim, resolvi adicionar uma porcentagem maior com com os eixos para aumentar a distância dos links e da borda do topo da página
css
.cabeçalho__menu__links {
font-size: 18px;
color: #F6F6F6;
padding: 10px 15px;
margin-top: 2%;
}
