Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Stats Preview Card using Sass

Arlagonix 410

@arlagonix

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,420

@correlucas

Posted

👾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

@arlagonix

Posted

@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,420

@correlucas

Posted

@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,420

@correlucas

Posted

@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,420

@correlucas

Posted

@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
Discord logo

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