<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<div class="legacy_slider_wrap">
<div class="owl-carousel owl-theme legacy_slider">
<div class="item" data-hash="zero">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2005</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="one">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2006</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="two">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2007</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="three">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2008</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="four">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2009</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="five">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2010</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="six">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2011</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="seven">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2012</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="eight">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2013</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="nine">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2014</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="ten">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2015</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="eleven">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2016</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="tweleve">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2017</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="thirteen">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2018</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="fourteen">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2019</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
<div class="item" data-hash="fifteen">
<div class="legancy-box">
<div class="legancy-img">
<img src="https://i.picsum.photos/id/1026/350/500.jpg"/>
</div>
<div class="legancy-content">
<div class="year-heading">2020</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
</div>
</div>
<div class="thumb-url-block">
<div class="thumb-url">
<a class="button secondary url" href="#zero"><span>2005</span></a>
<a class="button secondary url" href="#one"><span>2006</span></a>
<a class="button secondary url" href="#two"><span>2007</span></a>
<a class="button secondary url" href="#three"><span>2008</span></a>
<a class="button secondary url" href="#four"><span>2009</span></a>
<a class="button secondary url" href="#five"><span>2010</span></a>
<a class="button secondary url" href="#six"><span>2011</span></a>
<a class="button secondary url" href="#seven"><span>2012</span></a>
<a class="button secondary url" href="#eight"><span>2013</span></a>
<a class="button secondary url" href="#nine"><span>2014</span></a>
<a class="button secondary url" href="#ten"><span>2015</span></a>
<a class="button secondary url" href="#eleven"><span>2016</span></a>
<a class="button secondary url" href="#tweleve"><span>2017</span></a>
<a class="button secondary url" href="#thirteen"><span>2018</span></a>
<a class="button secondary url" href="#fourteen"><span>2019</span></a>
<a class="button secondary url" href="#fifteen"><span>2020</span></a>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
.legacy_slider_wrap {
background: #f1f1f1;
padding: 40px 0;
}
.legancy-box {
display: flex;
align-items: center;
font-family: 'Nunito Sans', sans-serif;
}
.legancy-box .legancy-img {
width: 50%;
}
.legancy-box .legancy-content {
width: 50%;
margin-left: -20px;
color: #6b6b6b;
}
.legancy-box .content {
background: #f1f1f1;
padding: 0px 13px;
}
.year-heading {
font-size: 56px;
font-family: 'Fredoka One', cursive;
letter-spacing: 2px;
line-height: 56px;
color: #b1b1b1;
}
.thumb-url {
display: flex;
margin-top: 30px;
}
.thumb-url a {
font-family: 'Nunito Sans', sans-serif;
background: url(bottom-step-img.png) no-repeat left top;
width: 77px;
height: 22px;
background-size: 100%;
display: inline-block;
text-indent: 0;
padding-top: 18px;
font-size: 14px;
color: #323232;
text-decoration: none;
text-align: right;
}
.thumb-url a span {
margin-right: 0;
display: inline-block;
}
.thumb-url a:first-child {
background: transparent;
}
.thumb-url a.active {
font-weight: 700;
}
.thumb-url-block {
max-width: 1000px;
margin: 0 auto;
}
$('.legacy_slider').owlCarousel({
items:3,
loop:false,
center:true,
margin:10,
dots:false,
URLhashListener:true,
autoplayHoverPause:true,
startPosition: 'URLHash'
});
$('.button.url').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
});
