<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 ---------->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css"/>
<!--<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css"/>-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<script src="js/functions.js"></script>
<div class="container">
<h1 class="title">Our Milestones</h1>
<div class="timeline">
<div class="timeline-nav">
<div class="timeline-nav__item">1985</div>
<div class="timeline-nav__item">1988</div>
<div class="timeline-nav__item">1998</div>
<div class="timeline-nav__item">2006</div>
<div class="timeline-nav__item">2008</div>
<div class="timeline-nav__item">2010</div>
<div class="timeline-nav__item">2012</div>
<div class="timeline-nav__item">2013</div>
<div class="timeline-nav__item">2015</div>
<div class="timeline-nav__item">2016</div>
</div>
<div class="timeline-wrapper">
<div class="timeline-slider">
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=11;" data-year="1985"> <span class="timeline-year">1985</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our first project</h4>
<p class="timeline-text">First project for the leading film actress Jamuna Barua, wife of Pramathesh Barua the legendary actor, director, and screenwriter</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=12;" data-year="1988"> <span class="timeline-year">1988</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our first project</h4>
<p class="timeline-text">First project for the leading film actress Jamuna Barua, wife of Pramathesh Barua the legendary actor, director, and screenwriter</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="1998"> <span class="timeline-year">1998</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2006"> <span class="timeline-year">2006</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2008"> <span class="timeline-year">2008</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2010"> <span class="timeline-year">2010</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2012"> <span class="timeline-year">2012</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2013"> <span class="timeline-year">2013</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2015"> <span class="timeline-year">2015</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="timeline-slide" style="background-image: url(https://unsplash.it/1920/600?image=13;" data-year="2016"> <span class="timeline-year">2016</span>
<div class="timeline-slide__content">
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
$white: #fff;
$black: #000;
$primary: #003471;
$gray: #616161;
$orange: #ff9900;
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background-color: $primary;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title {
font-size: 38px;
color: #fff;
font-weight: 300;
}
.timeline{
width: 100%;
position: relative;
margin-top: 100px;
&-nav{
position: relative;
&::after{
content:"";
position: absolute;
width: 100%;
height: 1px;
background-color: #fafafa;
bottom: 6px;
z-index: 1;
}
&__item{
width: auto;
height: auto;
text-align: center;
opacity: 0.5;
background: transparent;
color: #afc9f6;
margin: 15px 25px !important;
position: relative;
font-size: 14px;
line-height: 28px;
font-weight: 400;
outline: none;
cursor: pointer;
&::before {
content: "";
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #afc9f6;
transition: .2s;
}
&.slick-current{
color: $orange;
opacity: 1;
&::before {
background-color: $orange;
}
}
}
}
&-wrapper{
position: relative;
width: 100%;
height: 580px;
margin: 60px auto;
@media (max-width: 500px){
height: 1000px;
max-height: 900px;
}
}
&-slider{
height: 100%;
}
.slick-list{
height: 100%;
@media (min-width: 1080px){
padding: 0 180px !important;
}
}
.slick-track{
height: 100%;
}
&-slide{
position: relative;
overflow: hidden;
background-repeat: no-repeat;
outline: none;
background-size: auto 400px, cover;
background-position: top;
margin: 0 24px;
width: 80%;
z-index: 1;
&:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($primary, .8);
z-index: 2;
}
&__content{
z-index: 5;
position: absolute;
top: 220px;
background: #ffffff;
width: 80%;
left: 50%;
transform: translate(-50%, 0px);
padding: 40px;
opacity: 0;
transition: opacity 1s;
@media (max-width: 500px){
width: 100%;
// transform: translate(-50%, 0px);
}
}
}
&-year{
z-index: 5;
font-size: 35px;
color: #ffffff;
background: $orange;
padding: 15px 26px;
transition: opacity 1.2s;
position: absolute;
right: 0;
opacity: 0;
}
&-title{
color: $orange;
font-size: 26px;
line-height: 30px;
font-weight: 400;
}
&-text{
font-size: 18px;
line-height: 28px;
color: #666666;
}
.slick-current{
&:after{
background-color: rgba($primary, 0);
}
.timeline-year{
opacity: 1;
}
.timeline-slide__content{
opacity: 1;
}
}
}
// For Active Item
.slick-center .slick-slide,
.timeline-slide{
transform: scale(0.7);
}
.slick-center .slick-active,
.timeline-slide .sl{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
}
$(function(){
$('.timeline-nav').slick({
// autoplay:true,
// autoplaySpeed:1000,
slidesToShow: 12,
slidesToScroll: 1,
asNavFor: '.timeline-slider',
centerMode: false,
focusOnSelect: true,
mobileFirst: true,
arrows: false,
infinite:false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 8,
}
},
{
breakpoint: 0,
settings: {
slidesToShow: 4,
slidesToScroll: 2,
}
}
]
});
$('.timeline-slider').slick({
// autoplay:true,
// autoplaySpeed:1000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
asNavFor: '.timeline-nav',
centerMode: true,
cssEase: 'ease',
edgeFriction: 0.5,
mobileFirst: true,
speed: 500,
responsive: [
{
breakpoint: 0,
settings: {
centerMode: false
}
},
{
breakpoint: 768,
settings: {
centerMode: true
}
}
]
});
});
