Skip to content
Submitted about 2 months ago

Order summary component

Andressa Karen•100
@andressakaren
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.
What challenges did you encounter, and how did you overcome them?

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.
What specific areas of your project would you like help with?

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

  • Bernardo Poggioni•5,360
    @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 utilizar margin, 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 por section, 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 helpful
    0
  • Andressa Karen•100
    @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 GitHub

Join 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