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
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Mobile Preview

Desktop Preview

Links

• Solution URL: GitHub
• Live Site URL: Netlify

My process

Built with

• HTML5
• CSS3

What I learned

<img srcset = "images\image-header-mobile.jpg 654w,
                   images\image-header-desktop.jpg 540w"
         sizes = "(max-width: 768px) 654px, 
                  540px"
         src = "images/image-header-desktop.jpg"
         alt = "Header Image">

.container {
    color: hsl(0, 0%, 95%);
    width: auto;
    max-width: 920px;
    margin: 170px 250px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 0;
    align-items: center;
}

Continued development

• Hover animations
• Spacing and indentations
• Margin and Padding
• Display and Position styles
• Responsive Images

Useful resources

• Kevin Powell YouTube Channel
• Web Dev Simplified YouTube Channel

Author

• Frontend Mentor - @aparajitdotbee
• GitHub - @aparajitdotbee