This project is a credit card payment interface built using HTML, CSS, and JavaScript. The user interface simulates a real-world credit card payment form where users can input their card details. As users fill in the form fields, the details dynamically update on the visual representation of the card at the top of the form.

• Dynamic Card Update: The credit card displayed on the UI dynamically updates as the user inputs their card number, cardholder name, expiration date, and CVV.
• Card Flip Animation: When the user hovers over the CVV input field, the credit card flips to show the back side, prompting the user to enter their CVV.
• Responsive Design: The design is responsive and works on various screen sizes, ensuring a smooth user experience across devices.

• HTML: The structure of the UI is built using HTML.
• CSS: Styling and animations, including the card flip effect, are implemented using CSS.
• JavaScript: JavaScript handles the dynamic updates of the card information and the interactivity of the card flip effect.

To get a local copy up and running, follow these simple steps.

You need a modern web browser installed on your computer.

1. Clone the repo

   git clone https://github.com/DorukhanBekdur/Credit-Card-Payment-UI.git
   

2.Open index.html in your browser to view the application.

• Fill in the card number, cardholder name, and expiration date in the respective input fields, and see the card details update in real-time.
• Hover over the CVV input field to see the card flip and display the CVV input prompt.
• Click the "Send" button after filling in all the details.

• index.html : Contains the HTML structure of the payment form and card.
• styles.css : Contains the styles for the payment form and the credit card, including animations.
• script.js : Contains the JavaScript code for dynamically updating the card information and handling the card flip animation.

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have any suggestions that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

• Create your Feature Branch (git checkout -b feature/AmazingFeature)
• Commit your Changes (git commit -m 'Add some AmazingFeature')
• Push to the Branch (git push origin feature/AmazingFeature)
• Open a Pull Request

Dorukhan Bekdur - [email protected]

Project Link: https://github.com/DorukhanBekdur/Credit-Card-Payment-UI