Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Only with CSS Flexbox

#accessibility
Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'am very happy! I think this is my best work! Step by step I'am learning! And this community has helped me a lot! Thank you all so much!

Community feedback

Lucas 👾 104,580

@correlucas

Posted

OI Tathiany parabéns pelo seu novo desafio!

Dei uma olhada no seu código e tenho umas dicas pra você.

Ficou faltando o fundo da ondinha, nesse caso é melhor fazer o import dele no body com background-image e colocar um media query pra trocar de mobile / desktop ou usar tag <picture> no HTML.

Vi que você usou id como seletor, mas uma boa prática seria manipular todo design com classes e deixar o id pra formulários e Javascript.

Parabéns, desde seu primeiro projeto, seus desafios tem ficado cada vez melhor.

Continue no foco 👏👏

Marked as helpful

1

Lucas 👾 104,580

@correlucas

Posted

@tathykanashiro Tathiany, mas na real sua solução já estava funcionando certinho, esse era só um ajuste fino, o importante era o site estar mostrando a solução toda montadinha e completa, essas coisas que eu te falei eram mais pra ajudar em questão de SEO/boas práticas, não se preocupe tanto. Já estava muito boa!

0
Elaine 11,420

@elaineleung

Posted

Great job Tathiany, really proud of you, and glad to hear that the FEM community is giving you the help and encouragement you need! 😊 I don't really have any feedback, just mainly wanted to say excellent work here, both for your card's design and your CSS. Good use of custom variables also! You can try adding more variables too, say if you have two font families, you can use a --ff-primary and --ff-secondary for them (ff is short for font family).

Keep going, you're doing great!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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