One Page Nav

<!-- vendor --> <link rel="stylesheet" href="vendor/onepagenav/css/onepagenav.css">
<div class="opn-nav"> <div class="opn-nav-layout"> <div class="opn-nav-logo"> <a href=""><img src="img/icon-core.png"></a> </div> <div class="opn-nav-items" id="opnNavItems"> <ul class="opn-nav-items-list" id="nav"> <li class="current"><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="opn-nav-toggle" id="opnToggle"> <i class="fa fa-list-ul"></i> </div> </div> </div> <div class="height-m" id="home"> </div> <div class="height-m" id="portfolio"> portfolio </div> <div class="height-m" id="about"> about </div> <div class="height-m" id="contact"> contact </div>
<script src="vendor/onepagenav/js/onepagenav.js"></script> <script src="vendor/onepagenav/js/onepagenav.setting.js"></script>

owlCarousel

Core With Owl Carousel
Core With Owl Carousel
Core With Owl Carousel
<!-- vendor --> <link rel="stylesheet" href="vendor/owlcarousel/css/owl.carousel.css">
<!-- owlCarousel --> <div class="owl-carousel owl-theme"> <div class="owl-bg owl-bg1"> <div class="owl-bg-light"> <div class="position-middle center-align"> Core With Owl Carousel </div> </div> </div> <div class="owl-bg owl-bg2"> <div class="owl-bg-light"> <div class="position-middle center-align"> Core With Owl Carousel </div> </div> </div> <div class="owl-bg owl-bg3"> <div class="owl-bg-light"> <div class="position-middle center-align"> Core With Owl Carousel </div> </div> </div> </div> <!-- end owlCarousel -->
<script src="vendor/owlcarousel/js/owl.carousel.js"></script> <script src="vendor/owlcarousel/js/owl.carousel.setting.js"></script>

Hoverdir

Navbar Smooth

Hoverdir Grid

<!-- nav.smooth.css --> <link rel="stylesheet" href="vendor/hoversmooth/css/hover.smooth.css"> <!-- nav.smooth.nojs.css --> <link rel="stylesheet" href="vendor/hoversmooth/css/hover.smooth.nojs.css"> <!-- hover smooth grid --> <body class="da-thumbs" id="da-thumbs"> <div class="row"> <div class="column l4 m4 s12"> <div class="da-thumbs-items"> <a href="#"> <img src="img/c3.jpg" alt="hover"> <div class="da-thumbs-light"></div> </a> </div> <div class="da-thumbs-items"> <a href="#"> <img src="img/c3.jpg" alt="hover"> <div class="da-thumbs-light"></div> </a> </div> </div> <div class="column l4 m4 s12"> <div class="da-thumbs-items"> <a href="#"> <img src="img/c3.jpg" alt="hover"> <div class="da-thumbs-light"></div> </a> </div> <div class="da-thumbs-items"> <a href="#"> <img src="img/c3.jpg" alt="hover"> <div class="da-thumbs-light"></div> </a> </div> </div> <div class="column l4 m4 s12"> <div class="da-thumbs-items"> <a href="#"> <img src="img/c3.jpg" alt="hover"> <div class="da-thumbs-light"></div> </a> </div> <div class="da-thumbs-items"> <a href="#"> <img src="img/c3.jpg" alt="hover"> <div class="da-thumbs-light"></div> </a> </div> </div> </div> </body> <!-- end hover smooth grid --> <!-- hoverdir --> <script src="vendor/hoversmooth/js/hover.smooth.js"></script> <script src="vendor/hoversmooth/js/hoverdir.js"></script> <script src="vendor/hoversmooth/js/hoverdir.setting.js"></script>

Nav Doc