<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Fullscreen-Responsive-Image-Slider-with-jQuery-Tinyslide/css/tinyslide.css" >
<div id="main-wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div>
<a id="menu-toggle1" href="#" class="glyphicon glyphicon-arrow-left btn-menu toggle pull-right nav-arrow menu-toggle">
<i class="fa fa-delete"></i>
</a>
</div>
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="">
<a href="#home11">
<span class="fa fa-home solo">Home</span>
</a>
</li>
<li>
<a href="#anch1" data-scroll>
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li>
<a href="#anch2" data-scroll>
<span class="fa fa-anchor solo">Anchor 2</span>
</a>
</li>
<li>
<a href="#anch3" data-scroll>
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4" data-scroll>
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="content-header">
<h3 id="home">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle menu-toggle">
<i class="fa fa-bars"></i>
</a>
<a href="#home">Site Logo Here</a>
</h3>
</div>
<div class="page-content inset" data-spy="scroll" data-target="#spy">
<div class="tinysliderBox">
<section id="tiny" class="tinyslide">
<aside class="slides">
<figure>
<img src="https://unsplash.it/1800/1600?image=271" alt="" />
<figcaption> Description One </figcaption>
</figure>
<figure>
<img src="https://unsplash.it/1800/1600?image=274" alt="" />
<figcaption> Description Two </figcaption>
</figure>
<figure>
<img src="https://unsplash.it/1800/1600?image=275" alt="" />
<figcaption> Description Three </figcaption>
</figure>
</aside>
</section>
</div>
<div class="container">
<div class="row">
<legend id="home11">Home</legend>
<br>
<div class="jumbotron text-center">
<h1>Hello Beautiful!</h1>
<p>This is a sidebar navigation responsive template built off of Bootstrap 3.0 and simple sidebar
template. It includes anchors, scroll spy, smooth scroll, and Awesome icon fonts.</p>
<p>
<a class="btn btn-default">Click On Me!</a>
<a class="btn btn-info">Tweet Me!</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 well">
<legend id="anch1">Content 1</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies, metus eget fringilla
fermentum, sem justo pulvinar tellus, ac varius neque ante eget mi. Donec cursus nibh ultrices
vulputate aliquet. Morbi nulla enim, molestie eu ullamcorper quis, placerat a mauris. Proin
vel magna ullamcorper, vulputate leo eu, egestas odio. Vivamus erat leo, egestas in euismod
sed, fermentum nec magna. Nunc nisi enim, euismod a tellus sit amet, fermentum adipiscing
ipsum. Fusce rhoncus diam ac neque aliquam convallis. Etiam malesuada, nibh id rutrum euismod,
enim augue gravida dolor, at vulputate felis mi at magna. Nulla luctus, libero eget luctus
gravida, sapien enim varius massa, adipiscing aliquet lacus mi eu eros. Duis pretium laoreet
ullamcorper. Aenean in mauris nec libero tincidunt pharetra non et dui. Sed tortor turpis,
mollis et tempus eu, auctor laoreet neque. Etiam eu tortor rutrum, rutrum mauris sit amet,
hendrerit augue. Sed ut tincidunt nisi. Nam consectetur velit ac pharetra venenatis.</p>
<p>Donec pellentesque id quam vel iaculis. Phasellus commodo tempor metus, eget sollicitudin odio
ultricies id. Proin sed ipsum quis turpis suscipit luctus vitae id urna. Fusce et rhoncus
quam. Etiam vel justo ligula. Nullam euismod lacinia risus a pulvinar. Pellentesque sit amet
nisl eget ante vulputate feugiat. Suspendisse venenatis magna nunc, mollis facilisis neque
condimentum ac. Vivamus non semper dui. Aenean sed eleifend dui. Vivamus a massa aliquam
nibh consectetur luctus id at ligula. Nunc ipsum dolor, mollis at sem et, auctor rhoncus
ipsum. Nulla faucibus venenatis est sit amet facilisis. In vestibulum nisi at tellus egestas,
in pharetra enim fringilla. In ac erat non magna accumsan aliquam.</p>
</div>
<div class="col-md-12 well">
<legend id="anch2">Content 2</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies, metus eget fringilla
fermentum, sem justo pulvinar tellus, ac varius neque ante eget mi. Donec cursus nibh ultrices
vulputate aliquet. Morbi nulla enim, molestie eu ullamcorper quis, placerat a mauris. Proin
vel magna ullamcorper, vulputate leo eu, egestas odio. Vivamus erat leo, egestas in euismod
sed, fermentum nec magna. Nunc nisi enim, euismod a tellus sit amet, fermentum adipiscing
ipsum. Fusce rhoncus diam ac neque aliquam convallis. Etiam malesuada, nibh id rutrum euismod,
enim augue gravida dolor, at vulputate felis mi at magna. Nulla luctus, libero eget luctus
gravida, sapien enim varius massa, adipiscing aliquet lacus mi eu eros. Duis pretium laoreet
ullamcorper. Aenean in mauris nec libero tincidunt pharetra non et dui. Sed tortor turpis,
mollis et tempus eu, auctor laoreet neque. Etiam eu tortor rutrum, rutrum mauris sit amet,
hendrerit augue. Sed ut tincidunt nisi. Nam consectetur velit ac pharetra venenatis.</p>
<p>Donec pellentesque id quam vel iaculis. Phasellus commodo tempor metus, eget sollicitudin odio
ultricies id. Proin sed ipsum quis turpis suscipit luctus vitae id urna. Fusce et rhoncus
quam. Etiam vel justo ligula. Nullam euismod lacinia risus a pulvinar. Pellentesque sit amet
nisl eget ante vulputate feugiat. Suspendisse venenatis magna nunc, mollis facilisis neque
condimentum ac. Vivamus non semper dui. Aenean sed eleifend dui. Vivamus a massa aliquam
nibh consectetur luctus id at ligula. Nunc ipsum dolor, mollis at sem et, auctor rhoncus
ipsum. Nulla faucibus venenatis est sit amet facilisis. In vestibulum nisi at tellus egestas,
in pharetra enim fringilla. In ac erat non magna accumsan aliquam.</p>
</div>
<div class="col-md-12 well">
<legend id="anch3">Content 3</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies, metus eget fringilla
fermentum, sem justo pulvinar tellus, ac varius neque ante eget mi. Donec cursus nibh ultrices
vulputate aliquet. Morbi nulla enim, molestie eu ullamcorper quis, placerat a mauris. Proin
vel magna ullamcorper, vulputate leo eu, egestas odio. Vivamus erat leo, egestas in euismod
sed, fermentum nec magna. Nunc nisi enim, euismod a tellus sit amet, fermentum adipiscing
ipsum. Fusce rhoncus diam ac neque aliquam convallis. Etiam malesuada, nibh id rutrum euismod,
enim augue gravida dolor, at vulputate felis mi at magna. Nulla luctus, libero eget luctus
gravida, sapien enim varius massa, adipiscing aliquet lacus mi eu eros. Duis pretium laoreet
ullamcorper. Aenean in mauris nec libero tincidunt pharetra non et dui. Sed tortor turpis,
mollis et tempus eu, auctor laoreet neque. Etiam eu tortor rutrum, rutrum mauris sit amet,
hendrerit augue. Sed ut tincidunt nisi. Nam consectetur velit ac pharetra venenatis.</p>
<p>Donec pellentesque id quam vel iaculis. Phasellus commodo tempor metus, eget sollicitudin odio
ultricies id. Proin sed ipsum quis turpis suscipit luctus vitae id urna. Fusce et rhoncus
quam. Etiam vel justo ligula. Nullam euismod lacinia risus a pulvinar. Pellentesque sit amet
nisl eget ante vulputate feugiat. Suspendisse venenatis magna nunc, mollis facilisis neque
condimentum ac. Vivamus non semper dui. Aenean sed eleifend dui. Vivamus a massa aliquam
nibh consectetur luctus id at ligula. Nunc ipsum dolor, mollis at sem et, auctor rhoncus
ipsum. Nulla faucibus venenatis est sit amet facilisis. In vestibulum nisi at tellus egestas,
in pharetra enim fringilla. In ac erat non magna accumsan aliquam.</p>
</div>
<div class="col-md-12 well">
<legend id="anch4">Content 4</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies, metus eget fringilla
fermentum, sem justo pulvinar tellus, ac varius neque ante eget mi. Donec cursus nibh ultrices
vulputate aliquet. Morbi nulla enim, molestie eu ullamcorper quis, placerat a mauris. Proin
vel magna ullamcorper, vulputate leo eu, egestas odio. Vivamus erat leo, egestas in euismod
sed, fermentum nec magna. Nunc nisi enim, euismod a tellus sit amet, fermentum adipiscing
ipsum. Fusce rhoncus diam ac neque aliquam convallis. Etiam malesuada, nibh id rutrum euismod,
enim augue gravida dolor, at vulputate felis mi at magna. Nulla luctus, libero eget luctus
gravida, sapien enim varius massa, adipiscing aliquet lacus mi eu eros. Duis pretium laoreet
ullamcorper. Aenean in mauris nec libero tincidunt pharetra non et dui. Sed tortor turpis,
mollis et tempus eu, auctor laoreet neque. Etiam eu tortor rutrum, rutrum mauris sit amet,
hendrerit augue. Sed ut tincidunt nisi. Nam consectetur velit ac pharetra venenatis.</p>
<p>Donec pellentesque id quam vel iaculis. Phasellus commodo tempor metus, eget sollicitudin odio
ultricies id. Proin sed ipsum quis turpis suscipit luctus vitae id urna. Fusce et rhoncus
quam. Etiam vel justo ligula. Nullam euismod lacinia risus a pulvinar. Pellentesque sit amet
nisl eget ante vulputate feugiat. Suspendisse venenatis magna nunc, mollis facilisis neque
condimentum ac. Vivamus non semper dui. Aenean sed eleifend dui. Vivamus a massa aliquam
nibh consectetur luctus id at ligula. Nunc ipsum dolor, mollis at sem et, auctor rhoncus
ipsum. Nulla faucibus venenatis est sit amet facilisis. In vestibulum nisi at tellus egestas,
in pharetra enim fringilla. In ac erat non magna accumsan aliquam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.jqueryscript.net/demo/Fullscreen-Responsive-Image-Slider-with-jQuery-Tinyslide/js/tinyslide.js"></script>
<script>
var tiny = $('#tiny').tiny().data('api_tiny');
jQuery(function ($) {
/*Menu-toggle*/
$(".menu-toggle").click(function (e) {
e.preventDefault();
$("#main-wrapper").toggleClass("active");
});
/*Scroll Spy*/
$('body').scrollspy({ target: '#spy', offset: 80 });
$(window).on("scroll", function () {
if ($(this).scrollTop() > 45) {
$(".content-header").addClass("scrolled");
} else {
$(".content-header").removeClass("scrolled");
}
});
$('.page-content.inset').on('click', function(){
$("#main-wrapper").removeClass("active");
});
/*Smooth link animation*/
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 80
}, 700);
return false;
}
}
});
});
</script>
#main-wrapper {
transition: all 0.4s ease 0s;
}
div#main-wrapper.active::after {
transition: all 0.89s ease 0s;
}
div#main-wrapper.active::after {
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: block;
top: 0;
z-index: 999;
}
#sidebar-wrapper {
left: -250px;
width: 250px;
background: #f5feff;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#main-wrapper.active #sidebar-wrapper {
left: 0px;
box-shadow: 4px 2px 11px rgba(8, 25, 23, 0.25);
border-right: 1px solid #2d4240;
}
#page-content-wrapper {
width: 100%;
}
.sidebar-nav {
position: relative;
top: 0px;
width: 250px;
list-style: none;
margin: 50px 0 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
border-bottom: 1px solid #3eb3a7;
}
.sidebar-nav li a {
color: #085d54;
transition: all 0.2s ease-in;
display: block;
text-decoration: none;
padding: 5px 15px 5px 20px;
background: #58f5e6;
}
.sidebar-nav li a:hover {
background: #fff;
color: #056b61;
}
.content-header {
height: 48px;
line-height: 45px;
position: fixed;
top: 0;
width: 100%;
z-index: 8;
}
.content-header.scrolled {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
}
.content-header h3 {
margin: 0;
margin-left: 20px;
line-height: 45px;
display: inline-block;
}
.btn-menu {
color: #000!important;
font-size: 25px;
text-decoration: none!important;
}
.nav-arrow {
padding: 5px 10px 5px 10px;
transition: all 0.3s ease-in;
color: #fff!important;
width: 45px;
margin: 5px;
border: 1px solid #45c1b5;
border-radius: 4px;
display: inline-block;
}
.btn-menu:before {
color: #6bf5fb;
}
.nav-arrow:before {
color: #45c1b5;
}
.nav-arrow:hover {
padding: 5px 25px 5px 5px;
width: 45px;
}
.tinysliderBox {
position: relative;
height: 100vh;
width: 100%;
margin-bottom: 55px;
}
.tinyslide {
width: 100%;
height: 100%;
position: absolute!important;
overflow: hidden!important;
z-index: 6!important;
top: 0!important;
}
