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