HTML
xxxxxxxxxx1
<header>2
<!-- Jumbotron -->3
<div class="p-3 text-center bg-white border-bottom">4
<div class="container">5
<div class="row gy-3">6
<!-- Left elements -->7
<div class="col-lg-2 col-sm-4 col-4">8
<a href="https://mdbootstrap.com/" target="_blank" class="float-start">9
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />10
</a>11
</div>12
<!-- Left elements -->13
14
<!-- Center elements -->15
<div class="order-lg-last col-lg-5 col-sm-8 col-8">16
<div class="d-flex float-end">17
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="me-1 border rounded py-1 px-3 nav-link d-flex align-items-center" target="_blank">18
<i class="fas fa-user-alt m-1 me-md-2"></i>19
<p class="d-none d-md-block mb-0">Sign in</p>20
</a>21
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="me-1 border rounded py-1 px-3 nav-link d-flex align-items-center" target="_blank">22
<i class="fas fa-heart m-1 me-md-2"></i>23
<p class="d-none d-md-block mb-0">Wishlist</p>24
</a>25
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="border rounded py-1 px-3 nav-link d-flex align-items-center" target="_blank">26
<i class="fas fa-shopping-cart m-1 me-md-2"></i>27
<p class="d-none d-md-block mb-0">My cart</p>28
</a>29
</div>30
</div>31
<!-- Center elements -->32
33
<!-- Right elements -->34
<div class="col-lg-5 col-md-12 col-12">35
<div class="input-group float-center">36
<div class="form-outline">37
<input type="search" id="form1" class="form-control" />38
<label class="form-label" for="form1">Search</label>39
</div>40
<button type="button" class="btn btn-primary shadow-0">41
<i class="fas fa-search"></i>42
</button>43
</div>44
</div>45
<!-- Right elements -->46
</div>47
</div>48
</div>49
<!-- Jumbotron -->50
51
<!-- Heading -->52
<div class="bg-primary">53
<div class="container py-4">54
<!-- Breadcrumb -->55
<nav class="d-flex">56
<h6 class="mb-0">57
<a href="" class="text-white-50">Home</a>58
<span class="text-white-50 mx-2"> > </span>59
<a href="" class="text-white"><u>Shopping cart</u></a>60
</h6>61
</nav>62
<!-- Breadcrumb -->63
</div>64
</div>65
<!-- Heading -->66
</header>67
68
<!-- cart + summary -->69
<section class="bg-light my-5">70
<div class="container">71
<div class="row">72
<!-- cart -->73
<div class="col-lg-9">74
<div class="card border shadow-0">75
<div class="m-4">76
<h4 class="card-title mb-4">Your shopping cart</h4>77
<div class="row gy-3 mb-4">78
<div class="col-lg-5">79
<div class="me-lg-5">80
<div class="d-flex">81
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/11.webp" class="border rounded me-3" style="width: 96px; height: 96px;" />82
<div class="">83
<a href="#" class="nav-link">Winter jacket for men and lady</a>84
<p class="text-muted">Yellow, Jeans</p>85
</div>86
</div>87
</div>88
</div>89
<div class="col-lg-2 col-sm-6 col-6 d-flex flex-row flex-lg-column flex-xl-row text-nowrap">90
<div class="">91
<select style="width: 100px;" class="form-select me-4">92
<option>1</option>93
<option>2</option>94
<option>3</option>95
<option>4</option>96
</select>97
</div>98
<div class="">99
<text class="h6">$1156.00</text> <br />100
<small class="text-muted text-nowrap"> $460.00 / per item </small>101
</div>102
</div>103
<div class="col-lg col-sm-6 d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center justify-content-xl-end mb-2">104
<div class="float-md-end">105
<a href="#!" class="btn btn-light border px-2 icon-hover-primary"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>106
<a href="#" class="btn btn-light border text-danger icon-hover-danger"> Remove</a>107
</div>108
</div>109
</div>110
111
<div class="row gy-3 mb-4">112
<div class="col-lg-5">113
<div class="me-lg-5">114
<div class="d-flex">115
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/12.webp" class="border rounded me-3" style="width: 96px; height: 96px;" />116
<div class="">117
<a href="#" class="nav-link">Mens T-shirt Cotton Base</a>118
<p class="text-muted">Blue, Medium</p>119
</div>120
</div>121
</div>122
</div>123
<div class="col-lg-2 col-sm-6 col-6 d-flex flex-row flex-lg-column flex-xl-row text-nowrap">124
<div class="">125
<select style="width: 100px;" class="form-select me-4">126
<option>1</option>127
<option>2</option>128
<option>3</option>129
<option>4</option>130
</select>131
</div>132
<div class="">133
<text class="h6">$44.80</text> <br />134
<small class="text-muted text-nowrap"> $12.20 / per item </small>135
</div>136
</div>137
<div class="col-lg col-sm-6 d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center justify-content-xl-end mb-2">138
<div class="float-md-end">139
<a href="#!" class="btn btn-light border px-2 icon-hover-primary"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>140
<a href="#" class="btn btn-light border text-danger icon-hover-danger"> Remove</a>141
</div>142
</div>143
</div>144
145
<div class="row gy-3">146
<div class="col-lg-5">147
<div class="me-lg-5">148
<div class="d-flex">149
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/13.webp" class="border rounded me-3" style="width: 96px; height: 96px;" />150
<div class="">151
<a href="#" class="nav-link">Blazer Suit Dress Jacket for Men</a>152
<p class="text-muted">XL size, Jeans, Blue</p>153
</div>154
</div>155
</div>156
</div>157
<div class="col-lg-2 col-sm-6 col-6 d-flex flex-row flex-lg-column flex-xl-row text-nowrap">158
<div class="">159
<select style="width: 100px;" class="form-select me-4">160
<option>1</option>161
<option>2</option>162
<option>3</option>163
<option>4</option>164
</select>165
</div>166
<div class="">167
<text class="h6">$1156.00</text> <br />168
<small class="text-muted text-nowrap"> $460.00 / per item </small>169
</div>170
</div>171
<div class="col-lg col-sm-6 d-flex justify-content-sm-center justify-content-md-start justify-content-lg-center justify-content-xl-end mb-2">172
<div class="float-md-end">173
<a href="#!" class="btn btn-light border px-2 icon-hover-primary"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>174
<a href="#" class="btn btn-light border text-danger icon-hover-danger"> Remove</a>175
</div>176
</div>177
</div>178
</div>179
180
<div class="border-top pt-4 mx-4 mb-4">181
<p><i class="fas fa-truck text-muted fa-lg"></i> Free Delivery within 1-2 weeks</p>182
<p class="text-muted">183
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut184
aliquip185
</p>186
</div>187
</div>188
</div>189
<!-- cart -->190
<!-- summary -->191
<div class="col-lg-3">192
<div class="card mb-3 border shadow-0">193
<div class="card-body">194
<form>195
<div class="form-group">196
<label class="form-label">Have coupon?</label>197
<div class="input-group">198
<input type="text" class="form-control border" name="" placeholder="Coupon code" />199
<button class="btn btn-light border">Apply</button>200
</div>201
</div>202
</form>203
</div>204
</div>205
<div class="card shadow-0 border">206
<div class="card-body">207
<div class="d-flex justify-content-between">208
<p class="mb-2">Total price:</p>209
<p class="mb-2">$329.00</p>210
</div>211
<div class="d-flex justify-content-between">212
<p class="mb-2">Discount:</p>213
<p class="mb-2 text-success">-$60.00</p>214
</div>215
<div class="d-flex justify-content-between">216
<p class="mb-2">TAX:</p>217
<p class="mb-2">$14.00</p>218
</div>219
<hr />220
<div class="d-flex justify-content-between">221
<p class="mb-2">Total price:</p>222
<p class="mb-2 fw-bold">$283.00</p>223
</div>224
225
<div class="mt-3">226
<a href="#" class="btn btn-success w-100 shadow-0 mb-2"> Make Purchase </a>227
<a href="#" class="btn btn-light w-100 border mt-2"> Back to shop </a>228
</div>229
</div>230
</div>231
</div>232
<!-- summary -->233
</div>234
</div>235
</section>236
<!-- cart + summary -->237
<section>238
<div class="container my-5">239
<header class="mb-4">240
<h3>Recommended items</h3>241
</header>242
243
<div class="row">244
<div class="col-lg-3 col-md-6 col-sm-6">245
<div class="card px-4 border shadow-0 mb-4 mb-lg-0">246
<div class="mask px-2" style="height: 50px;">247
<div class="d-flex justify-content-between">248
<h6><span class="badge bg-danger pt-1 mt-3 ms-2">New</span></h6>249
<a href="#"><i class="fas fa-heart text-primary fa-lg float-end pt-3 m-2"></i></a>250
</div>251
</div>252
<a href="#" class="">253
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/7.webp" class="card-img-top rounded-2" />254
</a>255
<div class="card-body d-flex flex-column pt-3 border-top">256
<a href="#" class="nav-link">Gaming Headset with Mic</a>257
<div class="price-wrap mb-2">258
<strong class="">$18.95</strong>259
<del class="">$24.99</del>260
</div>261
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">262
<a href="#" class="btn btn-outline-primary w-100">Add to cart</a>263
</div>264
</div>265
</div>266
</div>267
<div class="col-lg-3 col-md-6 col-sm-6">268
<div class="card px-4 border shadow-0 mb-4 mb-lg-0">269
<div class="mask px-2" style="height: 50px;">270
<a href="#"><i class="fas fa-heart text-primary fa-lg float-end pt-3 m-2"></i></a>271
</div>272
<a href="#" class="">273
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/5.webp" class="card-img-top rounded-2" />274
</a>275
<div class="card-body d-flex flex-column pt-3 border-top">276
<a href="#" class="nav-link">Apple Watch Series 1 Sport </a>277
<div class="price-wrap mb-2">278
<strong class="">$120.00</strong>279
</div>280
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">281
<a href="#" class="btn btn-outline-primary w-100">Add to cart</a>282
</div>283
</div>284
</div>285
</div>286
<div class="col-lg-3 col-md-6 col-sm-6">287
<div class="card px-4 border shadow-0">288
<div class="mask px-2" style="height: 50px;">289
<a href="#"><i class="fas fa-heart text-primary fa-lg float-end pt-3 m-2"></i></a>290
</div>291
<a href="#" class="">292
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/9.webp" class="card-img-top rounded-2" />293
</a>294
<div class="card-body d-flex flex-column pt-3 border-top">295
<a href="#" class="nav-link">Men's Denim Jeans Shorts</a>296
<div class="price-wrap mb-2">297
<strong class="">$80.50</strong>298
</div>299
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">300
<a href="#" class="btn btn-outline-primary w-100">Add to cart</a>301
</div>302
</div>303
</div>304
</div>305
<div class="col-lg-3 col-md-6 col-sm-6">306
<div class="card px-4 border shadow-0">307
<div class="mask px-2" style="height: 50px;">308
<a href="#"><i class="fas fa-heart text-primary fa-lg float-end pt-3 m-2"></i></a>309
</div>310
<a href="#" class="">311
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/10.webp" class="card-img-top rounded-2" />312
</a>313
<div class="card-body d-flex flex-column pt-3 border-top">314
<a href="#" class="nav-link">Mens T-shirt Cotton Base Layer Slim fit </a>315
<div class="price-wrap mb-2">316
<strong class="">$13.90</strong>317
</div>318
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">319
<a href="#" class="btn btn-outline-primary w-100">Add to cart</a>320
</div>321
</div>322
</div>323
</div>324
</div>325
</div>326
</section>327
<!-- Recommended -->328
329
<!-- Footer -->330
<footer class="text-center text-lg-start text-muted bg-primary mt-3">331
<!-- Section: Links -->332
<section class="">333
<div class="container text-center text-md-start pt-4 pb-4">334
<!-- Grid row -->335
<div class="row mt-3">336
<!-- Grid column -->337
<div class="col-12 col-lg-3 col-sm-12 mb-2">338
<!-- Content -->339
<a href="https://mdbootstrap.com/" target="_blank" class="text-white h2">340
MDB341
</a>342
<p class="mt-1 text-white">343
© 2023 Copyright: MDBootstrap.com344
</p>345
</div>346
<!-- Grid column -->347
348
<!-- Grid column -->349
<div class="col-6 col-sm-4 col-lg-2">350
<!-- Links -->351
<h6 class="text-uppercase text-white fw-bold mb-2">352
Store353
</h6>354
<ul class="list-unstyled mb-4">355
<li><a class="text-white-50" href="#">About us</a></li>356
<li><a class="text-white-50" href="#">Find store</a></li>357
<li><a class="text-white-50" href="#">Categories</a></li>358
<li><a class="text-white-50" href="#">Blogs</a></li>359
</ul>360
</div>361
<!-- Grid column -->362
363
<!-- Grid column -->364
<div class="col-6 col-sm-4 col-lg-2">365
<!-- Links -->366
<h6 class="text-uppercase text-white fw-bold mb-2">367
Information368
</h6>369
<ul class="list-unstyled mb-4">370
<li><a class="text-white-50" href="#">Help center</a></li>371
<li><a class="text-white-50" href="#">Money refund</a></li>372
<li><a class="text-white-50" href="#">Shipping info</a></li>373
<li><a class="text-white-50" href="#">Refunds</a></li>374
</ul>375
</div>376
<!-- Grid column -->377
378
<!-- Grid column -->379
<div class="col-6 col-sm-4 col-lg-2">380
<!-- Links -->381
<h6 class="text-uppercase text-white fw-bold mb-2">382
Support383
</h6>384
<ul class="list-unstyled mb-4">385
<li><a class="text-white-50" href="#">Help center</a></li>386
<li><a class="text-white-50" href="#">Documents</a></li>387
<li><a class="text-white-50" href="#">Account restore</a></li>388
<li><a class="text-white-50" href="#">My orders</a></li>389
</ul>390
</div>391
<!-- Grid column -->392
393
<!-- Grid column -->394
<div class="col-12 col-sm-12 col-lg-3">395
<!-- Links -->396
<h6 class="text-uppercase text-white fw-bold mb-2">Newsletter</h6>397
<p class="text-white">Stay in touch with latest updates about our products and offers</p>398
<div class="input-group mb-3">399
<input type="email" class="form-control border" placeholder="Email" aria-label="Email" aria-describedby="button-addon2" />400
<button class="btn btn-light border shadow-0" type="button" id="button-addon2" data-mdb-ripple-color="dark">401
Join402
</button>403
</div>404
</div>405
<!-- Grid column -->406
</div>407
<!-- Grid row -->408
</div>409
</section>410
<!-- Section: Links -->411
412
<div class="">413
<div class="container">414
<div class="d-flex justify-content-between py-4 border-top">415
<!--- payment --->416
<div>417
<i class="fab fa-lg fa-cc-visa text-white"></i>418
<i class="fab fa-lg fa-cc-amex text-white"></i>419
<i class="fab fa-lg fa-cc-mastercard text-white"></i>420
<i class="fab fa-lg fa-cc-paypal text-white"></i>421
</div>422
<!--- payment --->423
424
<!--- language selector --->425
<div class="dropdown dropup">426
<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>427
428
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="Dropdown">429
<li>430
<a class="dropdown-item" href="#"><i class="flag-united-kingdom flag"></i>English <i class="fa fa-check text-success ms-2"></i></a>431
</li>432
<li><hr class="dropdown-divider" /></li>433
<li>434
<a class="dropdown-item" href="#"><i class="flag-poland flag"></i>Polski</a>435
</li>436
<li>437
<a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>438
</li>439
<li>440
<a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>441
</li>442
<li>443
<a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>444
</li>445
<li>446
<a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>447
</li>448
<li>449
<a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>450
</li>451
<li>452
<a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>453
</li>454
<li>455
<a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>456
</li>457
</ul>458
</div>459
<!--- language selector --->460
</div>461
</div>462
</div>463
</footer>464
<!-- Footer -->CSS
xxxxxxxxxx1
.icon-hover-primary:hover {2
border-color: #3b71ca !important;3
background-color: white !important;4
}5
6
.icon-hover-primary:hover i {7
color: #3b71ca !important;8
}9
.icon-hover-danger:hover {10
border-color: #dc4c64 !important;11
background-color: white !important;12
}13
14
.icon-hover-danger:hover i {15
color: #dc4c64 !important;16
}JS
1
1
Console errors: 0