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

Card design using html and css

John Carsonβ€’ 50

@wppaing

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'm just a newbie. Feedbacks welcome and thanks you allπŸ’š

Community feedback

CyrusKabirβ€’ 1,885

@CyrusKabir

Posted

hello my dear friend β™₯ you did good and clean at all but here some problem :

  • your hover states it's not equal to main design ( in main design "change plan" button have not an underline, proceed payment color)
  • if you look to main design some the text are mute are some kind of gray ( i am bad in colors ) but in your card you just let them be black
  • in your plan card section your img is a little bit big and you can reduce both width and height for get closer to main design
  • also in plan card section you have a lot of space which is not needed and I think it's because of default styles in browsers and the solution is resting them. you can search about this term " default browser styles and how ignore them "

Marked as helpful

0
Md Ajmal Shadabβ€’ 410

@mdajmalshadab

Posted

Hey, that's a very good work for the first challenge, one thing I would like to pin point here is that you did not used the background image (wavy curve) that is shown in the original design.

Keep coding! Keep doing new challenges!😊

0

John Carsonβ€’ 50

@wppaing

Posted

@mdajmalshadab Thanks for your beneficent feedback. Now I updated my solution even if not the best.

0
Md Ajmal Shadabβ€’ 410

@mdajmalshadab

Posted

@wppaing use 'background-size: contain' inside your 'body' CSS property, so that background image can cover the whole page

Marked as helpful

0

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