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 CSS Grid

#bem#semantic-ui
Jason Heys 175

@heyitsgany

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 could use some advice on the box-shadows in the design. I struggled with having the shadow ONLY at the bottom of the card (and not leaking out the sides like it is). Any tips?

Community feedback

Account Deleted

Nice one, your solution looks pretty good, and dealing with the box-shadow doesn't have to be hard, it's actually pretty simple;

  • lets say you a div with a box-shadow;
div{
width:100px;
height:100px;
box-shadow: 10px 10px 10px 10px;
}
  1. The first value will add a box-shadow on the x-axis/left and right/on the sides. The value can either be negative or positive. If it's negative it'll be on the left(before the div) and if it's positive it'll be on the right(after the div).
  2. The second value deals with the y-axis/top and bottom. It's the same as the first one, a negative will add a box-shadow at top and positive value will add it a the bottom.
  3. The third value controls the blur.
  4. The last value adds it on all sides.
  5. You can also add a color at the end if you want it to be a certain color.

Hope it's not complicated... Keep coding👍.

Marked as helpful

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