xxxxxxxxxx1
<body class="fixed-sn grey-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(70).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>Form test</strong></h4>156
157
<form class="mt-3">158
<div class="md-form">159
<input type="text" class="form-control" minlength="2" maxlength="50" required="">160
<label for="contact_form_name" class="">Your name</label>161
</div>162
<div class="md-form">163
<input type="email" class="form-control" maxlength="100" required="">164
<label for="contact_form_email" class="">Your Email address</label>165
</div>166
<div class="md-form mb-1">167
<textarea class="md-textarea form-control" rows="5" maxlength="10000" required=""></textarea>168
<label for="contact_form_message" class="">Enter your message</label>169
</div>170
</form>171
172
</div>173
<!--/.Card content-->174
175
</div>176
<!--/.Card-->177
178
</div>179
180
</main>181
<!--/Main layout-->182
183
<!--Footer-->184
<footer class="page-footer text-center text-md-left pt-4">185
186
<!--Footer Links-->187
<div class="container-fluid">188
<div class="row">189
190
<!--First column-->191
<div class="col-md-3">192
<h5 class="text-uppercase font-weight-bold mb-4">Footer Content</h5>193
<p>Here you can use rows and columns here to organize your footer content.</p>194
</div>195
<!--/.First column-->196
197
<hr class="w-100 clearfix d-md-none">198
199
<!--Second column-->200
<div class="col-md-2 mx-auto">201
<h5 class="text-uppercase font-weight-bold mb-4">Links</h5>202
<ul class="list-unstyled">203
<li><a href="#!">Link 1</a></li>204
<li><a href="#!">Link 2</a></li>205
<li><a href="#!">Link 3</a></li>206
<li><a href="#!">Link 4</a></li>207
</ul>208
</div>209
<!--/.Second column-->210
211
<hr class="w-100 clearfix d-md-none">212
213
<!--Third column-->214
<div class="col-md-2 mx-auto">215
<h5 class="text-uppercase font-weight-bold mb-4">Links</h5>216
<ul class="list-unstyled">217
<li><a href="#!">Link 1</a></li>218
<li><a href="#!">Link 2</a></li>219
<li><a href="#!">Link 3</a></li>220
<li><a href="#!">Link 4</a></li>221
</ul>222
</div>223
<!--/.Third column-->224
225
<hr class="w-100 clearfix d-md-none">226
227
<!--Fourth column-->228
<div class="col-md-2 mx-auto">229
<h5 class="text-uppercase font-weight-bold mb-4">Links</h5>230
<ul class="list-unstyled">231
<li><a href="#!">Link 1</a></li>232
<li><a href="#!">Link 2</a></li>233
<li><a href="#!">Link 3</a></li>234
<li><a href="#!">Link 4</a></li>235
</ul>236
</div>237
<!--/.Fourth column-->238
239
</div>240
</div>241
<!--/.Footer Links-->242
243
<hr>244
245
<!--Call to action-->246
<div class="call-to-action text-center my-4">247
<ul class="list-unstyled list-inline">248
<li class="list-inline-item">249
<h5>Register for free</h5>250
</li>251
<li class="list-inline-item"><a href="" class="btn btn-primary">Sign up!</a></li>252
</ul>253
</div>254
<!--/.Call to action-->255
256
<hr>257
258
<!--Social buttons-->259
<div class="social-section text-center">260
<ul class="list-unstyled list-inline">261
<li class="list-inline-item"><a class="btn-floating btn-fb"><i class="fab fa-facebook-f"> </i></a></li>262
<li class="list-inline-item"><a class="btn-floating btn-tw"><i class="fab fa-twitter"> </i></a></li>263
<li class="list-inline-item"><a class="btn-floating btn-gplus"><i class="fab fa-google-plus-g"> </i></a></li>264
<li class="list-inline-item"><a class="btn-floating btn-li"><i class="fab fa-linkedin-in"> </i></a></li>265
<li class="list-inline-item"><a class="btn-floating btn-git"><i class="fab fa-github"> </i></a></li>266
</ul>267
</div>268
<!--/.Social buttons-->269
270
<!--Copyright-->271
<div class="footer-copyright py-3 text-center">272
<div class="container-fluid">273
© 2018 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>274
275
</div>276
</div>277
<!--/.Copyright-->278
279
</footer>280
<!--/.Footer-->281
282
</body>283
xxxxxxxxxx1
/* Only for snippet */2
.double-nav .breadcrumb-dn {3
color: #fff;4
}xxxxxxxxxx1
// SideNav Initialization2
$(".button-collapse").sideNav();3
4
new WOW().init(); Console errors: 0