Frontend Mentor - Product preview card component solution

This is my solution to the Product preview card component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

I build both the mobile and desktop version of the product preview card design by Frontend Mentor. Completely responsive, built with CSS & Sass and HTML only.

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen siz
• See hover and focus states for interactive elements

Screenshot

Links

• Solution URL: My Solution on Frontend Mentor
• Live Site URL: Live Website

My process

I created the card using the mobile first approach. Also used mostly percenges and rem values as opposed to fixed px values in oreder to make the website more responive even before using @media. With desktop @media I used flexbox to make the top and bottom part of the card parallel and imposed a min() function for the max-width and percenge with related to the screen size.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Sass - CSS extension language

What I learned

Used this project to implemet some of the concepts and practices I've read a lot about but never actually got to implement into a real project. Some of these include images inside buttons and the picture tag with multiple source images.

<picture>
  <source media="(min-width:750px)" srcset="images/image-product-desktop.jpg" />
  <source media="(max-width:749px)" srcset="images/image-product-mobile.jpg" />
  <img
    src="images/image-product-desktop.jpg"
    alt="close up of the Channel Babrielle parfiume on a white backgound"
  />
</picture>

<button class="product--cart-btn">
  <a href="#">
    <img
      class="cart-icon"
      src="images/icon-cart.svg"
      alt="stylized cart icon"
    />
    Add to Cart
  </a>
</button>

Author

• Website - [Cristina Zlatov]
• Frontend Mentor - @C-ZLTV
• Twitter - @czltv