Submitted
@LucianoOliveira1
EN: In this challenge, I decided to do it differently from the previous ones, starting with mobile and I confess that it was much easier to work with the responsiveness adjustments. I will definitely adopt this for future projects!
This is my solution for the Huddle landing page with a single introductory section challenge. Feel free to leave any feedback about the solution or the code! Thank you very much in advance!
PT: Neste desafio, eu resolver fazer diferente dos anteriores começando pelo mobile e confesso que ficou bem mais fácil para trabalhar com os ajustes de responsividade. Com certeza adotarei isso para os próximos projetos!
Esta é a minha solução para o desafio Huddle landing page with a single introductory section. Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!
@correlucas
Posted
Fala Luciano, beleza? Parabéns pela sua nova solução!
Eu olhei o site da solução e gostei mto do jeito que vc montou a estrutura do HTML, uma coisa que dá pra melhorar é a largura do background svg que não tá cobrindo a tela toda, pra mudar isso vc pode usar background-size: contain ou background-size: cover.
Pra melhorar a semântica vc pode inserir os ícones das rede sociais com listas <ul><li>
Espero que ajude, continue no foco 👊
Marked as helpful
@elaineleung
Posted
Hi Luciano, glad that you used a mobile-first approach, and yes, it's quite life changing!
You did a lot of things well here, including using a container. One thing I suggest here is to use a limiting width to stop the main content from stretching too much on large screens (I'm viewing this on a large screen). To do that, try adding this to the .container:
.container {
width: min(100%, 100em); // feel free to experiment with this value!
margin-inline: auto;
}
Great work once again!
Marked as helpful
@AdrianoEscarabote
Posted
Ola @LucianoOliveira1, tudo bem?
Gostei bastante do resultado do seu layout, mas tenho algumas dicas que suponho que você gostará:
Observei que o layout não estava tão centralizado, fiz algumas alterações para arrumar isso:
body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; }
Percebi que a imagem de fundo estava quebrando, você pode arrumar dessa forma:
background-size: cover !important;
O resto está ótimo! Você efetuou um ótimo trabalho na responsividade do projeto.
Espero que ajude... 👍
Marked as helpful
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
