Frontend Mentor - Stats Preview Card Component

Table of contents

• Overview
  • The challenge
  • My design
    • Desktop design
    • Mobile design
  • Where to find everything
  • Link to site
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

The challenge is to build out this stats preview card component and get it looking as close to the design as possible.

My design

Desktop design

Mobile design

Where to find everything

-- The designs are inside the /design folder. You will find both a mobile and a desktop version of the design.

-- The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

-- You will find all the required assets in the /images folder. The assets are already optimized.

-- The css's archives are in scss folder.

Link to site

• Live Site URL: stats-preview-card-component-tesche.netlify.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex
• Grid
• Media Queries
• SCSS

What I learned

Building this project, I learned about HTML semantics, CSS custom properties, Flexbox and Media Queries. I also learned how to use "@mixin", "@include" and ":root" in CSS and new way to write CSS. Other thing what I learned, it's about the overlay.

.right{
    background-image: url(/images/image-header-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 100%;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    overflow: hidden;

    .overlay{
        width: 100%;
        height: 100%;
        background: var(--Soft-violet);
        overflow: hidden;
        z-index: 2;
        opacity: 0.5;
    }
}

Author

• Author - Thiago Tesche
• Frontend Mentor - @ThiagoTesche
• Instagram - @thiago_tesche
• LinkedIn - Thiago Tesche

Thank You!