Design comparison
SolutionDesign
Solution retrospective
in this form users are able to:
Fill in the form and see the card details update in real-time Receive error messages when the form is submitted if: Any input field is empty The card number, or CVC fields are in the wrong format View the optimal layout depending on their device's screen size See hover, active, and focus states for interactive elements on the page
Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow vannilla JS
Community feedback
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