Submitted over 1 year ago

Stats Preview Card using Sass

Derek Harnett• 120

@harnettd

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

To tint the header image, I positioned a div right on top of it and fiddled with the background-color of the div until the result looked like the design. Is there a simpler (and/or smarter) way?
I used Sass in this project. With that in mind, which style files should I include in my git repo? Even though the .css and .css.map files are generated by Sass from the source .scss files, I included them both in my git repo as I'm not sure how to make the live site work otherwise.

Community feedback

Luka Glonti• 3,440

@lack21

Posted over 1 year ago

Good work 👍, but I have some recommendations!

You don't need main and .card at the same time remove one of them, and add styles to the ones left.
Remove margin totally from the .card and add these styles to the body

{
  display: grid;
  place-content: center;
  min-height: 100vh;
}

This should center the layout.

Also you can make your footer color white and add some padding-top to it.

Derek Harnett• 120

@harnettd

Posted over 1 year ago

@lack21

Thanks for the feedback! It is much appreciated. I'll incorporate your suggestions into version 2.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord