Skip to content
Submitted 3 months ago

Order summary card with custom animations - MikDra1

MikDra1•6,920
@MikDra1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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•340
    @YuliaLantzbergPosted 3 months 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
    0
    MikDra1•6,920
    @MikDra1Posted 3 months 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. 😊

    1

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