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

Order summary card with React and styled-components

limisie 30

@limisie

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@optimusprime202

Posted

Hey @limisie, Now you’ve figured it out.

0
Naveen Gumaste 10,460

@NaveenGumaste

Posted

Hay ! limisie Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

0
Dev Rathore 2,600

@GitHub-dev12345

Posted

Used this code want your card in center position :

in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

in Card Design CSS Code used this property: align-self: center;

I hope you find this helpful 😊

0

@guthierryschiavo

Posted

Hi! Good Job!

Put it in your <div class="sc-bdvvtl cAaCjL>

*CSS: --> background-size: contain;

And don't forget to put ":hover" in "Change", "Proceed to Payment" and "Cancel Order".

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