interactive_card

FrontEnd Mentor Challenge

Table of contents

• Links
• General info
• Built with

Links

Solution: https://www.frontendmentor.io/solutions/responsive-interactive-credit-card-kAIXQGaihr

Live Site: https://peaceful-sunflower-f07d1c.netlify.app/

General info

This project is my first challenge by FrontendMentor. I've practiced DOM manipulation and form validation while also putting my HTML and CSS skills to test. The users should be 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, expiry date, 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
• Mobile-first workflow