forked from DarrylMK/MarketPlace-UI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpayment.html
165 lines (146 loc) · 8.6 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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 Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="payment.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="nav-placeholder">
</div>
<script>
$(function () {
$("#nav-placeholder").load("nav.html");
});
</script>
<div class="payment-page">
<div class="addressheader">
<div class="headertext">
<h1>
Shipping
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
</span>
</h1>
</div>
</div>
</div>
<div class="container">
<h1>Address</h1>
<div class="form-container">
<form>
<div class="divrow">
<div class="form">
<input type="text" placeholder=" Nama Penerima"><br>
</div>
<div style="width:20px;"></div>
<div class="form">
<input type="text" placeholder=" No Handphone"><br>
</div>
</div>
<div class="divrow">
<div class="form">
<input type="text" placeholder=" Provinsi"><br>
</div>
<div style="width:20px;"></div>
<div class="form">
<input type="text" placeholder=" Kota"><br>
</div>
</div>
<div class="divrow">
<div class="form">
<input type="text" placeholder=" Kecamatan"><br>
</div>
<div style="width:20px;"></div>
<div class="form">
<input type="text" placeholder=" Kode Pos"><br>
</div>
</div>
<div class="alamat">
<textarea rows="4" cols="50" placeholder=" Alamat Lengkap"></textarea>
</div>
<br>
<div class="tag-alamat">
Tandai Alamat Sebagai :
<br>
<input class="form-check-input" type="radio" name="tag" id="rumah" checked>
<label for="Rumah">Rumah</label>
<input class="form-check-input" type="radio" name="tag" id="kantor">
<label for="Kantor">Kantor</label>
<input class="form-check-input" type="radio" name="tag" id="lainnya">
<label for="Lainnya">Lainnya</label>
</div>
</form>
</div>
</div>
<div class="payment-page">
<div class="paymentheader">
<div class="headertext">
<h1>
Payment
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-receipt-cutoff" viewBox="0 0 16 16">
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zM11.5 4a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
<path d="M2.354.646a.5.5 0 0 0-.801.13l-.5 1A.5.5 0 0 0 1 2v13H.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H15V2a.5.5 0 0 0-.053-.224l-.5-1a.5.5 0 0 0-.8-.13L13 1.293l-.646-.647a.5.5 0 0 0-.708 0L11 1.293l-.646-.647a.5.5 0 0 0-.708 0L9 1.293 8.354.646a.5.5 0 0 0-.708 0L7 1.293 6.354.646a.5.5 0 0 0-.708 0L5 1.293 4.354.646a.5.5 0 0 0-.708 0L3 1.293 2.354.646zm-.217 1.198.51.51a.5.5 0 0 0 .707 0L4 1.707l.646.647a.5.5 0 0 0 .708 0L6 1.707l.646.647a.5.5 0 0 0 .708 0L8 1.707l.646.647a.5.5 0 0 0 .708 0L10 1.707l.646.647a.5.5 0 0 0 .708 0L12 1.707l.646.647a.5.5 0 0 0 .708 0l.509-.51.137.274V15H2V2.118l.137-.274z"/>
</svg>
</span>
</h1>
</div>
</div>
</div>
<div class="container">
<h5>Payment Available</h5>
<div class="ms-5 mt-1">
<div class="m-1">
<input class="form-check-input" type="radio" name="payment" id="BCA">
<label class="form-check-label" for="BCA">
<img src="PaymentMethod/bca.png">
BCA
</label>
</div>
<div class="m-1">
<input class="form-check-input" type="radio" name="payment" id="Mandiri">
<label class="form-check-label" for="Mandiri">
<img src="PaymentMethod/mandiri.png">
Mandiri
</label>
</div>
<div class="m-1">
<input class="form-check-input" type="radio" name="payment" id="BNI">
<label class="form-check-label" for="BNI">
<img src="PaymentMethod/bni.png">
BNI
</label>
</div>
<div class="m-1">
<input class="form-check-input" type="radio" name="payment" id="Alfamart">
<label class="form-check-label" for="Alfamart">
<img src="PaymentMethod/alfamart.png">
Alfamart
</label>
</div>
<div class="m-1">
<input class="form-check-input" type="radio" name="payment" id="Indomaret">
<label class="form-check-label" for="Indomaret">
<img src="PaymentMethod/indomaret.png">
Indomaret
</label>
</div>
</div>
<div class="submit">
<input class="button" type="submit" value="Submit">
</div>
</div>
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</body>
</html>