We want 2 pages (Checkout & Payment) to design using HTML+CSS ( Static Pages )

I have 2 pages (Checkout & Payment) to design using HTML+CSS.

The design is very similar to Shopify’s “Checkout” & “Payment pages”. Please check the attached UI.

1. You need to design these two pages
2. It should be responsive on all web screens, Mobile, Tablet/iPad.
3. You will provide all codes after design completion

The Design is picked from this website — https://retinapix.com/ – Please check the checkout and payment page of this website.

We need a replica of Shopify for Checkout & Payment page in terms of UI (with minor changes, the UI design is attached). Rest everything should look and act exactly like Shopify. The on-Click event, Animations, and Dropdown should work exactly the same.

I want you to keep the following things in mind.:

1. Important – Please create the form input “placeholder” animation as in Shopify. Please check how the ‘First Name’ placeholder moves to the top as soon as you start typing.

2. On the checkout page, When the user logs in, the UI changes for the email input on the top. Please create it for the logged-in users.

3. Please check how the Discount Code box is working. Check these scenarios – When the coupon is applied, when the wrong coupon is applied, or when a coupon for another product is applied. It shows an error. Also, you can remove the coupon. Please check all the attached screenshots.

4. In mobile view, the “Show Order Summary” tab should open.

5. Show all countries in the Country dropdown.

6. Use the same colour code as on the Shopify website.

7. You need to show all errors when a user forgets to enter details on the checkout page -Eg. “Enter a first name”, “Enter a ZIP / postal code”, etc.

8. On the Right side, Besides the ‘Shipping’ text we have an info icon. On clicking, it should open the pop-up as in Shopify. The same should happen with the text in the footer for all ‘Policies’.

9. To check the “Billing Address” section UI in Shopify, Go to the “Payment” page

10. Kindly restrict the phone number field to 10 digits and no alphabet. If possible, add a static “+91” country code in the box.

11. The pin code box should only accept numbers and not alphabets. It should only be 6-digits long. Show error when PIN code is less than 6-digit.

12. “Email me with news and offers” should be pre-selected

13. Show an error on the Payment page when payment is failed. I’ll have shared the screenshot for this.