-
Notifications
You must be signed in to change notification settings - Fork 0
/
payment.html
130 lines (118 loc) · 6.35 KB
/
payment.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
121
122
123
124
125
126
127
128
129
130
<!--
Copyright (c) 2023 Hakeem Ellis
All rights reserved.
This work is licensed under the terms of the Custom Code license.
For a copy, see https://github.com/hakeemellis/portfolio/blob/main/LICENSE.md.
Contact: utilize the contact form at https://hakeemellis.com/
-->
<!DOCTYPE html>
<html>
<head>
<title>Payment|MacLove</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="images/ML.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<a href="paymentplans.html">
<button type="button" class="btn btn-danger">Back To Payment<button></a>
</header>
<body class="paymentbody">
<div class="paymentrow">
<div class="paymentcol-75">
<h2 id="payment">Payment</h2>
<p id="subpayment">Choose payment method below</p>
</div>
</div>
<div class="paymentrow">
<div class="paymentcol-75">
<div class="paymentcontainer">
<form class="needs validation" action="paymentsuccess.html">
<div class="paymentrow">
<div class="paymentcol-50">
<img class="paymentimg" src="images/creditcard.png" alt="creditcard">
</div>
</div>
<div class="paymentrow">
<div class="paymentcol-50 bill">
<h3>Billing Info</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input class="paymentinput" type="text" id="fname" name="firstname" placeholder="John M. Doe" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input class="paymentinput" type="text" id="email" name="email" placeholder="john@example.com" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input class="paymentinput" type="text" id="adr" name="address" placeholder="542 W. 15th Street" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<label for="city"><i class="fa fa-institution"></i> City</label>
<input class="paymentinput" type="text" id="city" name="city" placeholder="Toronto" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<div class="paymentrow">
<div class="paymentcol-50">
<label for="state">State</label>
<input class="paymentinput" type="text" id="state" name="state" placeholder="ON" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="paymentcol-50">
<label for="zip">Zip</label>
<input class="paymentinput" type="text" id="zip" name="zip" placeholder="M00010" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
</div>
<div class="paymentcol-50 credit">
<h3>Credit Card Info</h3>
<label for="fname">Accepted Cards</label>
<div class="paymenticon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input class="paymentinput" type="text" id="cname" name="cardname" placeholder="John More Doe" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<label for="ccnum">Credit card number</label>
<input class="paymentinput" type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<label for="expmonth">Exp Month</label>
<input class="paymentinput" type="text" id="expmonth" name="expmonth" placeholder="September" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
<div class="row">
<div class="paymentcol-50">
<label for="expyear">Exp Year</label>
<input class="paymentinput" type="text" id="expyear" name="expyear" placeholder="2018" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="paymentcol-50">
<label for="cvv">CVV</label>
<input class="paymentinput" type="text" id="cvv" name="cvv" placeholder="352" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
</div>
</div>
<input type="submit" value="Continue to checkout" class="btn btn-danger">
</form>
</div>
</div>
</div>
</body>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</html>