Adding shadow to product cards

You can make the product cards more fancy by adding some shadow to it so that it highlights and looks funky.

.card {
  border-radius: 10px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
  padding: 20px;
  background-color: #F7F7F7;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.3);
  background-color: #FFC107;
}

The above CSS makes the card with rounded edges, a shadow effect, and a light grey background. When you hover over the card, it will move up slightly, the shadow effect will get stronger, and the background color will change to a yellowish color.

Add this CSS to the layout.css file and deploy the changes.

This is how the card looked previously

This is how it looks after adding the CSS, where the middle card is hovered upon.