Stats Preview Card (Vanilla CSS - Custom Design + Text Animation)
Design comparison
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
- @elaineleungPosted over 2 years ago
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 helpful3@correlucasPosted over 2 years ago@elaineleung Thank you Elaine, for these kind words. I appreciate that a lots. 😀
2 - @AdrianoEscarabotePosted over 2 years ago
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 helpful1@correlucasPosted over 2 years ago@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@elaineleungPosted over 2 years ago@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 helpful1 - @FuhadRaheemPosted over 2 years ago
@Lucas this is super perfect... i love as the text color is changing
1@correlucasPosted over 2 years ago@FuhadRaheem thank you Fuhad, I'm happy to hear that.
0 - @Dng120696Posted over 1 year ago
damn so nice man, how to be you bro can you teach me ? gonna appreciate it thank you
0 - @DeolabestPosted about 2 years ago
Amazing work!
I can't seem to find the style.css file for this project in your Github.
0@correlucasPosted about 2 years ago@Deolabest https://github.com/correlucas/product-preview-card-component/blob/main/style.css Here's the link my friend =)
0@DeolabestPosted about 2 years ago@correlucas Thanks but this link is for the product preview card.
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