Order Summary Card

Community feedback

• 

  Julian Krüger•100

  @juliankruger

  Posted over 3 years ago

  Hi Tyra,

  nice job on the challenge, looks good!

  Regarding the box-shadow: The challenge presented a very subtle shadow and your solution is already on the right track. There are four values: the first value, x-offset is 0, because you only want to push the shadow down a bit, not to the side. The second one is the y-offset, which pushes it down. That is correct.

  Then the blur-radius and the spread-radius become important: A nice tip for a subtle box-shadow is a negative spread-radius. Your fourth value, the spread-radius, is 0, you could try a negative value, like the same or half of the third value and adjust the second and third values along the way. Try around a bit, you also used two colors, maybe try it with one first.

  Another tip: You can look into the report on the solution page, it tells you about HTML and Accessibility issues. It might seem like a lot at first but there are usually easy fixes and there is a lot to learn about HTML structure and Accessibility. This site takes great care of you in that regard. (One easy fix, for example: You replace the bottom div-tag with a footer-tag)

  I hope that helps, have a nice day! :)

  Greetings!

  10
• 

  P

  David Turner•4,130

  @brodiewebdt

  Posted over 3 years ago

  In the Figma file the settings are: box-shadow: 0px 40px 40px -20px rgba(13, 48, 189, .15)

  Add alternate text to your images. It can stay empty since they are decorations. Wrap your card div in a Main tag, change the Order Summary to an H1. You may have to re-style it to look the same as in the design. Change the attribution div to a footer and it will clear the accessibility warnings.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  00
• 

  Robert Rynard•560

  @Robert-Rynard

  Posted over 3 years ago

  What did you feel you were struggling with the box-shadow? If you are trying to have more shadow on the bottom and less on the side you can use a negative spread-radius to bring in all sides and then move it further down the y axis.

  00