xxxxxxxxxx1
<div class="container mt-5">2
3
4
<!--Section: Content-->5
<section class="dark-grey-text">6
7
<div class="card">8
<div class="card-body">9
10
<!--Grid row-->11
<div class="row">12
13
<!--Grid column-->14
<div class="col-lg-8">15
16
<!-- Pills navs -->17
<ul class="nav md-pills nav-justified pills-primary font-weight-bold">18
<li class="nav-item">19
<a class="nav-link active" data-toggle="tab" href="#tabCheckoutBilling123" role="tab">1. Billing</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" data-toggle="tab" href="#tabCheckoutAddons123" role="tab">2. Addons</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" data-toggle="tab" href="#tabCheckoutPayment123" role="tab">3. Payment</a>26
</li>27
</ul>28
29
<!-- Pills panels -->30
<div class="tab-content pt-4">31
32
<!--Panel 1-->33
<div class="tab-pane fade in show active" id="tabCheckoutBilling123" role="tabpanel">34
35
<!--Card content-->36
<form>37
38
<!--Grid row-->39
<div class="row">40
41
<!--Grid column-->42
<div class="col-md-6 mb-4">43
44
<!--firstName-->45
<label for="firstName" class="">First name</label>46
<input type="text" id="firstName" class="form-control">47
48
</div>49
<!--Grid column-->50
51
<!--Grid column-->52
<div class="col-md-6 mb-2">53
54
<!--lastName-->55
<label for="lastName" class="">Last name</label>56
<input type="text" id="lastName" class="form-control">57
58
</div>59
<!--Grid column-->60
61
</div>62
<!--Grid row-->63
64
<!--Username-->65
<div class="input-group mb-4">66
<div class="input-group-prepend">67
<span class="input-group-text" id="basic-addon1">@</span>68
</div>69
<input type="text" class="form-control py-0" placeholder="Username" aria-describedby="basic-addon1">70
</div>71
72
<!--email-->73
<label for="email" class="">Email (optional)</label>74
<input type="text" id="email" class="form-control mb-4" placeholder="youremail@example.com">75
76
<!--address-->77
<label for="address" class="">Address</label>78
<input type="text" id="address" class="form-control mb-4" placeholder="1234 Main St">79
80
<!--address-2-->81
<label for="address-2" class="">Address 2 (optional)</label>82
<input type="text" id="address-2" class="form-control mb-4" placeholder="Apartment or suite">83
84
<!--Grid row-->85
<div class="row">86
87
<!--Grid column-->88
<div class="col-lg-4 col-md-12 mb-4">89
90
<label for="country">Country</label>91
<select class="custom-select d-block w-100" id="country" required>92
<option value="">Choose...</option>93
<option>United States</option>94
</select>95
<div class="invalid-feedback">96
Please select a valid country.97
</div>98
99
</div>100
<!--Grid column-->101
102
<!--Grid column-->103
<div class="col-lg-4 col-md-6 mb-4">104
105
<label for="state">State</label>106
<select class="custom-select d-block w-100" id="state" required>107
<option value="">Choose...</option>108
<option>California</option>109
</select>110
<div class="invalid-feedback">111
Please provide a valid state.112
</div>113
114
</div>115
<!--Grid column-->116
117
<!--Grid column-->118
<div class="col-lg-4 col-md-6 mb-4">119
120
<label for="zip">Zip</label>121
<input type="text" class="form-control" id="zip" placeholder="" required>122
<div class="invalid-feedback">123
Zip code required.124
</div>125
126
</div>127
<!--Grid column-->128
129
</div>130
<!--Grid row-->131
132
<hr>133
134
<div class="mb-1">135
<input type="checkbox" class="form-check-input filled-in" id="chekboxRules">136
<label class="form-check-label" for="chekboxRules">I accept the terms and conditions</label>137
</div>138
<div class="mb-1">139
<input type="checkbox" class="form-check-input filled-in" id="safeTheInfo">140
<label class="form-check-label" for="safeTheInfo">Save this information for next time</label>141
</div>142
<div class="mb-1">143
<input type="checkbox" class="form-check-input filled-in" id="subscribeNewsletter">144
<label class="form-check-label" for="subscribeNewsletter">Subscribe to the newsletter</label>145
</div>146
147
<hr>148
149
<button class="btn btn-primary btn-lg btn-block" type="submit">Next step</button>150
151
</form>152
153
</div>154
<!--/.Panel 1-->155
156
<!--Panel 2-->157
<div class="tab-pane fade" id="tabCheckoutAddons123" role="tabpanel">158
159
<!--Grid row-->160
<div class="row">161
162
<!--Grid column-->163
<div class="col-md-5 mb-4">164
165
<img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" class="img-fluid z-depth-1-half"166
alt="Second sample image">167
168
</div>169
<!--Grid column-->170
171
<!--Grid column-->172
<div class="col-md-7 mb-4">173
174
<h5 class="mb-3 h5">Additional premium support</h5>175
176
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti,177
dolorem.</p>178
179
<!--Name-->180
<select class="mdb-select colorful-select dropdown-info">181
<option value="" disabled>Choose a period of time</option>182
<option value="1" selected>+6 months : 200$</option>183
<option value="2">+12 months: 400$</option>184
<option value="3">+18 months: 800$</option>185
<option value="4">+24 months: 1200$</option>186
</select>187
188
<button type="button" class="btn btn-primary btn-md">Add premium support to the cart</button>189
190
</div>191
<!--Grid column-->192
193
</div>194
<!--Grid row-->195
196
<hr class="mb-5">197
198
<!--Grid row-->199
<div class="row">200
201
<!--Grid column-->202
<div class="col-md-5 mb-4">203
204
<img src="https://mdbootstrap.com/img/Photos/Others/images/44.jpg" class="img-fluid z-depth-1-half"205
alt="Second sample image">206
207
</div>208
<!--Grid column-->209
210
<!--Grid column-->211
<div class="col-md-7 mb-4">212
213
<h5 class="mb-3 h5">MDB Membership</h5>214
215
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti,216
dolorem.</p>217
218
<!--Name-->219
<select class="mdb-select colorful-select dropdown-info">220
<option value="" disabled>Choose a period of time</option>221
<option value="1" selected>+6 months : 200$</option>222
<option value="2">+12 months: 400$</option>223
<option value="3">+18 months: 800$</option>224
<option value="4">+24 months: 1200$</option>225
</select>226
227
<button type="button" class="btn btn-primary btn-md">Add MDB Membership to the cart</button>228
229
</div>230
<!--Grid column-->231
232
</div>233
<!--Grid row-->234
235
<hr class="mb-4">236
237
<button class="btn btn-primary btn-lg btn-block" type="submit">Next step</button>238
239
</div>240
<!--/.Panel 2-->241
242
<!--Panel 3-->243
<div class="tab-pane fade" id="tabCheckoutPayment123" role="tabpanel">244
245
<div class="d-block my-3">246
<div class="mb-2">247
<input name="group2" type="radio" class="form-check-input with-gap" id="radioWithGap4" checked248
required>249
<label class="form-check-label" for="radioWithGap4">Credit card</label>250
</div>251
<div class="mb-2">252
<input iname="group2" type="radio" class="form-check-input with-gap" id="radioWithGap5"253
required>254
<label class="form-check-label" for="radioWithGap5">Debit card</label>255
</div>256
<div class="mb-2">257
<input name="group2" type="radio" class="form-check-input with-gap" id="radioWithGap6" required>258
<label class="form-check-label" for="radioWithGap6">Paypal</label>259
</div>260
</div>261
<div class="row">262
<div class="col-md-6 mb-3">263
<label for="cc-name123">Name on card</label>264
<input type="text" class="form-control" id="cc-name123" placeholder="" required>265
<small class="text-muted">Full name as displayed on card</small>266
<div class="invalid-feedback">267
Name on card is required268
</div>269
</div>270
<div class="col-md-6 mb-3">271
<label for="cc-number123">Credit card number</label>272
<input type="text" class="form-control" id="cc-number123" placeholder="" required>273
<div class="invalid-feedback">274
Credit card number is required275
</div>276
</div>277
</div>278
<div class="row">279
<div class="col-md-3 mb-3">280
<label for="cc-expiration123">Expiration</label>281
<input type="text" class="form-control" id="cc-expiration123" placeholder="" required>282
<div class="invalid-feedback">283
Expiration date required284
</div>285
</div>286
<div class="col-md-3 mb-3">287
<label for="cc-cvv123">CVV</label>288
<input type="text" class="form-control" id="cc-cvv123" placeholder="" required>289
<div class="invalid-feedback">290
Security code required291
</div>292
</div>293
</div>294
<hr class="mb-4">295
296
<button class="btn btn-primary btn-lg btn-block" type="submit">Place order</button>297
298
</div>299
<!--/.Panel 3-->300
301
</div>302
<!-- Pills panels -->303
304
305
</div>306
<!--Grid column-->307
308
<!--Grid column-->309
<div class="col-lg-4 mb-4">310
311
<button class="btn btn-primary btn-lg btn-block" type="submit">Place order</button>312
313
<!--Card-->314
<div class="card z-depth-0 border border-light rounded-0">315
316
<!--Card content-->317
<div class="card-body">318
<h4 class="mb-4 mt-1 h5 text-center font-weight-bold">Summary</h4>319
320
<hr>321
322
<dl class="row">323
<dd class="col-sm-8">324
MDBootstrap UI KIT (jQuery version) - License 6-10 poeple + unlimited projects325
</dd>326
<dd class="col-sm-4">327
$ 2000328
</dd>329
</dl>330
331
<hr>332
333
<dl class="row">334
<dd class="col-sm-8">335
Premium support - 2 years336
</dd>337
<dd class="col-sm-4">338
$ 2000339
</dd>340
</dl>341
342
<hr>343
344
<dl class="row">345
<dd class="col-sm-8">346
MDB Membership - 2 years347
</dd>348
<dd class="col-sm-4">349
$ 2000350
</dd>351
</dl>352
353
<hr>354
355
<dl class="row">356
<dt class="col-sm-8">357
Total358
</dt>359
<dt class="col-sm-4">360
$ 2000361
</dt>362
</dl>363
</div>364
365
</div>366
<!--/.Card-->367
368
369
370
</div>371
<!--Grid column-->372
373
</div>374
<!--Grid row-->375
376
</div>377
</div>378
379
</section>380
<!--Section: Content-->381
382
383
</div>1
1
xxxxxxxxxx1
// Material Select Initialization2
$(document).ready(function() {3
$('.mdb-select').material_select();4
}); Console errors: 0