MYSTYX7 / stats-preview-card

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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Screenshot

Links

• Solution URL: Github - Stats Preview Card
• Live Site URL: Netlify - Stats Preview Card

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox Responsive

What I learned

Using CSS Flexbox and responsive design.

body{
  background-color: hsl(233, 47%, 7%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Continued development

Will try to make it responsive for each screen size in future.

Useful resources

• CSS Flexbox - This helped me making flexbox responsive for both desktop and mobile devices.

Author

• Frontend Mentor - @MYSTYX7
• Twitter - @cric_mystyx