xxxxxxxxxx1
<header>2
<!-- Jumbotron -->3
<div class="p-3 text-center bg-white border-bottom">4
<div class="container">5
<div class="d-flex justify-content-between">6
<!-- Left elements -->7
<div class="">8
<a href="https://mdbootstrap.com/" target="_blank" class="">9
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />10
</a>11
</div>12
<!-- Left elements -->13
14
<!-- right elements -->15
<div class="">16
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="me-1 border rounded py-1 px-3 nav-link" target="_blank"> <i class="fas fa-user-alt me-2"></i>Sign in </a>17
</div>18
<!-- right elements -->19
</div>20
</div>21
</div>22
<!-- Jumbotron -->23
24
<!-- Heading -->25
<div class="bg-primary">26
<div class="container py-4">27
<!-- Breadcrumb -->28
<nav class="d-flex">29
<h6 class="mb-0">30
<a href="" class="text-white-50">Home</a>31
<span class="text-white-50 mx-2"> > </span>32
<a href="" class="text-white-50">2. Shopping cart</a>33
<span class="text-white-50 mx-2"> > </span>34
<a href="" class="text-white"><u>3. Order info</u></a>35
<span class="text-white-50 mx-2"> > </span>36
<a href="" class="text-white-50">4. Payment</a>37
</h6>38
</nav>39
<!-- Breadcrumb -->40
</div>41
</div>42
<!-- Heading -->43
</header>44
45
<section class="bg-light py-5">46
<div class="container">47
<div class="row">48
<div class="col-xl-8 col-lg-8 mb-4">49
<div class="card mb-4 border shadow-0">50
<div class="p-4 d-flex justify-content-between">51
<div class="">52
<h5>Have an account?</h5>53
<p class="mb-0 text-wrap ">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>54
</div>55
<div class="d-flex align-items-center justify-content-center flex-column flex-md-row">56
<a href="#" class="btn btn-outline-primary me-0 me-md-2 mb-2 mb-md-0 w-100">Register</a>57
<a href="#" class="btn btn-primary shadow-0 text-nowrap w-100">Sign in</a>58
</div>59
</div>60
</div>61
62
<!-- Checkout -->63
<div class="card shadow-0 border">64
<div class="p-4">65
<h5 class="card-title mb-3">Guest checkout</h5>66
<div class="row">67
<div class="col-6 mb-3">68
<p class="mb-0">First name</p>69
<div class="form-outline">70
<input type="text" id="typeText" placeholder="Type here" class="form-control" />71
</div>72
</div>73
74
<div class="col-6">75
<p class="mb-0">Last name</p>76
<div class="form-outline">77
<input type="text" id="typeText" placeholder="Type here" class="form-control" />78
</div>79
</div>80
81
<div class="col-6 mb-3">82
<p class="mb-0">Phone</p>83
<div class="form-outline">84
<input type="tel" id="typePhone" value="+48 " class="form-control" />85
</div>86
</div>87
88
<div class="col-6 mb-3">89
<p class="mb-0">Email</p>90
<div class="form-outline">91
<input type="email" id="typeEmail" placeholder="example@gmail.com" class="form-control" />92
</div>93
</div>94
</div>95
96
<div class="form-check">97
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />98
<label class="form-check-label" for="flexCheckDefault">Keep me up to date on news</label>99
</div>100
101
<hr class="my-4" />102
103
<h5 class="card-title mb-3">Shipping info</h5>104
105
<div class="row mb-3">106
<div class="col-lg-4 mb-3">107
<!-- Default checked radio -->108
<div class="form-check h-100 border rounded-3">109
<div class="p-3">110
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked />111
<label class="form-check-label" for="flexRadioDefault1">112
Express delivery <br />113
<small class="text-muted">3-4 days via Fedex </small>114
</label>115
</div>116
</div>117
</div>118
<div class="col-lg-4 mb-3">119
<!-- Default radio -->120
<div class="form-check h-100 border rounded-3">121
<div class="p-3">122
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" />123
<label class="form-check-label" for="flexRadioDefault2">124
Post office <br />125
<small class="text-muted">20-30 days via post </small>126
</label>127
</div>128
</div>129
</div>130
<div class="col-lg-4 mb-3">131
<!-- Default radio -->132
<div class="form-check h-100 border rounded-3">133
<div class="p-3">134
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" />135
<label class="form-check-label" for="flexRadioDefault3">136
Self pick-up <br />137
<small class="text-muted">Come to our shop </small>138
</label>139
</div>140
</div>141
</div>142
</div>143
144
<div class="row">145
<div class="col-sm-8 mb-3">146
<p class="mb-0">Address</p>147
<div class="form-outline">148
<input type="text" id="typeText" placeholder="Type here" class="form-control" />149
</div>150
</div>151
152
<div class="col-sm-4 mb-3">153
<p class="mb-0">City</p>154
<select class="form-select">155
<option value="1">New York</option>156
<option value="2">Moscow</option>157
<option value="3">Samarqand</option>158
</select>159
</div>160
161
<div class="col-sm-4 mb-3">162
<p class="mb-0">House</p>163
<div class="form-outline">164
<input type="text" id="typeText" placeholder="Type here" class="form-control" />165
</div>166
</div>167
168
<div class="col-sm-4 col-6 mb-3">169
<p class="mb-0">Postal code</p>170
<div class="form-outline">171
<input type="text" id="typeText" class="form-control" />172
</div>173
</div>174
175
<div class="col-sm-4 col-6 mb-3">176
<p class="mb-0">Zip</p>177
<div class="form-outline">178
<input type="text" id="typeText" class="form-control" />179
</div>180
</div>181
</div>182
183
<div class="form-check mb-3">184
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1" />185
<label class="form-check-label" for="flexCheckDefault1">Save this address</label>186
</div>187
188
<div class="mb-3">189
<p class="mb-0">Message to seller</p>190
<div class="form-outline">191
<textarea class="form-control" id="textAreaExample1" rows="2"></textarea>192
</div>193
</div>194
195
<div class="float-end">196
<button class="btn btn-light border">Cancel</button>197
<button class="btn btn-success shadow-0 border">Continue</button>198
</div>199
</div>200
</div>201
<!-- Checkout -->202
</div>203
<div class="col-xl-4 col-lg-4 d-flex justify-content-center justify-content-lg-end">204
<div class="ms-lg-4 mt-4 mt-lg-0" style="max-width: 320px;">205
<h6 class="mb-3">Summary</h6>206
<div class="d-flex justify-content-between">207
<p class="mb-2">Total price:</p>208
<p class="mb-2">$195.90</p>209
</div>210
<div class="d-flex justify-content-between">211
<p class="mb-2">Discount:</p>212
<p class="mb-2 text-danger">- $60.00</p>213
</div>214
<div class="d-flex justify-content-between">215
<p class="mb-2">Shipping cost:</p>216
<p class="mb-2">+ $14.00</p>217
</div>218
<hr />219
<div class="d-flex justify-content-between">220
<p class="mb-2">Total price:</p>221
<p class="mb-2 fw-bold">$149.90</p>222
</div>223
224
<div class="input-group mt-3 mb-4">225
<input type="text" class="form-control border" name="" placeholder="Promo code" />226
<button class="btn btn-light text-primary border">Apply</button>227
</div>228
229
<hr />230
<h6 class="text-dark my-4">Items in cart</h6>231
232
<div class="d-flex align-items-center mb-4">233
<div class="me-3 position-relative">234
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill badge-secondary">235
1236
</span>237
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/7.webp" style="height: 96px; width: 96x;" class="img-sm rounded border" />238
</div>239
<div class="">240
<a href="#" class="nav-link">241
Gaming Headset with Mic <br />242
Darkblue color243
</a>244
<div class="price text-muted">Total: $295.99</div>245
</div>246
</div>247
248
<div class="d-flex align-items-center mb-4">249
<div class="me-3 position-relative">250
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill badge-secondary">251
1252
</span>253
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/5.webp" style="height: 96px; width: 96x;" class="img-sm rounded border" />254
</div>255
<div class="">256
<a href="#" class="nav-link">257
Apple Watch Series 4 Space <br />258
Large size259
</a>260
<div class="price text-muted">Total: $217.99</div>261
</div>262
</div>263
264
<div class="d-flex align-items-center mb-4">265
<div class="me-3 position-relative">266
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill badge-secondary">267
3268
</span>269
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/1.webp" style="height: 96px; width: 96x;" class="img-sm rounded border" />270
</div>271
<div class="">272
<a href="#" class="nav-link">GoPro HERO6 4K Action Camera - Black</a>273
<div class="price text-muted">Total: $910.00</div>274
</div>275
</div>276
</div>277
</div>278
</div>279
</div>280
</section>281
282
<!-- Footer -->283
<footer class="text-center text-lg-start text-muted bg-primary mt-3">284
<!-- Section: Links -->285
<section class="">286
<div class="container text-center text-md-start pt-4 pb-4">287
<!-- Grid row -->288
<div class="row mt-3">289
<!-- Grid column -->290
<div class="col-12 col-lg-3 col-sm-12 mb-2">291
<!-- Content -->292
<a href="https://mdbootstrap.com/" target="_blank" class="text-white h2">293
MDB294
</a>295
<p class="mt-1 text-white">296
© 2023 Copyright: MDBootstrap.com297
</p>298
</div>299
<!-- Grid column -->300
301
<!-- Grid column -->302
<div class="col-6 col-sm-4 col-lg-2">303
<!-- Links -->304
<h6 class="text-uppercase text-white fw-bold mb-2">305
Store306
</h6>307
<ul class="list-unstyled mb-4">308
<li><a class="text-white-50" href="#">About us</a></li>309
<li><a class="text-white-50" href="#">Find store</a></li>310
<li><a class="text-white-50" href="#">Categories</a></li>311
<li><a class="text-white-50" href="#">Blogs</a></li>312
</ul>313
</div>314
<!-- Grid column -->315
316
<!-- Grid column -->317
<div class="col-6 col-sm-4 col-lg-2">318
<!-- Links -->319
<h6 class="text-uppercase text-white fw-bold mb-2">320
Information321
</h6>322
<ul class="list-unstyled mb-4">323
<li><a class="text-white-50" href="#">Help center</a></li>324
<li><a class="text-white-50" href="#">Money refund</a></li>325
<li><a class="text-white-50" href="#">Shipping info</a></li>326
<li><a class="text-white-50" href="#">Refunds</a></li>327
</ul>328
</div>329
<!-- Grid column -->330
331
<!-- Grid column -->332
<div class="col-6 col-sm-4 col-lg-2">333
<!-- Links -->334
<h6 class="text-uppercase text-white fw-bold mb-2">335
Support336
</h6>337
<ul class="list-unstyled mb-4">338
<li><a class="text-white-50" href="#">Help center</a></li>339
<li><a class="text-white-50" href="#">Documents</a></li>340
<li><a class="text-white-50" href="#">Account restore</a></li>341
<li><a class="text-white-50" href="#">My orders</a></li>342
</ul>343
</div>344
<!-- Grid column -->345
346
<!-- Grid column -->347
<div class="col-12 col-sm-12 col-lg-3">348
<!-- Links -->349
<h6 class="text-uppercase text-white fw-bold mb-2">Newsletter</h6>350
<p class="text-white">Stay in touch with latest updates about our products and offers</p>351
<div class="input-group mb-3">352
<input type="email" class="form-control border" placeholder="Email" aria-label="Email" aria-describedby="button-addon2" />353
<button class="btn btn-light border shadow-0" type="button" id="button-addon2" data-mdb-ripple-color="dark">354
Join355
</button>356
</div>357
</div>358
<!-- Grid column -->359
</div>360
<!-- Grid row -->361
</div>362
</section>363
<!-- Section: Links -->364
365
<div class="">366
<div class="container">367
<div class="d-flex justify-content-between py-4 border-top">368
<!--- payment --->369
<div>370
<i class="fab fa-lg fa-cc-visa text-white"></i>371
<i class="fab fa-lg fa-cc-amex text-white"></i>372
<i class="fab fa-lg fa-cc-mastercard text-white"></i>373
<i class="fab fa-lg fa-cc-paypal text-white"></i>374
</div>375
<!--- payment --->376
377
<!--- language selector --->378
<div class="dropdown dropup">379
<a class="dropdown-toggle text-white" href="#" id="Dropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false"> <i class="flag-united-kingdom flag m-0 me-1"></i>English </a>380
381
<ul class="dropdown-menu dropdown-menu-endp" aria-labelledby="Dropdown">382
<li>383
<a class="dropdown-item" href="#"><i class="flag-united-kingdom flag"></i>English <i class="fa fa-check text-success ms-2"></i></a>384
</li>385
<li><hr class="dropdown-divider" /></li>386
<li>387
<a class="dropdown-item" href="#"><i class="flag-poland flag"></i>Polski</a>388
</li>389
<li>390
<a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>391
</li>392
<li>393
<a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>394
</li>395
<li>396
<a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>397
</li>398
<li>399
<a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>400
</li>401
<li>402
<a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>403
</li>404
<li>405
<a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>406
</li>407
<li>408
<a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>409
</li>410
</ul>411
</div>412
<!--- language selector --->413
</div>414
</div>415
</div>416
</footer>417
<!-- Footer -->1
1
1
1
Console errors: 0