HTML
xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Section: Block Content -->4
<section>5
6
<!-- Nav tabs -->7
<ul class="nav md-tabs nav-justified grey lighten-3 mx-0" role="tablist">8
<li class="nav-item">9
<a class="nav-link active dark-grey-text font-weight-bold" data-toggle="tab" href="#panel5" role="tab"> Bestsellers</a>10
</li>11
<li class="nav-item">12
<a class="nav-link dark-grey-text font-weight-bold" data-toggle="tab" href="#panel6" role="tab">Top offers</a>13
</li>14
<li class="nav-item">15
<a class="nav-link dark-grey-text font-weight-bold" data-toggle="tab" href="#panel7" role="tab">Best rated</a>16
</li>17
</ul>18
19
<!-- Tab panels -->20
<div class="tab-content px-0 pt-5">21
22
<!-- Panel 1 -->23
<div class="tab-pane fade in show active" id="panel5" role="tabpanel">24
25
<!-- Grid row -->26
<div class="row">27
28
<!-- Grid column -->29
<div class="col-lg-4 col-md-12 mb-4 d-flex align-items-stretch">30
31
<!-- Card -->32
<div class="card card-ecommerce">33
34
<div class="view overlay">35
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.jpg" class="img-fluid" alt="sample image">36
<a>37
<div class="mask rgba-white-slight"></div>38
</a>39
</div>40
41
<div class="card-body">42
43
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">Asus CT-567</a></strong></h5>44
<span class="badge badge-danger mb-2">bestseller</span>45
46
<ul class="rating">47
<li>48
<i class="fas fa-star blue-text"></i>49
</li>50
<li>51
<i class="fas fa-star blue-text"></i>52
</li>53
<li>54
<i class="fas fa-star blue-text"></i>55
</li>56
<li>57
<i class="fas fa-star blue-text"></i>58
</li>59
<li>60
<i class="fas fa-star blue-text"></i>61
</li>62
</ul>63
64
<div class="card-footer pb-0">65
<div class="row mb-0">66
<span class="float-left">67
<strong>1439$</strong>68
</span>69
<span class="float-right">70
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">71
<i class="fas fa-shopping-cart ml-3"></i>72
</a>73
</span>74
</div>75
</div>76
77
</div>78
79
</div>80
<!-- Card -->81
82
</div>83
<!-- Grid column -->84
85
<!-- Grid column -->86
<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">87
88
<!-- Card -->89
<div class="card card-ecommerce">90
91
<div class="view overlay">92
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/2.jpg" class="img-fluid" alt="sample image">93
<a>94
<div class="mask rgba-white-slight"></div>95
</a>96
</div>97
98
<div class="card-body">99
100
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">iPad PRO</a></strong></h5>101
<span class="badge badge-danger mb-2">bestseller</span>102
<span class="badge badge-success mb-2 ml-2">SALE</span>103
104
<ul class="rating">105
<li>106
<i class="fas fa-star blue-text"></i>107
</li>108
<li>109
<i class="fas fa-star blue-text"></i>110
</li>111
<li>112
<i class="fas fa-star blue-text"></i>113
</li>114
<li>115
<i class="fas fa-star blue-text"></i>116
</li>117
<li>118
<i class="fas fa-star grey-text"></i>119
</li>120
</ul>121
122
<div class="card-footer pb-0">123
<div class="row mb-0">124
<h5 class="mb-0 pb-0 mt-1 font-weight-bold">125
<span class="red-text">126
<strong>$699</strong>127
</span>128
<span class="grey-text">129
<small>130
<s>$920</s>131
</small>132
</span>133
</h5>134
<span class="float-right">135
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">136
<i class="fas fa-shopping-cart ml-3"></i>137
</a>138
</span>139
</div>140
</div>141
142
</div>143
144
</div>145
<!-- Card -->146
147
</div>148
<!-- Grid column -->149
150
<!-- Grid column -->151
<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">152
153
<!-- Card -->154
<div class="card card-ecommerce">155
156
<div class="view overlay">157
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/4.jpg" class="img-fluid" alt="sample image">158
<a>159
<div class="mask rgba-white-slight"></div>160
</a>161
</div>162
163
<div class="card-body">164
165
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">Dell V-964i</a></strong></h5>166
<span class="badge badge-danger mb-2">bestseller</span>167
<span class="badge badge-info mb-2 ml-2">new</span>168
169
<ul class="rating">170
<li>171
<i class="fas fa-star blue-text"></i>172
</li>173
<li>174
<i class="fas fa-star blue-text"></i>175
</li>176
<li>177
<i class="fas fa-star blue-text"></i>178
</li>179
<li>180
<i class="fas fa-star blue-text"></i>181
</li>182
<li>183
<i class="fas fa-star blue-text"></i>184
</li>185
</ul>186
187
<div class="card-footer pb-0">188
<div class="row mb-0">189
<span class="float-left">190
<strong>1439$</strong>191
</span>192
<span class="float-right">193
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">194
<i class="fas fa-shopping-cart ml-3"></i>195
</a>196
</span>197
</div>198
</div>199
200
</div>201
202
</div>203
<!-- Card -->204
205
</div>206
<!-- Grid column -->207
208
</div>209
<!-- Grid row -->210
211
</div>212
<!-- Panel 1 -->213
214
<!-- Panel 2 -->215
<div class="tab-pane fade" id="panel6" role="tabpanel">216
217
<!-- Grid row -->218
<div class="row mb-3">219
220
<!-- Grid column -->221
<div class="col-lg-4 col-md-12 mb-4 d-flex align-items-stretch">222
223
<!-- Card -->224
<div class="card card-ecommerce">225
226
<div class="view overlay">227
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/8.jpg" class="img-fluid" alt="sample image">228
<a>229
<div class="mask rgba-white-slight"></div>230
</a>231
</div>232
233
<div class="card-body">234
235
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">Samsung V54</a></strong></h5>236
<span class="badge grey mb-2">best rated</span>237
238
<ul class="rating">239
<li>240
<i class="fas fa-star blue-text"></i>241
</li>242
<li>243
<i class="fas fa-star blue-text"></i>244
</li>245
<li>246
<i class="fas fa-star blue-text"></i>247
</li>248
<li>249
<i class="fas fa-star blue-text"></i>250
</li>251
<li>252
<i class="fas fa-star blue-text"></i>253
</li>254
</ul>255
256
<div class="card-footer pb-0">257
<div class="row mb-0">258
<span class="float-left">259
<strong>1439$</strong>260
</span>261
<span class="float-right">262
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">263
<i class="fas fa-shopping-cart ml-3"></i>264
</a>265
</span>266
</div>267
</div>268
269
</div>270
271
</div>272
<!-- Card -->273
274
</div>275
<!-- Grid column -->276
277
<!-- Grid column -->278
<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">279
280
<!-- Card -->281
<div class="card card-ecommerce">282
283
<div class="view overlay">284
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/7.jpg" class="img-fluid" alt="sample image">285
<a>286
<div class="mask rgba-white-slight"></div>287
</a>288
</div>289
290
<div class="card-body">291
292
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">Dell 786i</a></strong></h5>293
<span class="badge badge-info mb-2">new</span>294
295
<ul class="rating">296
<li>297
<i class="fas fa-star blue-text"></i>298
</li>299
<li>300
<i class="fas fa-star blue-text"></i>301
</li>302
<li>303
<i class="fas fa-star blue-text"></i>304
</li>305
<li>306
<i class="fas fa-star blue-text"></i>307
</li>308
<li>309
<i class="fas fa-star grey-text"></i>310
</li>311
</ul>312
313
<div class="card-footer pb-0">314
<div class="row mb-0">315
<span class="float-left">316
<strong>1439$</strong>317
</span>318
<span class="float-right">319
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">320
<i class="fas fa-shopping-cart ml-3"></i>321
</a>322
</span>323
</div>324
</div>325
326
</div>327
328
</div>329
<!-- Card -->330
331
</div>332
<!-- Grid column -->333
334
<!-- Grid column -->335
<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">336
337
<!-- Card -->338
<div class="card card-ecommerce">339
340
<div class="view overlay">341
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/9.jpg" class="img-fluid" alt="sample image">342
<a>343
<div class="mask rgba-white-slight"></div>344
</a>345
</div>346
347
<div class="card-body">348
349
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">Canon 675-D</a></strong></h5>350
<span class="badge badge-info mb-2">new</span>351
<span class="badge badge-success mb-2 ml-2">SALE</span>352
353
<ul class="rating">354
<li>355
<i class="fas fa-star blue-text"></i>356
</li>357
<li>358
<i class="fas fa-star blue-text"></i>359
</li>360
<li>361
<i class="fas fa-star blue-text"></i>362
</li>363
<li>364
<i class="fas fa-star blue-text"></i>365
</li>366
<li>367
<i class="fas fa-star blue-text"></i>368
</li>369
</ul>370
371
<div class="card-footer pb-0">372
<div class="row mb-0">373
<h5 class="mb-0 pb-0 mt-1 font-weight-bold">374
<span class="red-text">375
<strong>$1199</strong>376
</span>377
<span class="grey-text">378
<small>379
<s>$1520</s>380
</small>381
</span>382
</h5>383
<span class="float-right">384
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">385
<i class="fas fa-shopping-cart ml-3"></i>386
</a>387
</span>388
</div>389
</div>390
391
</div>392
393
</div>394
<!-- Card -->395
396
</div>397
<!-- Grid column -->398
399
</div>400
<!-- Grid row -->401
402
</div>403
<!-- Panel 2 -->404
405
<!-- Panel 3 -->406
<div class="tab-pane fade" id="panel7" role="tabpanel">407
408
<!-- Grid row -->409
<div class="row">410
411
<!-- Grid column -->412
<div class="col-lg-4 col-md-12 mb-4 d-flex align-items-stretch">413
414
<!-- Card -->415
<div class="card card-ecommerce">416
417
<div class="view overlay">418
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/10.jpg" class="img-fluid" alt="sample image">419
<a>420
<div class="mask rgba-white-slight"></div>421
</a>422
</div>423
424
<div class="card-body">425
426
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">Headphones</a></strong></h5>427
<span class="badge badge-danger mb-2">bestseller</span>428
429
<ul class="rating">430
<li>431
<i class="fas fa-star blue-text"></i>432
</li>433
<li>434
<i class="fas fa-star blue-text"></i>435
</li>436
<li>437
<i class="fas fa-star blue-text"></i>438
</li>439
<li>440
<i class="fas fa-star blue-text"></i>441
</li>442
<li>443
<i class="fas fa-star blue-text"></i>444
</li>445
</ul>446
447
<div class="card-footer pb-0">448
<div class="row mb-0">449
<span class="float-left">450
<strong>1439$</strong>451
</span>452
<span class="float-right">453
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">454
<i class="fas fa-shopping-cart ml-3"></i>455
</a>456
</span>457
</div>458
</div>459
460
</div>461
462
</div>463
<!-- Card -->464
465
</div>466
<!-- Grid column -->467
468
<!-- Grid column -->469
<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">470
471
<!-- Card -->472
<div class="card card-ecommerce">473
474
<div class="view overlay">475
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/11.jpg"class="img-fluid" alt="sample image">476
<a>477
<div class="mask rgba-white-slight"></div>478
</a>479
</div>480
481
<div class="card-body">482
483
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">iPhone</a></strong></h5>484
<span class="badge badge-info mb-2">new</span>485
486
<ul class="rating">487
<li>488
<i class="fas fa-star blue-text"></i>489
</li>490
<li>491
<i class="fas fa-star blue-text"></i>492
</li>493
<li>494
<i class="fas fa-star blue-text"></i>495
</li>496
<li>497
<i class="fas fa-star blue-text"></i>498
</li>499
<li>500
<i class="fas fa-star blue-text"></i>501
</li>502
</ul>503
504
<div class="card-footer pb-0">505
<div class="row mb-0">506
<span class="float-left">507
<strong>1439$</strong>508
</span>509
<span class="float-right">510
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">511
<i class="fas fa-shopping-cart ml-3"></i>512
</a>513
</span>514
</div>515
</div>516
517
</div>518
519
</div>520
<!-- Card -->521
522
</div>523
<!-- Grid column -->524
525
<!-- Grid column -->526
<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">527
528
<!-- Card -->529
<div class="card card-ecommerce">530
531
<div class="view overlay">532
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/3.jpg" class="img-fluid" alt="sample image">533
<a>534
<div class="mask rgba-white-slight"></div>535
</a>536
</div>537
538
<div class="card-body">539
540
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">iMac</a></strong></h5>541
<span class="badge badge-danger mb-2">bestseller</span>542
543
<ul class="rating">544
<li>545
<i class="fas fa-star blue-text"></i>546
</li>547
<li>548
<i class="fas fa-star blue-text"></i>549
</li>550
<li>551
<i class="fas fa-star blue-text"></i>552
</li>553
<li>554
<i class="fas fa-star blue-text"></i>555
</li>556
<li>557
<i class="fas fa-star grey-text"></i>558
</li>559
</ul>560
561
<div class="card-footer pb-0">562
<div class="row mb-0">563
<span class="float-left">564
<strong>1439$</strong>565
</span>566
<span class="float-right">567
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">568
<i class="fas fa-shopping-cart ml-3"></i>569
</a>570
</span>571
</div>572
</div>573
574
</div>575
576
</div>577
<!-- Card -->578
579
</div>580
<!-- Grid column -->581
582
</div>583
<!-- Grid row -->584
585
</div>586
<!-- Panel 3 -->587
588
</div>589
<!-- Tab panels -->590
591
</section>592
<!-- Section: Block Content -->593
594
</div>CSS
1
1
JS
1
1
Console errors: 0