Design comparison
Solution retrospective
EN: This was one of the challenges that seemed to be easier than they really are. As long as I did the mobile part, everything went well. However, when starting to work with the desktop version I had a little difficulty getting the size of the cards and the elements inside them (image and text) to be adjusted according to the resolution. For now, the closest I could get to the goal was this, but I'll study more so that I can adjust this in the future and don't have so much difficulty in the next challenges!
Feel free to leave any feedback about the solution or the code! Thank you very much in advance!
PT: Esse foi um dos desafios que pareciam ser mais fáceis do que realmente são. Enquanto fazia a parte do mobile, tudo ocorria bem. Porém, ao começar as trabalhar com a versão desktop eu tive um pouco de dificuldade em fazer com que o tamanho dos cards e os elementos dentro deles (imagem e texto) ficassem ajustados conforme a resolução. Por hora, o mais próximo que consegui chegar do objetivo foi isso, mas vou estudar mais para que eu que consiga ajustar isso futuramente e não tenha tanta dificuldade nos próximos desafios!
Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!
Community feedback
- @correlucasPosted about 2 years ago
👾Fala Luciano, tudo bem? Parabéns pelo desafio!
Esse tutorial aqui vai te dar o passo a passo do zero pra fazer esse desafio ficar 100% igual e além de explicar a maioria das propriedades de
GRID
:https://www.youtube.com/watch?v=rg7Fvvl3taU
vc tem que adicionar o background cinza no body pra ele pegar a tela toda, nesse site atual ele nao pega a largura toda.
Seu html está funcionando, mas você pode melhorá-lo usando tags semânticas e substituir os divs, por exemplo, o parágrafo com a citação a tag de marcação
<blockquote>
desta forma você irá envolver cada bloco de elemento com a melhor tag. Lembre-se<div>
é apenas um elemento de bloco sem nenhum significado.Aqui um guia com todas tags semanticas: https://www.w3schools.com/TAgs/default.asp
👋 Espero ter ajudado e continue no foco!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord