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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Screenshot

Mobile view

Desktop view

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• Use of Flex to center an element

    main{
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
 }

• To ovelay color over a background

    .container picture::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: hsla(281, 82%, 39%, 0.5)
    } 

Author

• Frontend Mentor - @Ezekiel-Great
• Twitter - @yeshua_codeit