forked from deepmajoka07/-likely-cough-9107
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheckout.html
120 lines (91 loc) · 4.98 KB
/
checkout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title>
<link rel="stylesheet" href="./styles/checkout.css">
</head>
<body>
<div id="upperDiv">
<div id="upperDivimage">
<img src="images\logo.png" alt="">
</div>
<div id="upperDiv2">
</div>
</div>
<!-- top sec -->
<div id="emaildiv">
<h1>Checkout</h1>
<p>Please enter your email address and select from available shipping, delivery and payment options.</p>
<p id="emailError"></p>
<input size="50" type="text" id="email" placeholder="EMAIL*"> <label id="login">Have an account? <a href="./Signup.html"> LogIn</a></label>
</div>
<div id="forHeading">
<label id="shipping" class="identity">1. Shipping & Delivery</label> <label class="identity" id="order">Order Summary</label>
</div>
<div id="container">
<div id="firstDiv">
<span id="NameError"></span>
<div id="inputname">
<label> <input type="text" id="firstName" placeholder="First Name*">
<input type="text" id="lastName" name=""placeholder="Last Name*"></label>
</div>
<span id="Add_1Error"></span>
<div id="address1" class="address">
<input type="text" id="Add_1" name="" placeholder="Address 1*">
</div>
<span id="Add_2Error"></span>
<div class="address">
<input type="text" id="Add_2" name="" placeholder="Address 2*(optional)">
</div>
<p id="stateError"></p>
<div id="cityState">
<label> <input type=" text" id="city" placeholder="City*"> <input id="state" type="text" name=""
placeholder="State*"></label>
</div>
<span id="ZipError"></span>
<div id="zipCode">
<input type="text" id="zipCodeVal" name="" placeholder="Zip Code*">
</div>
<span id="numberError"></span>
<div id="phone">
<input type="number" id="Number" name="" placeholder="Phone Number*">
</div>
</div>
<div id="order_summary" style="height: 70%;">
<a href="">Have a Promo Code ? </a>
<!-- <div> -->
<p class="upper_details" style="font-weight: bolder;">SUBTOTAL <label class="upper_values"
id="subtotalforsummry"></label></p>
<p class="upper_details" style="font-weight: bolder;margin-top: 10px;">STANDARD DELIVERY <label
class="upper_values" id="stndlv">$45</label></p>
<p class="upper_details" style="font-weight: bolder;">ESTIMATED TAX <label class="upper_values"
id="esttax">$0</label> </p>
<!-- </div> -->
<div>
<hr>
</div>
<h4 style="height: 0px;"> ESTIMATED TOTAL <label id="totalestimate"></label> </h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Klarna_Payment_Badge.svg/2560px-Klarna_Payment_Badge.svg.png"
alt="">
<p id="accept">Accepted Payment Methods </p>
<div id="imagesOfBank">
<div class="take" id="image1"><img src="https://img.freepik.com/premium-vector/kiev-ukraine-march-30-2021-paypal-logo-paypal-icon-paypal-is-internet-based-digital-money-transfer-service-neumorphic-ui-ux-white-user-interface-neumorphism-style-vector-illustration_399089-1224.jpg?size=626&ext=jpg&ga=GA1.1.983994971.1674139840" alt=""></div>
<div class="take"id="image2"><img src="https://i.pinimg.com/564x/8a/91/46/8a9146626fb139b4d6bff3f091d47ca8.jpg" alt=""></div>
<div class="take" id="image3"><img src="https://i.pinimg.com/564x/07/73/4c/07734cf160091516ce46a0e71b9f1cab.jpg" alt=""></div>
<div class="take" id="image4"><img src="https://i.pinimg.com/474x/b8/f7/f9/b8f7f966793b6deee6cb7230c9ac7f55.jpg" alt=""></div>
<div class="take" id="image5"><img src="https://i.pinimg.com/474x/67/e8/a5/67e8a5765f8a2ad2d259b6dc1b6445b5.jpg" alt=""></div>
<!-- <div id="image6"><img src="https://logolook.net/wp-content/uploads/2022/06/Klarna-Logo.png" alt=""></div> -->
</div>
<br> <br>
<!-- login page link put in href and signup too -->
<button id="guestcheckout">Continue To Payment</button>
<p></p>
<!-- <span class="notification" id="added"> ✅ Succesfully Added</span> -->
</div>
</div>
</body>
<script src="./scripts/checkout.js"></script>
</html>