Frontend Mentor - Stats preview card component solution

This is my solution to the Stats preview card component challenge on Frontend Mentor.

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

Desktop view

Mobile View

Links

• Live Site URL: craig1001.github.io/component-card-fm/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Two different menthod of creating colour overlays, firstly setting the image and the background of a containger and adding and overlay element on top , secondly making the background the desired color and reducing the opacity of the image to greate the appearance of an overlay.

See two versions below:

V1 (overlay):

<div class="image desktop">
  <div class="overlay"></div>
</div>

.image {
    width: 50%;
    background-image: url("../images/image-header-desktop.jpg");
}
.overlay{
    background-color: hsla(277, 64%, 61%, 60%);
    width: 100%;
    height: 100%;
}

V2 (underlay):

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

  img {
        opacity: 40%;
  }
  .overlay {
      background-color: hsl(277, 64%, 61%);
  }

Continued development

Moving forward I want to further my understanding of flex and responsive design so im able to organsie my css better.

Author

• Website - Craig Noford
• Frontend Mentor - @craig1001
• Twitter - @craignorford