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