fork or download the repo all the files needed is imported

Thanks for checking out this front-end coding challenge.

Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.

The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

You will find all the required assets in the /images folder. The assets are already optimized.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Position
• Mobile-first workflow
• Pure javascript

i learned a lot from this design how to Position items and working with form validation and modules in javascript

• Website - Abdallah Mohammed
• Frontend Mentor - @abdallahifox