Skip to content
Submitted over 2 years ago

Responsive Stats Preview Card using Sass

Arlagonix•410
@arlagonix
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

Features:

  • Animated Gradient text. The text (and links) is colored with animated gradient. And it is achieved with only one class!

  • Animated Gradient images. The image is "colored" by animated gradient

  • Hover animation on image, links. Hover on the image = it scales. Hover on links = shrink. Click on links = shrink even more. Made it already several times in other projects. SASS. That is my first experience of using SASS (.scss to be specific). And it was wonderful! Nesting, mixins, partials! Oh my! Decided to use .scss instead of .sass because the first variant helps to easily reuse the .css fragments and files found in the Internet

  • SASS file composition. Divided code into separate files. See below the details about the structure

  • Mixins. For flexblox, for gradient background. See examples below

  • Text components. Similarly to how it is done in Figma I made a text component in BEM convention. I made so in many previous projects as an experiment. ALthough now I see that this experiment was rather successful

  • Normalization. Found a normalize.css file in Github, included it into the project

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Arlagonix, congratulations for your new solution!

    I think you've done a really creative solution here, this is something everyone should do, go beyond what the challenge requires and improve it. Congrats bro!

    Something you can fix is the text spacing for the left column, I think if you increase the main heading size and decrease the top and bottom padding you'll have a better text fit and less gap between information.

    👾My rating for this solution: ⭐⭐⭐⭐

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1
    Arlagonix•410
    @arlagonixPosted over 2 years ago

    @correlucas thanks a lot for these words! Btw I was inspired by your solution that I saw some time ago. Didn't look into your code, although I decided to code it myself

    I agree with your position about the font size and spacing. Increased the font size, reduced the gap. It appeared to look even better. Thanks a lot

    Probably I will add that box-shadow effect in some future

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @GrbnvAlex Arlagonix, thats fine your solution looks even cooler than mine with the special hover effect and the colors. You did a really good solution here. I like also the other customized solution you have, keep it up <3

    0
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @GrbnvAlex Arlagonix, thats fine your solution looks even cooler than mine with the special hover effect and the colors. You did a really good solution here. I like also the other customized solution you have, keep it up <3

    0
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @GrbnvAlex Arlagonix, thats fine your solution looks even cooler than mine with the special hover effect and the colors. You did a really good solution here. I like also the other customized solution you have, keep it up <3

    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