apah-dev / stats-preview-card-component-main

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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live Site

Built with

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

What I learned

Learnt how to use media queries for specific break points Learnt how to use the row-reverse of the flexbox element to flip the layout Learnt how to use the background-image for a better use of overlay instead of the image tag

To see how you can add code snippets, see below:

<div class="image-container">
  <!-- <img class="image" src="images/image-header-mobile.jpg" alt="header" /> -->
  <div class="image"></div>
  <div class="overlay"></div>
</div>

.image-container {
  width: 100%;
  position: relative;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.image {
  background-image: url(./images/image-header-mobile.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 200px;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--Softvioletopaque);
  width: 100%;
  min-height: 200px;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
  opacity: 1;
}

Useful resources

• w3schools - This helped me to understand the use of the background element

• stackoverflow -

Author

• Frontend Mentor - @apah-dev
• Twitter - @benson_apah

Acknowledgments

I thank me for not giving up on me