Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

---

Links

• Solution URL: click here
• Live Site URL: Click here

---

What I learned

1. Learned how to show different images using css

<div class="card__image">
  <img
    src="./images/image-product-desktop.jpg"
    alt="card_image"
    class="desktopImage"
  />
  <img
    src="./images/image-product-mobile.jpg"
    alt="card_image"
    class="mobileImage"
  />
</div>

.mobileImage {
  display: none;
}

@media screen and (min-width: 600px) {
  .mobileImage {
    display: block;
  }
  .desktopImage {
    display: none;
  }
}

2. Leaned animation using Css

---

Useful resources

• Box Shadow Generator - This helped me with the box shadows.
• Animation - This is an amazing site for css animation.