Skip to content
Submitted over 1 year ago

Stats Preview Card using Sass

Derek Harnett•130
@harnettd
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @lack21Posted 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.
    0
    Derek Harnett•130
    @harnettdPosted over 1 year ago

    @lack21

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

    0

Please log in to post a comment

Log in with GitHub

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