Responsive Blog card

Community feedback

• 

  Pierce Issah•120

  @PJIceskullPosted 11 months ago

  Hey @Lovethrech, your spacing is good but one major element that needs attention is the box shadow. The box-shadow's x and y positions are wrong and the color should be a solid black. An easy fix is setting the blur value (the third value in your box-shadow property) to 0. You will also need to remove the transparency of your box shadow's color. For the box-shadow to appear on the bottom of the card you have to set the y-offset to a position value.

  In short, your box-shadow code should look something like this:

  .card-container {
  box-shadow: 10px 10px 0px #000000;
  }
  

  Another thing to note is that the card's box shadow should change when you hover over it just like your <h1>. This change can be seen in the image showing the active states. For this, all you have to do is add a hover-state on your .card-container class and change the x and y values on the box shadow. An example would be something like this:

  .card-container:hover {
  box-shadow: 30px 30px 0px #222222;
  }
  

  0

  ---

  

  Lovethrech•220

  @LovethrechPosted 11 months ago

  @PJIceskull thanks so much for the correction. I will work on it now.

  0