Submitted 25 days ago

Order summary card with custom animations - MikDra1

MikDra1• 5,610

@MikDra1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

💻 Hello, Frontend Developer Community,

This is my solution for the Order summary card.

Scored 94,25% on Google Pagespeed Insights! 🚀
Solution with 100% W3C validation accuracy 🌟
Custom-built CSS animations for a smooth user experience 💫
Card is featured with front and back side ✨
Custom bubble animation which changes every time you refresh 🔘
Custom box-shadow and border colors each time you hover on the back side button 🔅
Fully responsive design crafted with a mobile-first approach 📱
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
Looking forward to hearing your thoughts and suggestions! 💡

Community feedback

Yulia• 320

@YuliaLantzberg

Posted 25 days ago

Hey. That's awesome. Really loved the back animation. Just one thing. On card itself there are options to cancel order or change the plan. But there is no way actually to use these options cuz the card is reversing when you hover it. So maybe it's better to put this hover effect on the front 'proceed to payment' button.

Marked as helpful

MikDra1• 5,610

@MikDra1

Posted 25 days ago

@YuliaLantzberg

Yeah I know, this was made just for fun so maybe if this was real world I would do it more useful. I did it like this to make it easy to view. 😊

Please log in to post a comment

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