timeline
Tue Feb 27 2024 08:56:12 GMT+0000 (Coordinated Universal Time)
Saved by @BilalRaza12
<div class="storyline-col2">
<div class="swiper timeSwiper section-wrap timeline-year-container flex-shrink-0 d-flex"
style="translate: none; rotate: none; scale: none; touch-action: pan-y;">
<ul class="timeline-primary-ul swiper-wrapper" style="touch-action: pan-y;">
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2016</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2017</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2018</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2019</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2020</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2021</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2022</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2023</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
<li style="touch-action: pan-y;" class="swiper-slide">
<h3 style="touch-action: pan-y;"> <span style="touch-action: pan-y;">2024</span></h3>
<ul style="touch-action: pan-y;">
<li class="timeline-year-month" data-case-count="1" data-month="Nov"
style="touch-action: pan-y;">
<div class="label revealed" href="#" modal-target="timeline-modal-0"
style="touch-action: pan-y;"> <span class="timeline-month"
style="touch-action: pan-y;">June </span> <span class="dot"
style="touch-action: pan-y;"></span>
<div class="excerpt" style="touch-action: pan-y;">
<p style="touch-action: pan-y;">Started as a bootstrapped venture in a
small Noida basement office with 20 employees.</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
/* timeline-sect */
.timeline-year-container {
align-items: center;
position: relative;
padding-left: 165px;
padding-bottom: 60px;
overflow-y: hidden;
scroll-behavior: smooth;
}
.timeline-sect .swiper-slide {
background-color: transparent !important;
}
.story-banner {
padding: 130px 0px 0px 190px;
}
.timeline-year-container .timeline-primary-ul>li:first-child {
position: relative
}
.timeline-sect {
/* overflow: hidden; */
position: relative;
height: 770px;
}
.story-banner-cont {
color: var(--white);
}
.storyline-wrapper {
display: grid;
grid-template-columns: 50% 50%;
position: relative;
}
.storyline-wrapper:before {
content: '';
position: absolute;
left: 0;
top: -290px;
width: 47%;
height: 1040px;
background-image: url(images/journey/story-img.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
border-radius: 16px;
z-index: 999;
}
.timeline-year-container .timeline-primary-ul>li:first-child:after {
content: "";
left: -177px;
position: absolute;
display: block;
height: 100%;
width: 33%;
background-image: url(images/journey/shape7.png);
top: 9px;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
.timeline-year-container .timeline-primary-ul>li:nth-child(3) {
position: relative
}
.timeline-year-container .timeline-primary-ul>li:nth-child(5) {
position: relative
}
.timeline-year-container .timeline-primary-ul>li:nth-child(5):before {
content: "";
display: block;
position: absolute;
width: min(47.2222222222vw, 85vh);
height: min(47.2222222222vw, 85vh);
background-image: url(images/journey/yearimg3);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
left: -67.3%;
top: 0;
bottom: 0;
margin-block: auto;
z-index: -1;
}
.timeline-year-container .timeline-primary-ul>li:nth-child(8) {
position: relative;
padding-right: 10px;
}
.timeline-year-container .timeline-primary-ul li ul {
position: relative;
display: flex;
align-items: center;
}
.timeline-sect li.swiper-slide.swiper-slide-active {
margin-right: 0 !important;
}
.timeline-year-container .timeline-primary-ul li ul:before {
content: "";
display: block;
position: absolute;
left: -25px;
top: 56%;
width: 608px;
height: 100%;
background-image: url(images/journey/shape3.png);
background-position: top;
background-repeat: no-repeat;
background-size: 100%;
}
.timeline-year-container .timeline-primary-ul li ul li {
top: 100%;
position: relative;
margin-inline: 216px;
}
.timeline-year-container .timeline-primary-ul li ul li:after,
.timeline-year-container .timeline-primary-ul li ul li:before {
content: "";
display: block;
position: absolute;
}
.timeline-year-container .timeline-primary-ul li ul li:before {
width: 1px;
height: 100%;
left: 0;
background: rgba(255, 255, 255, .035);
z-index: -1;
transform: translate(0, -50%)
}
.timeline-sect .label.revealed {
position: relative;
}
.timeline-year-container .timeline-primary-ul li ul li .label {
transform: translate(-150%, 0);
position: absolute;
left: -60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: .7s ease-in-out
}
.timeline-year-container .timeline-primary-ul li ul li .label .timeline-month {
font-size: 26px;
color: #fff;
font-weight: 600;
}
.timeline-year-container .timeline-primary-ul li ul li .label .dot:after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--pc);
transform: translate(-50%, -50%)
}
.timeline-year-container .timeline-primary-ul li ul li .label .excerpt {
top: min(4.8611111111vw, 8.75vh);
width: min(20.1388888889vw, 36.25vh);
position: absolute;
left: min(2.7777777778vw, 5vh);
opacity: 0
}
.timeline-year-container .timeline-primary-ul li ul li .label .excerpt p {
font-size: 16px;
font-weight: 500;
text-align: left;
color: #fff;
width: 100%;
position: relative;
top: 2px;
left: -5px;
margin: 0;
}
.story-banner-cont h2 {
font-size: 90px;
font-weight: 500;
line-height: 104px;
margin: 0;
}
.story-banner-cont h2 span {
font-weight: 300;
}
.story-banner-cont h3 {
font-size: 56px;
font-weight: 500;
margin: 10px 0 20px;
}
.timeline-year-container .timeline-primary-ul li ul li .label .excerpt p span {
display: block;
margin-top: min(.6944444444vw, 1.25vh);
font-weight: var(--font-m);
}
.timeline-year-container .timeline-primary-ul li ul li .label:before {
content: "";
position: absolute;
background-image: url(images/journey/shape9.png);
background-repeat: no-repeat;
background-size: 43px;
width: 150px;
height: 210px !important;
bottom: -12px !important;
left: -11px;
}
.timeline-sect li.timeline-year-month::marker {
font-size: 0 !important;
}
.timeline-year-container .timeline-primary-ul li ul li .label.revealed {
opacity: 1;
}
.timeline-year-container .timeline-primary-ul li ul li .label.revealed:before {
height: min(9.375vw, 16.875vh);
}
.timeline-year-container .timeline-primary-ul li ul li .label.revealed .excerpt {
opacity: 1;
}
.timeline-year-container .timeline-primary-ul li ul li .label:after {
content: "";
position: absolute;
display: block;
width: min(1.25vw, 2.25vh);
height: min(1.25vw, 2.25vh);
background: var(--pc);
left: 50%;
border-radius: 50%;
}
.timeline-year-container .timeline-primary-ul li:nth-child(odd) ul li .label {
bottom: min(-.6944444444vw, -1.25vh);
padding-bottom: 0;
}
.timeline-year-container .timeline-primary-ul li:nth-child(odd) ul li .label.revealed {
padding-bottom: 220px;
}
.timeline-year-container .timeline-primary-ul li:nth-child(odd) ul li .label.revealed .excerpt {
transition: opacity .7s ease-in-out .4s;
top: 108px;
}
.timeline-year-container .timeline-primary-ul li:nth-child(odd) ul li .label:before {
left: -8px;
}
.timeline-year-container .timeline-primary-ul li:nth-child(odd) ul li .label:after {
bottom: min(-.4166666667vw, -.75vh);
transform: translate(-50%, -50%);
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label {
flex-direction: column-reverse;
top: -17px;
left: -95px;
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label.revealed {
padding-top: 180px;
}
.timeline-year-container .timeline-primary-ul li:nth-child(odd) ul li .label.revealed span {
left: -10px;
top: 18px;
position: relative;
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label.revealed span {
left: 10px;
top: 26px;
position: relative;
}
.storyline-col2 {
position: relative;
}
.storyline-col2:before {
content: "";
display: block;
position: absolute;
width: 67%;
height: 72%;
background-image: url(images/journey/journy-circle.png);
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
left: -19%;
bottom: 13%;
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label .dot {
margin-top: 0;
margin-bottom: min(.6944444444vw, 1.25vh);
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label .excerpt {
top: 55px;
left: 70px;
transition: top .7s ease-in-out, opacity .7s ease-in-out .3s;
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label:before {
top: 3px;
left: -1px;
transform: rotate(180deg);
width: 54px;
background-size: 43px;
height: 210px !important;
}
.timeline-year-container .timeline-primary-ul li:nth-child(even) ul li .label:after {
top: min(-.5555555556vw, -1vh);
transform: translate(-50%, -50%);
}
.timeline-year-container h3 {
position: relative;
text-align: center;
}
.timeline-year-container h3 span {
color: #fff;
position: relative;
top: 22px;
font-size: 50px;
font-weight: 800;
}
.timeline-year-container h3:before {
top: 36px;
}
.timeline-year-container h3:after {
bottom: 15px;
}
.timeline-year-container h3 span:after,
.timeline-year-container h3 span:before {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--pc)
}
.timeline-year-container h3 span:before {
left: 0
}
.timeline-year-container h3 span:after {
right: 0
}
.timeline-year-container h3:after,
.timeline-year-container h3:before {
content: "";
display: block;
position: relative;
width: min(10.7638888889vw, 19.375vh);
height: min(7.4305555556vw, 13.375vh);
background-image: url(images/journey/shape2.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-inline: auto;
filter: brightness(0) saturate(100%) invert(100%) sepia(59%) saturate(248%) hue-rotate(258deg) brightness(118%) contrast(100%);
}
.timeline-year-container h3:after {
margin-top: min(1.3888888889vw, 2.5vh);
transform: rotate(180deg)
}
var swiper = new Swiper(".timeSwiper", {
slidesPerView: 1.4,
speed: 10000,
direction: 'horizontal',
zoom: true,
keyboard:
{
enabled: true,
onlyInViewport: false,
},
mousewheel:
{
invert: true,
},
autoplay:
{
delay: 0,
},
loop: true,
freeMode: true,
});
Comments