Skip to content
Submitted 2 months ago

Interactive Credit Card

K•490
@lilythelily
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

At first glance, this appeared to be a quite simple page, but it turned out so challenging. I wish it were much simpler to apply a gradient to the border! Also, it took a lot of effort to set validation conditions to each fields, and to format the value properly. I struggled and learned a lot.

Code

Please log in to post a comment

Log in

Community feedback

  • Yacoub AlDweik•3,270
    @YacoubDweik

    Good job Kaori!

    Just make sure that the 000 cvc is an inline thing like <span> or something and not a block thing like <p> because rn it makes a hude overflow on phones, u could at least give it width: fit-content.

    Also make the left: 50% instead of 60% until 768px so the design never overflows, keep up the good work you are doing very well!

    Marked as helpful

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