- Personalizando o rodapé do site No meu site, personalizei o rodapé para que ele ficasse visualmente agradável e com as especificações pedidas. Adicionei o seguinte código no HTML e no CSS:
HTML:
html Copiar Editar
Todos os direitos reservados © 2025
CSS:css Copiar Editar .rodape { background-color: #22D4FD; / Fundo azul claro / color: #000000; / Texto preto / text-align: center; / Centraliza o texto / font-family: 'Montserrat', sans-serif; / Fonte Montserrat / font-size: 24px; / Tamanho do texto / font-weight: 400; / Peso da fonte / padding: 24px; / Espaçamento interno / } O resultado ficou bem limpo e com uma aparência profissional!
- Ajustando o espaçamento interno da apresentação Percebi que os elementos da seção .apresentacao estavam muito próximos das bordas, então substituí o margin por padding para ajustar o espaçamento interno. Comecei com 5%, mas fui testando até encontrar o valor ideal.
CSS:
css Copiar Editar .apresentacao { padding: 5%; / Espaçamento interno ajustado / background-color: #f4f4f4; / Adicionei uma cor de fundo leve / text-align: left; / Mantive o alinhamento à esquerda / } Agora os elementos estão mais equilibrados na página e com um espaço confortável.
- Removendo o height para adaptar o layout Eu percebi que a propriedade height: 100vh no body estava limitando o layout, então comentei essa linha no CSS e observei o impacto:
CSS:
css Copiar Editar body { / height: 100vh; / / Comentado para ajustar o layout / margin: 0; padding: 0; } Com essa mudança, o conteúdo se ajusta corretamente e o rodapé aparece na posição ideal, mesmo quando adiciono novos elementos.
- Estilizando o cabeçalho com CSS No cabeçalho, ajustei os links "Home" e "Sobre mim" para ficarem alinhados horizontalmente e com um visual moderno. Além disso, adicionei um efeito de hover para destacar os links.
HTML:
html Copiar Editar
CSS:css Copiar Editar .cabecalho { background-color: #ffffff; / Fundo branco / padding: 16px 32px; / Espaçamento interno / box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / Sombra leve / }
.menu { display: flex; / Links alinhados horizontalmente / justify-content: flex-end; / Alinhamento à direita / list-style: none; / Sem marcadores / margin: 0; padding: 0; gap: 24px; / Espaçamento entre os links / }
.menu li a { text-decoration: none; / Remove sublinhado / color: #333; / Cor do texto / font-size: 18px; / Tamanho da fonte / transition: color 0.3s ease; / Transição suave / }
.menu li a:hover { color: #22D4FD; / Altera a cor no hover / } Agora o cabeçalho ficou bem organizado e com um toque mais dinâmico ao passar o mouse pelos links.
- Ajustando o espaçamento interno dos links Percebi que os links do cabeçalho estavam muito próximos um do outro, então ajustei o padding para melhorar a legibilidade e a estética.
CSS atualizado:
css Copiar Editar .menu li a { padding: 8px 16px; / Espaçamento interno ajustado / } Com isso, o cabeçalho ficou mais espaçoso e os links ficaram ainda mais fáceis de interagir.*
