Blog Card using flexbox

Community feedback

• 

  tOnski86•240

  @tOnski86Posted 7 days ago

  Great attention to detail on the content spacing! If you want to implement the offset shadow, you can start learning pseudo-elements - in this case the ::after CSS class.

  I'll try to explain in pseudocode so you can hopefully understand it:

  1. Create an ::after pseudo-class to your card container (the whole white card)
  2. This ::after pseudo-class is an exact copy of your card, but you can style it in any way you want - in this case, you want to change this ::after card's:

  • color: dark grey,
  • border-radius: similar to the original card,
  • position: the ::after card should have position: absolute, and the white card position: relative
  • z-index: finally, just move this black card to the back using z-index of -1 and position top and left.

  Good luck and have fun!

  0