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

responsive card using flex box

Nico Pomβ€’ 150

@NicoPom

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


Any advices guys please ?

Community feedback

Anosha Ahmedβ€’ 9,300

@anoshaahmed

Posted

Hey good job on this challenge! Wrap everything in your body in <main> ... OR use semantic tags! .... you can also give role="" to the direct children of your <body> but that's a little frowned upon... Read more here

Hope this helps :)

Marked as helpful

0

Nico Pomβ€’ 150

@NicoPom

Posted

@anoshaahmed alright thanks very much πŸ™‚

1
Rio Cantreβ€’ 9,690

@RioCantre

Posted

Hello there! Awesome job with this one. Viewing your solution, you did well on coding the design. I would suggest the following for you...

  • Add a background color to the .card__plan rule set , set the value with the same as the example design.
  • Adjust the padding value into padding: 20px;
  • Wrap the card with main tag and attribution with footer tag
  • Add also a padding inside the attribution to add space in between.

Overall, you did well in implementing the design and Keep up the good work!

Marked as helpful

0

Nico Pomβ€’ 150

@NicoPom

Posted

@RioCantre Thank you very much for your feedback. I'll look into it !

1
Rio Cantreβ€’ 9,690

@RioCantre

Posted

@NicoPom Great! To emphasize what I mean..it's like this...

.card__plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  margin: 15px;
  gap: 1rem;
  background: gray;
  border-radius: 5px;
  background: hsla(223, 10%, 83%, 0.79); (change the value of this one)
}

And I would appreciate it if you mark this as helpful. Cheers!

Marked as helpful

0
Nico Pomβ€’ 150

@NicoPom

Posted

@RioCantre yes i see I completely forgot the background of the plan yes.

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