@R3ygoski
Posted
Olá novamente Lucas, e mais uma vez, meus parabéns, seu projeto ficou simplesmente perfeito, ele está muito bem alinhado com o design proposto.
Gostaria de dar algumas sugestões sobre a parte da responsividade do seu projeto, ele aparentemente está responsivo apenas para telas entre 320px até 1440px, digo isso porque, ao 1600px (largura do meu monitor), algumas partes ficam cortadas, como o caso da imagem do monitor, e a imagem de background no header. para corrigir isso da imagem de background você pode considerar adicionar background-size: contain;, dessa forma a imagem irá cobrir todo o <header> e já ficara boa para telas maiores.
Já sobre a imagem do monitor que ficou cortada, isso está acontecendo porque você delimitou um tamanho máximo pro body, aumentar o max-width dele para 100%, irá corrigir isso, mas daí terá que fazer algumas alterações na imagem do tablet, e para corrigir você pode tentar fazer o seguinte:
.mobile-benefits {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
E remover o padding do .mobile-benefits img.
Agora sobre a parte de semântica, ela está muito boa, só há algumas pequenas partes que não estão semântica, por exemplo essa aqui: <div class="downloads">, o mais correto dela seria uma <section>, porque os botões são tematicamente iguais, agora a <div> serve para algo mais genérico. Suponhamos que tivesse esses 2 botões, um texto falando sobre uma pessoa, e um pequeno artigo que não fosse referente nem ao botão e nem ao texto. Aí o correto seria usar uma <div>, pois esse conteúdo não tem ligação temática e é muito genérico.
E novamente meus parabéns, você tem um bom olho pra fazer o alinhamento com o design, e você vem evoluindo bem. Se algo ficou confuso, já sabe, só perguntar abaixo.
Marked as helpful
@LGfariaZ
Posted
@R3ygoski Olá mais uma vez Bernardo, obrigado pelo feedback!!
Então, as imagens cortadas tanto do background quanto do monitor, deixei dessa forma pra ficar fiel ao projeto, mas como você falou acho que faz muito mais sentido elas extrapolem o limite dos 1440px em telas maiores, vou procurar consertar isso.
A section de download também é uma ótima dica, nem passou pela minha cabeça.
Sobre o olho bom, eu uso uma extensão do navegador que me ajuda bastante pois consigo colocar uma camada com a imagem do design por cima da tela, assim consigo calcular melhor tamanhos de fonte, espaçamento e etc.
Obrigado novamente!
