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

Stats Preview Card (Vanilla CSS - Custom Design + Text Animation)

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

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


šŸ‘¾ Hello, Frontend Mentor coding community. This is my solution for the Stats Preview Card

Last month I learned a lots stuff giving feedback and fixing my old solution. You guys don't have idea how much code I've cleaned just by deleting unnecessary divs, fixing responsivity issues cause by elements with fixed width and many other stuff like that, more I study more I realize how noob I am with CSS/HTML. But was really good to see how bad was the old solution and how I was able to fix it with the knowledge I get by giving feedback and looking the others code.

I had to update this challenge because my friend @Adriano Escarabote told that my older solution wasn't not good enough and that was not responsive on his Nokia 3310 and also in his Apple Watch. So I paid a lots of attention in order to fix the responsiveness issues and now the solution seems a little little little better. Thank you Adriano!

šŸŽØ I've added some custom features:

  • šŸ‘Øā€šŸŽØ Custom Gradients
  • šŸŽØ Highlighted Text Animation
  • šŸ‘¾ Gradient Overlay Effect

šŸ˜Ž I saw multiple solutions with the exact some custom design and animations details I've add, this doesn't bother and I don't want the credits or attribution.

šŸ˜² My advice is that instead of just copy and paste it, improve it, you can use these lines of code and improve your solution by customizing it, opening Figma and playing with your design, you'll learn a lots of stuff and possible even better results than mine, just paste and copying some lines of codes will not teach you nothing unless you try to customize it by yourself. So don't limit yourself by using a poor code and design, improve it.

ā¤ļø For those who just copy the code/design and claimed that were an original solution, its fine, this shows that both of us have a good taste for design and like to customize out solutions.

And please, feel free to leave any feedback and help me to improve my solution!

Community feedback

Elaineā€¢ 11,420

@elaineleung

Posted

Great work Lucas, I love the background moving gradient that you're using! I'm also doing the same thing where I'm going back to my old designs and cleaning them up, especially after seeing the different ways people wrote their solutions. Like you, I feel like I learned so much when I spend the time to review my old code and see how to improve so that I can avoid making the same mistakes again.

I also love the advice you gave about learning from copied code. Truly great words spoken by a great mentor! šŸ™‚

Marked as helpful

3

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

Posted

@elaineleung Thank you Elaine, for these kind words. I appreciate that a lots. šŸ˜€

2
Adrianoā€¢ 33,950

@AdrianoEscarabote

Posted

That turned out great. I checked the responsiveness of the project here on my nokia 3310 and it really turned out amazing.

I really liked the detail that stood out a lot, which in this case was the ā€œRā€ you put in 'analytics' ahuauhauhau

But seriously, you're insane, always excelling with creative layouts, I've never seen any layouts like this. Thanks for the opportunity to get some relevant reference for my next project.

Marked as helpful

1

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

Posted

@AdrianoEscarabote šŸ˜‚šŸ˜‚šŸ˜‚šŸ˜‚ this little R detail is unique and no one will have a solution with this beautiful misspelling.

Thank you bro this word was wrong since the first version šŸ‘

2
Elaineā€¢ 11,420

@elaineleung

Posted

@AdrianoEscarabote This is awesome stuff! As an editor in my past life where it was my job to find misplaced commas on the daily, I didn't even notice the beautiful misspelling as I was so in awe by this masterpiece from the maestro. All my English skills have left me ever since I've been programming, and my tolerance for writing mistakes has increased exponentially, most likely because my capacity to detect them has gone down by the same degree šŸ˜…

Marked as helpful

1
Okudero Michaelā€¢ 350

@MicMond01

Posted

I love the gradient

1
Yefry Sanchezā€¢ 330

@y25sanchez

Posted

Great job Lucas, your solutions are amazing.

1
Fuhad Raheemā€¢ 100

@FuhadRaheem

Posted

@Lucas this is super perfect... i love as the text color is changing

1

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

Posted

@FuhadRaheem thank you Fuhad, I'm happy to hear that.

0
JOā€¢ 60

@myspace8

Posted

Love those custom gradients. Great work, Lucas.!

1

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

Posted

@myspace8 Thank you Joe!

0
Johnnyā€¢ 470

@johnnysedh3lllo

Posted

amazing job, lucas!!!!, very initiative as always.

1

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

Posted

@johnnysedh3lllo Thank you Johny! Keep it up!

1

@Dng120696

Posted

damn so nice man, how to be you bro can you teach me ? gonna appreciate it thank you

0
Adeola Ganiuā€¢ 1,320

@Deolabest

Posted

Amazing work!

I can't seem to find the style.css file for this project in your Github.

0

Lucas šŸ‘¾ā€¢ 104,580

@correlucas

Posted

@Deolabest https://github.com/correlucas/product-preview-card-component/blob/main/style.css Here's the link my friend =)

0
Adeola Ganiuā€¢ 1,320

@Deolabest

Posted

@correlucas Thanks but this link is for the product preview card.

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