/preview-card-component

A preview card component demo created using HTML & CSS.

Primary LanguageCSS

Product preview card component design

Overview

A product preview card component example built using HTML & CSS. I've created this as part of Frontend Mentor's challenge that you can find here.

You can visit the live site on https://rhesamu.github.io/preview-card-component

The design of the card is responsive for both desktop and mobile screen sizes. Feel free to resize the window to see the changes.

Desktop Mobile
mobile-screen mobile-screen

The challenge

Users should be able to:

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

Links

My process

Built with

  • HTML5 with semantic markup
  • CSS Grid and Flexbox
  • CSS Variables
  • Custom fonts

What I learned

  • Starting to familiarize myself with CSS grid, after being only used to flex-based grid systems from frameworks like Bootstrap. Hopefully I can utilize this more in future projects.
  • I've paid more attention to more HTML semantic properties to improve accessibility.
  • I've just realized that Github Pages is very useful to simply deploy client-side projects in just one touch.