/stats-preview-card-component-main

Stats Preview Card Component challenge by frontendmentor.io

Primary LanguageCSS

Frontend Mentor - Stats preview card component solution

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

Table of contents

Overview

A challenge to make a product preview card layout change depending on the size of the screen. It's asked to follow two designs: one made for mobile devices with screen width of 375px, and one made for desktop devices with screen width of 1440px. The designs that mus be followed are inside the design folder.

My process

I started with the HTML5 and then went to the styles on CSS3. The first design I replicated was the mobile one. When I fisinhed it I started the desktop design using the Media Querry technique.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

I learned how to make a filter above an image using the linear gradient and the image desired. It took me awhile to get it done, but what I did was to put this filter on the parent element of the image, not on the image itself, and then I set the opacity of the element to zero. I couldn't get the right aspects of the filter, but that's on me, not on the technique I used.

Useful resources

Author