Olá, tudo bem?
Em relação à responsividade, você pode adicionar a propriedade flex-wrap com o valor wrap na classe cabecalho__menu em seu media-query. Essa propriedade permite que haja uma quebra de linha quando os itens dentro do cabeçalho ultrapassarem o espaço dele. Você pode conhecer melhor essa propriedade acessando aqui a documentação. Fica assim:
@media (max-width: 1200px) {
.cabecalho {
padding: 10%;
}
.cabecalho__menu {
justify-content: center;
flex-wrap: wrap;
}
Quanto ao botão de cópia de e-mail, achei que você implementou de um jeito muito legal, eu só colocaria um width: 100%; na sua classe .apresentacao__links__email para que os ícones também fiquem dentro da borda, mas aí já é uma questão de gosto pessoal :)
Parabéns pela dedicação em ir além do conteúdo mostrado em curso para aprender a fazer isso e também parabéns pela criatividade nas páginas do seu portfólio!
Quanto ao tamanho da imagem da página de contato, percebi que o tamanho está ficando pequeno por conta da propriedade width: 50%; que foi atribuída na classe apresentacao__gif. Recomendo que remova essa propriedade para que a imagem fique no tamanho padrão. Ao fazer isso, é provável que os links das redes sociais da Home também fiquem um pouco bagunçados, mas para corrigir, basta alterar o width: 50%; para width: 60%; na classe apresentacao__links__navegacao.
Para alinhar os ícones da Home, você precisa ter em mente que, como foi aplicado o justify-content: center, tanto o texto como ícone irão ficar alinhados ao centro, por isso os ícones não ficam um embaixo do outro. Uma possível solução para isso seria aplicar na classe .apresentacao__links__navegacao um justify-content: start; que vai alinhar todos os ícones ao começo da div e depois aplicar no padding padding: 20px 20px; para que os ícones não fiquem colados na borda.
Espero que essas dicas tenham sido úteis para você. Se tiver mais dúvidas, fique à vontade para perguntar.
Um abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
