heraldofortuna / stats-preview-card-component-main

This is a solution to the Stats preview card component challenge of Frontend Mentor.

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

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution Link
• Live Site Link

My process

Built with

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

What I learned

<div class="card__image">
  <div class="card__image--color"></div>
</div>

.card__image {
  position: relative;
  width: 100%;
  height: 320px;
  background-image: url("./images/image-header-mobile.jpg");
  background-position: center;
  background-size: cover;
  border-radius: 8px 8px 0 0;
}

@media (min-width: 800px) {
  .card {
    width: 85%;
    display: flex;
    flex-direction: row-reverse;
  }
}

Continued development

I definitely need to work and study more on image containers. I'm having trouble accommodating them in different sizes.

Useful resources

I used the guide of challenge found on Frontend Mentors website. Only that.

Author

• Frontend Mentor - heraldofortuna
• Twitter - @heraldofortuna

Acknowledgments

To my father, for everything.