Design comparison
Solution retrospective
PT-BR
- Estou satisfeita com o resultado, no entanto, tive bastante dificuldade em ajustar o arredondamento das bordas da imagem principal utilizando o
border-radius
.
EN
- I am satisfied with the result, however, I had a lot of difficulty adjusting the rounding of the edges of the main image using
border-radius
.
PT-BR
- O posicionamento do elemento central ainda é um desafio, não tenho ainda convicção dos tamanhos para dispor o elemento central na tela, ou fica muito pequeno ou muito grande com relação ao modelo a ser seguido.
EN
- The positioning of the central element is still a challenge, I'm still not sure of the sizes to arrange the central element on the screen, it's either too small or too large in relation to the model to be followed.
PT-BR
- Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.
EN
- Any feedback is welcome so that I can improve my skills.
Community feedback
- @R3ygoskiPosted about 2 months ago
Olá novamente Andressa, mais uma vez, parabéns por concluir um desafio.
Você mencionou ainda não se sentir confortável com o alinhamento dos elementos no centro da tela, acredito eu que você estava se referindo ao card correto? Se for relacionado ao Card, você fez de forma correta, que foi utilizando o Flex na
<body>
, mas uma pequena sugestão, no seu body, ao invés de utilizarmargin
, opte por usar as seguintes props:height: 100vh; /* Isso fará com que a altura do elemento fique 100% da altura da tela */ align-items: center; /* Isso fará com que o card fique alinhado verticalmente na tela */
Agora, para fazer sua solução ficar semelhante ao design do desafio, eu recomendo utilizar algumas extensões no seu navegador, como o PerfectPixel, ele permite que você faça uma comparação da imagem do desafio com o seu projeto, e isso ajuda a deixar o mais próximo possível do design.
E quanto a semântica do seu HTML, ela está muito bem-feita, parabéns. A única sugestão que eu daria é trocar o
div.annual-plan
porsection
, mas de resto está muito bem.E acho que é isso, novamente parabéns, qualquer dúvida que venha a surgir quanto ao que eu disse, ou caso tenha alguma dúvida que você teve e eu não respondi, então por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Marked as helpful0 - @andressakarenPosted about 1 month ago
Oii, muito obrigada pela mensagem. Inclusive, novamente me ajudou nos desafios que eu estou fazendo. Usei essas propriedades e foi bem mais tranquilo trabalhar dessa forma.
Não consegui utilizar a extensão que me sugeriu ainda. Mas vou colocar aqui no meu navegador e usar nos próximos. Novamente agradeço bastante pelos seus comentários.
1
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