Frontend Mentor - Stats preview card component solution

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

the-challenge

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.

Screenshot

Links

• Solution URL: FrontMentor
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox(Responsive)
• Grid Template

What-I-Learned

• I learned to make overlay above image in smart way and make image responsive

<div class="image stats-preview__img-wrapper">
      <img src="images/image-header-desktop.jpg" class="image-Desktop" alt="image Header">
</div>

.stats-preview__img-wrapper {
    background-color: var(--Soft-violet-accent);
    overflow: hidden;
}

.stats-preview__img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    opacity: 75%;
}

Continued development

I will use flexbox and grid template in comming Challenges with Allah willing in professional way.

Useful resources

• Flexbox Guide - This helped me for refreshing my info about flex in smart way. I really liked this guide and will use it going forward.
• Grid Template

Author

• Frontend Mentor - @zenab12
• Twitter - @zenabmo90454136
• Linkedin -@zenab-mohamed-23133a1a1

Acknowledgments

Bayoumi-dev helped me to use smart way in making overlay so thanks for him