Lista de exercícios 03

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%;
}

Fala, Christopher! Tudo bom?

Agradeço por trazer sua solução para o fórum!

Curti demais como trabalhou a estilização do footer para dar identidade visual em CSS, entendeu perfeitamente a importância da substituição de margin por padding para controlar o espaçamento interno e usou bem a flexbox no cabeçalho para alinhar os links de forma moderna e responsiva.

Algo bem legal para complementar é ajustar o valor da propriedade gap no cabeçalho, já que atualmente está sem unidade. O correto seria:

.cabeçalho__menu {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 80px; /* unidade px adicionada */
}

Isso faz com que o espaçamento seja aplicado corretamente entre os links.

E algumas boas práticas que você pode adotar são:

Legibilidade: comentar trechos de código para lembrar a função de cada seletor.
Consistência: sempre incluir unidades (px, %, em) em valores numéricos no CSS.
Acessibilidade: garantir contraste adequado entre texto e fundo para melhor leitura.

Continue postando as suas soluções! Além de ganhar pontos de XP na plataforma, você pode ajudar outros estudantes no fórum.

Conteúdos relacionados

Ah, uma pergunta: você prefere evoluir esse layout para algo mais minimalista com foco em tipografia ou já pensa em incluir animações sutis nos links e botões para dar mais dinamismo?

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Importante

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP