HTML
xxxxxxxxxx1
<div class="container my-5 px-5 pt-5 pb-1 z-depth-1">2
3
4
<!--Section: Content-->5
<section class="text-center">6
7
<h6 class="font-weight-normal text-uppercase font-small grey-text mb-4">Feature</h6>8
<!-- Section heading -->9
<h2 class="font-weight-bold mb-5">Cover Varieties</h2>10
<!-- Section description -->11
<p class="lead grey-text mx-auto mb-5">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ex aliquip.</p>12
13
<!-- Grid row -->14
<div class="row mb-5">15
16
<!-- Grid column -->17
<div class="col-12">18
19
<ul class="nav md-pills nav-justified pills-rounded pills-deep-purple">20
<li class="nav-item">21
<a class="nav-link active" data-toggle="tab" href="#panel100" role="tab">Color</a>22
</li>23
<li class="nav-item">24
<a class="nav-link" data-toggle="tab" href="#panel101" role="tab">Gradient</a>25
</li>26
<li class="nav-item">27
<a class="nav-link" data-toggle="tab" href="#panel102" role="tab">Typing</a>28
</li>29
<li class="nav-item">30
<a class="nav-link" data-toggle="tab" href="#panel103" role="tab">Image</a>31
</li>32
<li class="nav-item">33
<a class="nav-link" data-toggle="tab" href="#panel104" role="tab">Video</a>34
</li>35
<li class="nav-item">36
<a class="nav-link" data-toggle="tab" href="#panel105" role="tab">Slider</a>37
</li>38
</ul>39
40
<!-- Tab panels -->41
<div class="tab-content">42
43
<!--Panel 1-->44
<div class="tab-pane fade in show active" id="panel100" role="tabpanel">45
46
<div class="view rounded z-depth-1-half mx-4">47
<img src="https://mdbootstrap.com/img/Photos/Others/Intros/intro3.jpg" alt="Display of a full page intro page with call to action buttons"48
class="img-fluid">49
</div>50
51
</div>52
<!--/.Panel 1-->53
54
<!--Panel 2-->55
<div class="tab-pane fade" id="panel101" role="tabpanel">56
57
<div class="view rounded z-depth-1-half mx-4">58
<img src="https://mdbootstrap.com/img/Photos/Others/Intros/intro1a.jpg" alt="Display of a full page intro page with call to action buttons"59
class="img-fluid">60
</div>61
62
</div>63
<!--/.Panel 2-->64
65
<!--Panel 3-->66
<div class="tab-pane fade" id="panel102" role="tabpanel">67
68
<div class="view rounded z-depth-1-half mx-4">69
<img src="https://mdbootstrap.com/img/Photos/Others/Intros/intro4a.jpg" alt="Display of a full page intro page with call to action buttons"70
class="img-fluid">71
</div>72
73
</div>74
<!--/.Panel 3-->75
76
<!--Panel 4-->77
<div class="tab-pane fade" id="panel103" role="tabpanel">78
79
<div class="view rounded z-depth-1-half mx-4">80
<img src="https://mdbootstrap.com/img/Photos/Others/Intros/intro7.jpg" alt="Display of a full page intro page with call to action buttons"81
class="img-fluid">82
</div>83
84
</div>85
<!--/.Panel 4-->86
87
<!--Panel 5-->88
<div class="tab-pane fade" id="panel104" role="tabpanel">89
90
<div class="view rounded z-depth-1-half mx-4">91
<img src="https://mdbootstrap.com/img/Photos/Others/Intros/intro6a.jpg" alt="Display of a full page intro page with call to action buttons"92
class="img-fluid">93
</div>94
95
</div>96
<!--/.Panel 5-->97
98
<!--Panel 6-->99
<div class="tab-pane fade" id="panel105" role="tabpanel">100
101
<div class="view rounded z-depth-1-half mx-4">102
<img src="https://mdbootstrap.com/img/Photos/Others/Intros/intro2a.jpg" alt="Display of a full page intro page with call to action buttons"103
class="img-fluid">104
</div>105
106
</div>107
<!--/.Panel 6-->108
109
</div>110
111
</div>112
<!-- Grid column -->113
114
</div>115
<!-- Grid row -->116
117
</section>118
<!--Section: Content-->119
120
121
</div>CSS
1
1
JS
1
1
Console errors: 0