HTML
xxxxxxxxxx1
2
<body class="fixed-sn cyan-skin">3
4
<!--Double navigation-->5
<header>6
<!-- Sidebar navigation -->7
<div id="slide-out" class="side-nav sn-bg-4 fixed">8
<ul class="custom-scrollbar">9
<!-- Logo -->10
<li>11
<div class="logo-wrapper waves-light">12
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>13
</div>14
</li>15
<!--/. Logo -->16
<!--Social-->17
<li>18
<ul class="social">19
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>20
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>21
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>22
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>23
</ul>24
</li>25
<!--/Social-->26
<!--Search Form-->27
<li>28
<form class="search-form" role="search">29
<div class="form-group md-form mt-0 pt-1 waves-light">30
<input type="text" class="form-control" placeholder="Search">31
</div>32
</form>33
</li>34
<!--/.Search Form-->35
<!-- Side navigation links -->36
<li>37
<ul class="collapsible collapsible-accordion">38
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit blog<i39
class="fas fa-angle-down rotate-icon"></i></a>40
<div class="collapsible-body">41
<ul class="list-unstyled">42
<li><a href="#" class="waves-effect">Submit listing</a>43
</li>44
<li><a href="#" class="waves-effect">Registration form</a>45
</li>46
</ul>47
</div>48
</li>49
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-hand-pointer"></i> Instruction<i50
class="fas fa-angle-down rotate-icon"></i></a>51
<div class="collapsible-body">52
<ul class="list-unstyled">53
<li><a href="#" class="waves-effect">For bloggers</a>54
</li>55
<li><a href="#" class="waves-effect">For authors</a>56
</li>57
</ul>58
</div>59
</li>60
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>61
<div class="collapsible-body">62
<ul class="list-unstyled">63
<li><a href="#" class="waves-effect">Introduction</a>64
</li>65
<li><a href="#" class="waves-effect">Monthly meetings</a>66
</li>67
</ul>68
</div>69
</li>70
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>71
<div class="collapsible-body">72
<ul class="list-unstyled">73
<li><a href="#" class="waves-effect">FAQ</a>74
</li>75
<li><a href="#" class="waves-effect">Write a message</a>76
</li>77
<li><a href="#" class="waves-effect">FAQ</a>78
</li>79
<li><a href="#" class="waves-effect">Write a message</a>80
</li>81
<li><a href="#" class="waves-effect">FAQ</a>82
</li>83
<li><a href="#" class="waves-effect">Write a message</a>84
</li>85
<li><a href="#" class="waves-effect">FAQ</a>86
</li>87
<li><a href="#" class="waves-effect">Write a message</a>88
</li>89
</ul>90
</div>91
</li>92
</ul>93
</li>94
<!--/. Side navigation links -->95
</ul>96
<div class="sidenav-bg mask-strong"></div>97
</div>98
<!--/. Sidebar navigation -->99
<!-- Navbar -->100
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">101
<!-- SideNav slide-out button -->102
<div class="float-left">103
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>104
</div>105
<!-- Breadcrumb-->106
<div class="breadcrumb-dn mr-auto">107
<p>Material Design for Bootstrap</p>108
</div>109
<ul class="nav navbar-nav nav-flex-icons ml-auto">110
<li class="nav-item">111
<a class="nav-link"><i class="fas fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>112
</li>113
<li class="nav-item">114
<a class="nav-link"><i class="fas fa-comments"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>115
</li>116
<li class="nav-item">117
<a class="nav-link"><i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>118
</li>119
<li class="nav-item dropdown">120
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"121
aria-haspopup="true" aria-expanded="false">122
Dropdown123
</a>124
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">125
<a class="dropdown-item" href="#">Action</a>126
<a class="dropdown-item" href="#">Another action</a>127
<a class="dropdown-item" href="#">Something else here</a>128
</div>129
</li>130
</ul>131
</nav>132
<!-- /.Navbar -->133
</header>134
<!--/.Double navigation-->135
136
<!--Main layout-->137
<main>138
139
<div class="container-fluid text-center">140
141
<!--Card-->142
<div class="card card-cascade wider reverse my-4 pb-5">143
144
<!--Card image-->145
<div class="view view-cascade overlay wow fadeIn">146
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).jpg" class="img-fluid">147
<a href="#!">148
<div class="mask rgba-white-slight"></div>149
</a>150
</div>151
<!--/Card image-->152
153
<!--Card content-->154
<div class="card-body card-body-cascade text-center wow fadeIn" data-wow-delay="0.2s">155
<!--Title-->156
<h4 class="card-title"><strong>My adventure</strong></h4>157
<h5 class="blue-text"><strong>Photography</strong></h5>158
159
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque160
laudantium, totam rem aperiam.161
</p>162
163
<a class="btn btn-primary btn-lg">Primary button</a>164
<a class="btn btn-secondary btn-lg">Secondary button</a>165
<a class="btn btn-default btn-lg">Default button</a>166
167
</div>168
<!--/.Card content-->169
170
</div>171
<!--/.Card-->172
173
</div>174
175
</main>176
<!--/Main layout-->177
178
<!--Footer-->179
<footer class="page-footer text-center text-md-left pt-4">180
181
<!--Footer Links-->182
<div class="container-fluid">183
<div class="row">184
185
<!--First column-->186
<div class="col-md-3">187
<h5 class="text-uppercase font-weight-bold mb-4">Footer Content</h5>188
<p>Here you can use rows and columns here to organize your footer content.</p>189
</div>190
<!--/.First column-->191
192
<hr class="w-100 clearfix d-md-none">193
194
<!--Second column-->195
<div class="col-md-2 mx-auto">196
<h5 class="text-uppercase font-weight-bold mb-4">Links</h5>197
<ul class="list-unstyled">198
<li><a href="#!">Link 1</a></li>199
<li><a href="#!">Link 2</a></li>200
<li><a href="#!">Link 3</a></li>201
<li><a href="#!">Link 4</a></li>202
</ul>203
</div>204
<!--/.Second column-->205
206
<hr class="w-100 clearfix d-md-none">207
208
<!--Third column-->209
<div class="col-md-2 mx-auto">210
<h5 class="text-uppercase font-weight-bold mb-4">Links</h5>211
<ul class="list-unstyled">212
<li><a href="#!">Link 1</a></li>213
<li><a href="#!">Link 2</a></li>214
<li><a href="#!">Link 3</a></li>215
<li><a href="#!">Link 4</a></li>216
</ul>217
</div>218
<!--/.Third column-->219
220
<hr class="w-100 clearfix d-md-none">221
222
<!--Fourth column-->223
<div class="col-md-2 mx-auto">224
<h5 class="text-uppercase font-weight-bold mb-4">Links</h5>225
<ul class="list-unstyled">226
<li><a href="#!">Link 1</a></li>227
<li><a href="#!">Link 2</a></li>228
<li><a href="#!">Link 3</a></li>229
<li><a href="#!">Link 4</a></li>230
</ul>231
</div>232
<!--/.Fourth column-->233
234
</div>235
</div>236
<!--/.Footer Links-->237
238
<hr>239
240
<!--Call to action-->241
<div class="call-to-action text-center my-4">242
<ul class="list-unstyled list-inline">243
<li class="list-inline-item">244
<h5>Register for free</h5>245
</li>246
<li class="list-inline-item"><a href="" class="btn btn-primary">Sign up!</a></li>247
</ul>248
</div>249
<!--/.Call to action-->250
251
<hr>252
253
<!--Social buttons-->254
<div class="social-section text-center">255
<ul class="list-unstyled list-inline">256
<li class="list-inline-item"><a class="btn-floating btn-fb"><i class="fab fa-facebook-f"> </i></a></li>257
<li class="list-inline-item"><a class="btn-floating btn-tw"><i class="fab fa-twitter"> </i></a></li>258
<li class="list-inline-item"><a class="btn-floating btn-gplus"><i class="fab fa-google-plus-g"> </i></a></li>259
<li class="list-inline-item"><a class="btn-floating btn-li"><i class="fab fa-linkedin-in"> </i></a></li>260
<li class="list-inline-item"><a class="btn-floating btn-git"><i class="fab fa-github"> </i></a></li>261
</ul>262
</div>263
<!--/.Social buttons-->264
265
<!--Copyright-->266
<div class="footer-copyright py-3 text-center">267
<div class="container-fluid">268
© 2018 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>269
270
</div>271
</div>272
<!--/.Copyright-->273
274
</footer>275
<!--/.Footer-->276
277
</body>CSS
xxxxxxxxxx1
/* Only for snippet */2
.double-nav .breadcrumb-dn {3
color: #fff;4
}JS
xxxxxxxxxx1
$(document).ready(() => {2
// SideNav Initialization3
$(".button-collapse").sideNav();4
5
new WOW().init();6
}); Console errors: 0