HTML
xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Section -->4
<section>5
6
<style>7
.md-pills .nav-link.active {8
color: #fff;9
background-color: #616161;10
}11
button.close {12
position: absolute;13
right: 0;14
z-index: 2;15
padding-right: 1rem;16
padding-top: .6rem;17
}18
</style>19
20
<!-- Modal -->21
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">22
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">23
<div class="modal-content">24
<div class="modal-body p-0">25
<button type="button" class="close" data-dismiss="modal" aria-label="Close">26
<span aria-hidden="true">×</span>27
</button>28
29
<!-- Grid row -->30
<div class="row">31
32
<!-- Grid column -->33
<div class="col-md-6 py-5 pl-5">34
35
<h5 class="font-weight-normal mb-3">Paper cup mockup</h5>36
37
<p class="text-muted">Key letters, explain which writing we he carpeting or fame, the itch expand medical amped through constructing time. And scarfs, gain, get showed accounts decades.</p>38
39
<ul class="list-unstyled font-small mt-5">40
<li>41
<p class="text-uppercase mb-2"><strong>Client</strong></p>42
<p class="text-muted mb-4">Envato Inc.</p>43
</li>44
45
<li>46
<p class="text-uppercase mb-2"><strong>Date</strong></p>47
<p class="text-muted mb-4">June 27, 2019</p>48
</li>49
50
<li>51
<p class="text-uppercase mb-2"><strong>Skills</strong></p>52
<p class="text-muted mb-4">Design, HTML, CSS, Javascript</p>53
</li>54
55
<li>56
<p class="text-uppercase mb-2"><strong>Address</strong></p>57
<a href="https://mdbootstrap.com/docs/jquery/design-blocks/">MDBootstrap</a>58
</li>59
</ul>60
61
</div>62
<!-- Grid column -->63
64
<!-- Grid column -->65
<div class="col-md-6">66
67
<div class="view rounded-right">68
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/5.jpg" alt="Sample image">69
</div>70
71
</div>72
<!-- Grid column -->73
74
</div>75
<!-- Grid row -->76
77
</div>78
</div>79
</div>80
</div>81
82
<h6 class="font-weight-bold text-center grey-text text-uppercase small mb-4">portfolio</h6>83
<h3 class="font-weight-bold text-center dark-grey-text pb-2">Product Designs</h3>84
<hr class="w-header my-4">85
<p class="lead text-center text-muted pt-2 mb-5">You can find several product design by our professional team in86
this section.</p>87
88
<!--First row-->89
<div class="row">90
91
<!--First column-->92
<div class="col-12">93
94
<!-- Nav tabs -->95
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">96
<li class="nav-item">97
<a class="nav-link active font-weight-bold text-uppercase" data-toggle="tab" href="#panel31" role="tab">ALL</a>98
</li>99
<li class="nav-item">100
<a class="nav-link font-weight-bold text-uppercase" data-toggle="tab" href="#panel32" role="tab">Design</a>101
</li>102
<li class="nav-item">103
<a class="nav-link font-weight-bold text-uppercase" data-toggle="tab" href="#panel33" role="tab">Mockup</a>104
</li>105
</ul>106
107
</div>108
<!--First column-->109
110
</div>111
<!--First row-->112
113
<!--Tab panels-->114
<div class="tab-content mb-5">115
116
<!--Panel 1-->117
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">118
119
<!-- Grid row -->120
<div class="row">121
122
<!-- Grid column -->123
<div class="col-md-12 col-lg-4">124
125
<!-- Card -->126
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">127
128
<!-- Card image -->129
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img3.jpg" alt="Card image cap">130
131
<!-- Card content -->132
<div class="card-body">133
134
<h5 class="my-3">Phone Bag</h5>135
<p class="card-text text-uppercase mb-3">Bag, Box</p>136
137
</div>138
139
</a>140
<!-- Card -->141
142
<!-- Card -->143
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">144
145
<!-- Card image -->146
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img9.jpg" alt="Card image cap">147
148
<!-- Card content -->149
<div class="card-body">150
151
<h5 class="my-3">Paper Bag</h5>152
<p class="card-text text-uppercase mb-3">Bag</p>153
154
</div>155
156
</a>157
<!-- Card -->158
159
</div>160
<!-- Grid column -->161
162
<!-- Grid column -->163
<div class="col-md-6 col-lg-4">164
165
<!-- Card -->166
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">167
168
<!-- Card image -->169
<img class="card-img-top" src=" https://mdbootstrap.com/img/Photos/Others/img4.jpg" alt="Card image cap">170
171
<!-- Card content -->172
<div class="card-body">173
174
<h5 class="my-3">Book</h5>175
<p class="card-text text-uppercase mb-3">Book</p>176
177
</div>178
179
</a>180
<!-- Card -->181
182
<!-- Card -->183
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">184
185
<!-- Card image -->186
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img5.jpg" alt="Card image cap">187
188
<!-- Card content -->189
<div class="card-body">190
191
<h5 class="my-3">Notes</h5>192
<p class="card-text text-uppercase mb-3">Note</p>193
194
</div>195
196
</a>197
<!-- Card -->198
199
</div>200
<!-- Grid column -->201
202
<!-- Grid column -->203
<div class="col-md-6 col-lg-4">204
205
<!-- Card -->206
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">207
208
<!-- Card image -->209
<img class="card-img-top" src=" https://mdbootstrap.com/img/Photos/Others/img10.jpg" alt="Card image cap">210
211
<!-- Card content -->212
<div class="card-body">213
214
<h5 class="my-3">T-shirt</h5>215
<p class="card-text text-uppercase mb-3">Box</p>216
217
</div>218
219
</a>220
<!-- Card -->221
222
<!-- Card -->223
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">224
225
<!-- Card image -->226
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img8.jpg" alt="Card image cap">227
228
<!-- Card content -->229
<div class="card-body">230
231
<h5 class="my-3">Magazine</h5>232
<p class="card-text text-uppercase mb-3">Book</p>233
234
</div>235
236
</a>237
<!-- Card -->238
239
</div>240
<!-- Grid column -->241
242
</div>243
<!-- Grid row -->244
245
</div>246
<!--Panel 1-->247
248
<!--Panel 2-->249
<div class="tab-pane fade" id="panel32" role="tabpanel">250
251
<!-- Grid row -->252
<div class="row">253
254
<!-- Grid column -->255
<div class="col-md-12 col-lg-4">256
257
<!-- Card -->258
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">259
260
<!-- Card image -->261
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img9.jpg" alt="Card image cap">262
263
<!-- Card content -->264
<div class="card-body">265
266
<h5 class="my-3">Paper Bag</h5>267
<p class="card-text text-uppercase mb-3">Bag</p>268
269
</div>270
271
</a>272
<!-- Card -->273
274
</div>275
<!-- Grid column -->276
277
<!-- Grid column -->278
<div class="col-md-6 col-lg-4">279
280
<!-- Card -->281
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">282
283
<!-- Card image -->284
<img class="card-img-top" src=" https://mdbootstrap.com/img/Photos/Others/img4.jpg" alt="Card image cap">285
286
<!-- Card content -->287
<div class="card-body">288
289
<h5 class="my-3">Book</h5>290
<p class="card-text text-uppercase mb-3">Book</p>291
292
</div>293
294
</a>295
<!-- Card -->296
297
</div>298
<!-- Grid column -->299
300
<!-- Grid column -->301
<div class="col-md-6 col-lg-4">302
303
<!-- Card -->304
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">305
306
<!-- Card image -->307
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img8.jpg" alt="Card image cap">308
309
<!-- Card content -->310
<div class="card-body">311
312
<h5 class="my-3">Magazine</h5>313
<p class="card-text text-uppercase mb-3">Book</p>314
315
</div>316
317
</a>318
<!-- Card -->319
320
</div>321
<!-- Grid column -->322
323
</div>324
<!-- Grid row -->325
326
</div>327
<!--Panel 2-->328
329
<!--Panel 3-->330
<div class="tab-pane fade" id="panel33" role="tabpanel">331
332
<!-- Grid row -->333
<div class="row">334
335
<!-- Grid column -->336
<div class="col-md-12 col-lg-4">337
338
<!-- Card -->339
<div class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">340
341
<!-- Card image -->342
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img3.jpg" alt="Card image cap">343
344
<!-- Card content -->345
<div class="card-body">346
347
<h5 class="my-3">Phone Bag</h5>348
<p class="card-text text-uppercase mb-3">Bag, Box</p>349
350
</div>351
352
</div>353
<!-- Card -->354
355
</div>356
<!-- Grid column -->357
358
<!-- Grid column -->359
<div class="col-md-6 col-lg-4">360
361
<!-- Card -->362
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">363
364
<!-- Card image -->365
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img5.jpg" alt="Card image cap">366
367
<!-- Card content -->368
<div class="card-body">369
370
<h5 class="my-3">Notes</h5>371
<p class="card-text text-uppercase mb-3">Note</p>372
373
</div>374
375
</a>376
<!-- Card -->377
378
</div>379
<!-- Grid column -->380
381
<!-- Grid column -->382
<div class="col-md-6 col-lg-4">383
384
<!-- Card -->385
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">386
387
<!-- Card image -->388
<img class="card-img-top" src=" https://mdbootstrap.com/img/Photos/Others/img10.jpg" alt="Card image cap">389
390
<!-- Card content -->391
<div class="card-body">392
393
<h5 class="my-3">T-shirt</h5>394
<p class="card-text text-uppercase mb-3">Box</p>395
396
</div>397
398
</a>399
<!-- Card -->400
401
</div>402
<!-- Grid column -->403
404
</div>405
<!-- Grid row -->406
407
</div>408
<!--Panel 3-->409
410
</div>411
<!--Tab panels-->412
413
</section>414
<!-- Section -->415
416
</div>CSS
1
1
JS
xxxxxxxxxx1
$(function () {2
var selectedClass = "";3
$(".filter").click(function () {4
selectedClass = $(this).attr("data-rel");5
$("#gallery").fadeTo(100, 0.1);6
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');7
setTimeout(function () {8
$("." + selectedClass).fadeIn().addClass('animation');9
$("#gallery").fadeTo(300, 1);10
}, 300);11
});12
}); Console errors: 0