xxxxxxxxxx1
2
<!--Body Navigation--> 3
<body class="fixed-sn white-skin">4
5
<!--Main Navigation-->6
<header>7
8
<!-- Sidebar navigation -->9
<div id="slide-out" class="side-nav fixed">10
<ul class="custom-scrollbar">11
<!-- Logo -->12
<li class="logo-sn waves-effect">13
<div class=" text-center">14
<a href="index.php" class="pl-0">15
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="">16
</a>17
</div>18
</li>19
<!--/. Logo -->20
<!--Search Form-->21
<li>22
<form class="search-form" role="search">23
<div class="form-group md-form mt-0 pt-1 waves-light">24
<input type="text" class="form-control" placeholder="Search">25
</div>26
</form>27
</li>28
<!--/.Search Form-->29
<!-- Side navigation links -->30
<li>31
<ul class="collapsible collapsible-accordion">32
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>33
Policy Center<i class="fas fa-angle-down rotate-icon"></i></a>34
<div class="collapsible-body">35
<ul>36
<li><a href="index.php?content=policycenter" class="waves-effect">Policies</a>37
</li>38
</ul>39
</div>40
</li>41
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>42
Training Center<i class="fas fa-angle-down rotate-icon"></i></a>43
<div class="collapsible-body">44
<ul>45
<li><a href="#" class="waves-effect">Courses</a>46
</li>47
<li><a href="#" class="waves-effect">Completed Training</a>48
</li> 49
<li><a href="#" class="waves-effect">Safety Talks</a> 50
</li>51
</ul>52
</div>53
</li>54
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>55
SDS<i class="fas fa-angle-down rotate-icon"></i></a>56
<div class="collapsible-body">57
<ul>58
<li><a href="#" class="waves-effect">SDS</a>59
</li>60
</ul>61
</div>62
</li>63
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>64
Job Safety<i class="fas fa-angle-down rotate-icon"></i></a>65
<div class="collapsible-body">66
<ul>67
<li><a href="#" class="waves-effect">Work Permits</a>68
</li>69
<li><a href="#" class="waves-effect">LOTO</a>70
</li>71
<li><a href="#" class="waves-effect">Job Hazard Analysis</a>72
</li> 73
</ul>74
</div>75
</li>76
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>77
Safety Reporting<i class="fas fa-angle-down rotate-icon"></i></a>78
<div class="collapsible-body">79
<ul>80
<li><a href="#" class="waves-effect">Incident Reports</a>81
</li>82
</ul>83
</div>84
</li> 85
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-envelope-o"></i> Contact86
me<i class="fas fa-angle-down rotate-icon"></i></a>87
<div class="collapsible-body">88
<ul>89
<li><a href="#" class="waves-effect">FAQ</a>90
</li>91
<li><a href="#" class="waves-effect">Write a message</a>92
</li>93
<li><a href="#" class="waves-effect">FAQ</a>94
</li>95
<li><a href="#" class="waves-effect">Write a message</a>96
</li>97
<li><a href="#" class="waves-effect">FAQ</a>98
</li>99
<li><a href="#" class="waves-effect">Write a message</a>100
</li>101
<li><a href="#" class="waves-effect">FAQ</a>102
</li>103
<li><a href="#" class="waves-effect">Write a message</a>104
</li>105
</ul>106
</div>107
</li>108
</ul>109
</li>110
<!--/. Side navigation links -->111
</ul>112
<div class="sidenav-bg rgba-blue-strong"></div>113
</div>114
<!--/. Sidebar navigation -->115
116
<!-- Navbar -->117
<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar double-nav">118
<!--Navbar-->119
120
<!-- Collapse button -->121
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"122
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">123
<span class="navbar-toggler-icon"></span>124
</button>125
126
<!-- Collapsible content -->127
<div class="collapse navbar-collapse" id="navbarSupportedContent1">128
129
<!-- Links -->130
<ul class="navbar-nav mr-auto">131
132
<!-- News -->133
<li class="nav-item dropdown mega-dropdown">134
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown"135
aria-haspopup="true" aria-expanded="false">News136
<span class="sr-only">(current)</span>137
</a>138
<div class="dropdown-menu mega-menu v-1 z-depth-1 white py-5 px-3"139
aria-labelledby="navbarDropdownMenuLink1">140
<div class="row">141
<div class="col-md-5 col-xl-3 sub-menu mb-xl-0 mb-5">142
<ul class="list-unstyled">143
<li class="sub-title text-uppercase">144
<a class="menu-item pl-1 mt-2" href="#!">145
Laptops146
</a>147
</li>148
<li class="sub-title text-uppercase">149
<a class="menu-item pl-1 mt-2" href="#!">150
Phones151
</a>152
</li>153
<li class="sub-title text-uppercase">154
<a class="menu-item pl-1 mt-2" href="#!">155
Lifestyle156
</a>157
</li>158
<li class="sub-title text-uppercase">159
<a class="menu-item pl-1 mt-2" href="#!">160
Technology161
</a>162
</li>163
<li class="sub-title text-uppercase">164
<a class="menu-item pl-1 mt-2" href="#!">165
Design166
</a>167
</li>168
</ul>169
</div>170
<div class="col-md-7 col-xl-4 sub-menu mb-xl-0 mb-4">171
<h6 class="sub-title pb-3 text-uppercase font-weight-bold">Featured</h6>172
<!--Featured image-->173
<a href="#!" class="view overlay z-depth-1 p-0 my-3">174
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(42).jpg"175
class="img-fluid" alt="First sample image">176
<div class="mask rgba-white-slight"></div>177
</a>178
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit amet, consectetur179
isum adipisicing elit.</a>180
<p class="font-small text-uppercase text-muted">By <a class="p-0 m-sm" href="#!">Anna Doe</a> -181
July 15, 2017</p>182
</div>183
<div class="col-md-12 col-xl-5 sub-menu mb-md-0 mb-xl-0 mb-4">184
<h6 class="sub-title pb-3 text-uppercase font-weight-bold">Design</h6>185
<div class="news-single">186
<div class="row">187
<div class="col-md-4">188
<!--Image-->189
<a href="#!" class="view overlay z-depth-1 p-0 my-3">190
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg"191
class="img-fluid" alt="First sample image">192
<div class="mask rgba-white-slight"></div>193
</a>194
</div>195
<div class="col-md-8">196
<a class="news-title smaller mt-md-2 pl-0" href="#!">Duis aute irure dolor reprehenderit in197
voluptate.</a>198
<p class="font-small text-uppercase text-muted">July 14, 2017</p>199
</div>200
</div>201
</div>202
<div class="news-single">203
<div class="row">204
<div class="col-md-4">205
<!--Image-->206
<a href="#!" class="view overlay z-depth-1 p-0 mb-3 mt-4">207
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg"208
class="img-fluid" alt="First sample image">209
<div class="mask rgba-white-slight"></div>210
</a>211
</div>212
<div class="col-md-8">213
<a class="news-title smaller mt-md-2 pl-0" href="#!">Tempore autem reiciendis iste nam214
dicta.</a>215
<p class="font-small text-uppercase text-muted">July 14, 2017</p>216
</div>217
</div>218
</div>219
<div class="news-single">220
<div class="row">221
<div class="col-md-4">222
<!--Image-->223
<a href="#!" class="view overlay z-depth-1 p-0 mb-3 mt-4">224
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).jpg"225
class="img-fluid" alt="First sample image">226
<div class="mask rgba-white-slight"></div>227
</a>228
</div>229
<div class="col-md-8">230
<a class="news-title smaller mt-2 pl-0" href="#!">Eligendi dicta sunt amet, totam ea231
recusandae.</a>232
<p class="font-small text-uppercase text-muted">July 14, 2017</p>233
</div>234
</div>235
</div>236
</div>237
</div>238
</div>239
</li>240
241
</ul>242
<!-- Links -->243
244
<!-- Links -->245
<ul class="navbar-nav nav-flex-icons ml-auto">246
<li class="nav-item">247
<a class="nav-link" href="#!">248
<i class="fab fa-facebook-f" aria-hidden="true"></i>249
</a>250
</li>251
<li class="nav-item">252
<a class="nav-link" href="#!">253
<i class="fab fa-twitter" aria-hidden="true"></i>254
</a>255
</li>256
<li class="nav-item dropdown">257
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown"258
aria-haspopup="true" aria-expanded="false">259
<i class="fas"><?php echo $member_fname." ".$member_lname;?></i>260
</a>261
<div class="dropdown-menu dropdown-menu-right dropdown-default"262
aria-labelledby="navbarDropdownMenuLink-333">263
<a class="dropdown-item" href="#">Action</a>264
<a class="dropdown-item" href="#">Another action</a>265
<a class="dropdown-item" href="logout.php">Log Out</a>266
</div>267
</li>268
</ul>269
<!-- Links -->270
271
</div>272
<!-- Collapsible content -->273
274
</nav>275
<!-- Navbar --> 276
277
278
</header> 279
<!--Main Navigation-->280
281
282
283
<!--Main layout-->284
<main>285
<p>286
sample text287
</p>288
289
</main>290
<!--Main layout-->291
292
293
294
295
296
<!-- Footer -->297
<footer class="page-footer font-small">298
299
<!-- Footer Elements -->300
<div class="container">301
302
<!-- Grid row-->303
<div class="row">304
305
<!-- Grid column -->306
<div class="col-md-12 py-5">307
<div class="mb-5 flex-center">308
309
<!-- Facebook -->310
<a class="fb-ic">311
<i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>312
</a>313
<!-- Twitter -->314
<a class="tw-ic">315
<i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>316
</a>317
<!-- Google +-->318
<a class="gplus-ic">319
<i class="fab fa-google-plus-g fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>320
</a>321
<!--Linkedin -->322
<a class="li-ic">323
<i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>324
</a>325
<!--Instagram-->326
<a class="ins-ic">327
<i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>328
</a>329
<!--Pinterest-->330
<a class="pin-ic">331
<i class="fab fa-pinterest fa-lg white-text fa-2x"> </i>332
</a>333
</div>334
</div>335
<!-- Grid column -->336
337
</div>338
<!-- Grid row-->339
340
</div>341
<!-- Footer Elements -->342
343
<!-- Copyright -->344
<div class="footer-copyright text-center py-3">© 2020 Copyright:345
<a href="https://mdbootstrap.com/"> Stream Solutions.com</a>346
</div>347
<!-- Copyright -->348
349
</footer>350
<!-- Footer --> 351
352
353
354
<!-- End your project here-->355
356
<!-- jQuery -->357
<script type="text/javascript" src="js/jquery.min.js"></script>358
<!-- Bootstrap tooltips -->359
<script type="text/javascript" src="js/popper.min.js"></script>360
<!-- Bootstrap core JavaScript -->361
<script type="text/javascript" src="js/bootstrap.min.js"></script>362
<!-- MDB core JavaScript -->363
<script type="text/javascript" src="js/mdb.min.js"></script>364
<!-- Your custom scripts (optional) -->365
<script type="text/javascript">366
367
// Animations initialization368
$(document).ready(() => {369
new WOW().init();370
});371
372
373
// sticky header function374
// $(function(){375
//376
// $("header").sticky({377
// zIndex: 100,378
// stopper: "footer",379
// });380
//381
// });382
383
384
// Material Select Initialization385
$(document).ready(function () {386
$('.mdb-select').materialSelect();387
}); 388
389
390
// Date Picker391
$('.datepicker').datepicker({392
// Escape any “rule” characters with an exclamation mark (!).393
format: 'dddd, mmm dd, yyyy',394
formatSubmit: 'yyyy/mm/dd',395
hiddenPrefix: 'prefix__',396
hiddenSuffix: '__suffix'397
})398
399
400
// SideNav Button Initialization401
$(".button-collapse").sideNav();402
// SideNav Scrollbar Initialization403
var sideNavScrollbar = document.querySelector('.custom-scrollbar');404
Ps.initialize(sideNavScrollbar);405
406
407
</script>408
409
</body>410
<!--Body Navigation--> 411
</html>xxxxxxxxxx1
/* mega menu hover effect*/2
.dropdown:hover .dropdown-menu {display: block;}3
4
body {5
/* background-color: #eee;*/6
}7
8
main {9
height: 1650px;10
}11
12
/* side nav logo . */13
.side-nav .logo-sn {14
padding-bottom: 1rem;15
padding-top: 1rem;16
}17
18
.side-nav .logo-sn img {19
height: 38px;20
}21
22
23
/* side nav placement*/24
.side-nav .search-form input[type=text] {25
margin-top: 0;26
padding-top: 12px;27
padding-bottom: 12px;28
border-top: 1px solid rgba(255, 255, 255, 0.3);29
border-bottom: 1px solid rgba(255, 255, 255, 0.3);30
}1
1
Console errors: 0