Timeline
One stop solution for perfect admin dashboard!
Vertical Timeline
-
CodifyLet's make coolest things in cssPresentation
-
CodifyLet's make coolest things in javascriptPresentation
-
CodifyLet's make coolest things in cssReview
<!-- ========== CSS ========== -->
<link rel="stylesheet" href="css/timeline/vertical-timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="panel vertical-timeline-bg">
<div class="panel-heading">
<div class="panel-title">
<h3 class="text-center">Vertical Timeline</h3>
</div>
</div>
<div class="panel-body p-20">
<div class="vertical-timeline">
<ul>
<li><span></span>
<div>
<div class="title">Codify</div>
<div class="info">Let's make coolest things in css</div>
<div class="type">Presentation</div>
</div> <span class="number"><span>10:00</span> <span>12:00</span></span>
</li>
<li>
<div><span></span>
<div class="title">Codify</div>
<div class="info">Let's make coolest things in javascript</div>
<div class="type">Presentation</div>
</div> <span class="number"><span>13:00</span> <span>14:00</span></span>
</li>
<li>
<div><span></span>
<div class="title">Codify</div>
<div class="info">Let's make coolest things in css</div>
<div class="type">Review</div>
</div> <span class="number"><span>15:00</span> <span>17:45</span></span>
</li>
</ul>
</div>
</div>
</div>
A Flexbox Timeline
All cards must be the same height and width for space calculations on large screens.
Technology
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
Confidence
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
Adaptation
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
Consistency
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
Conversion
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
<!-- ========== CSS ========== -->
<link rel="stylesheet" href="css/timeline/flexbox-timeline-layout.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="flexbox-timeline">
<div class="panel-body">
<section id=timeline>
<h3 class="text-center">A Flexbox Timeline</h3>
<p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
<div class="demo-card-wrapper">
<div class="demo-card demo-card--step1">
<div class="head">
<div class="number-box">
<span>01</span>
</div>
<h2 class="color-white"> Technology</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step2">
<div class="head">
<div class="number-box">
<span>02</span>
</div>
<h2 class="color-white"> Confidence</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step3">
<div class="head">
<div class="number-box">
<span>03</span>
</div>
<h2 class="color-white"> Adaptation</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step4">
<div class="head">
<div class="number-box">
<span>04</span>
</div>
<h2 class="color-white"> Consistency</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step5">
<div class="head">
<div class="number-box">
<span>05</span>
</div>
<h2 class="color-white"> Conversion</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</div>
</section>
</div>
</div>
Single Div Timeline
Hello, 'Responsive timeline without mediaQueries!
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
Oeehhh, that's awesome.. Me too!
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
I'm last-child so my border fades...
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
<!-- ========== CSS ========== -->
<link rel="stylesheet" href="css/timeline/single-div-timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<p class="text-center font-size-32 pt-60">Single Div Timeline</p>
</div>
</div>
<div class="panel-body p-20">
<div class="single-div-timeline">
<div class="timeline-item" date-is='20-07-1990'>
<p class="font-size-32 mb-15">Hello, 'Responsive timeline without mediaQueries!</p>
<p>
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
</p>
</div>
<div class="timeline-item" date-is='20-07-1990'>
<p class="font-size-32 mb-15">Oeehhh, that's awesome.. Me too!</p>
<p>
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
</p>
</div>
<div class="timeline-item" date-is='20-07-1990'>
<p class="font-size-32 mb-15">I'm last-child so my border fades...</p>
<p>
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
</p>
</div>
</div>
<!-- /.single-div-timeline -->
</div>
</div>
CSS Timeline
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.
18 October
(Monday) -
Lorem dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.
18 October
(Monday) -
Lorem ipsum dolor sit amet.
18 October
(Monday) -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.
18 October
(Monday) -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.
18 October
(Monday) -
Lorem ipsum dolor sit amet.
18 October
(Monday)
<!-- ========== CSS ========== -->
<link rel="stylesheet" href="css/timeline/css-timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<p class="text-center font-size-32 pt-60">CSS Timeline</p>
</div>
</div>
<div class="panel-body p-20">
<div class="css-timeline">
<div class="year">
<div class="inner">
<span>2016</span>
</div>
</div>
<ul class="days">
<li class="day">
<div class="events">
<p class="font-size-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October <br><span class="font-size-18 mt-10">(Monday)</span></div>
</div>
</li>
<li class="day">
<div class="events">
<p>Lorem dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October <br><span class="font-size-18 mt-10">(Monday)</span></div>
</div>
</li>
<li class="day">
<div class="events">
<div class="day__img">
<img src="http://placehold.it/400x300" alt="" />
<p class="caption">
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="date">18 October <br><span class="font-size-18 mt-10">(Monday)</span></div>
</div>
</li>
<li class="day">
<div class="events">
<p class="font-size-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October <br><span class="font-size-18 mt-10">(Monday)</span></div>
</div>
</li>
<li class="day">
<div class="events">
<p class="font-size-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October <br><span class="font-size-18 mt-10">(Monday)</span></div>
</div>
</li>
<li class="day">
<div class="events">
<div class="day__img">
<img src="http://placehold.it/400x300" alt="" />
<p class="caption">
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="date">18 October <br><span class="font-size-18 mt-10">(Monday)</span></div>
</div>
</li>
</ul>
<div class="year year--end">
<div class="inner">
<span>2017</span>
</div>
</div>
</div>
<!-- /.css-timeline -->
</div>
</div>
Animated Vertical Timeline
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
MoreCard Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
MoreQuote
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
MoreCard Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
MoreCard Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
MoreQuote
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
MoreTitle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.
More
<!-- ========== CSS ========== -->
<link rel="stylesheet" href="css/timeline/animated-vertical-timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<p class="text-center font-size-32 pt-60">Animated Vertical Timeline</p>
</div>
</div>
<div class="panel-body p-20">
<section class="animated-vertical-timeline">
<div class="container">
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<h2>Title</h2>
<div class="date-animated">1 MAY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content timeline-card js--fadeInRight">
<div class="timeline-img-header">
<h2>Card Title</h2>
</div>
<div class="date-animated">25 MAY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<div class="date-animated">3 JUN 2016</div>
<h2>Quote</h2>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInRight">
<h2>Title</h2>
<div class="date-animated">22 JUN 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content timeline-card js--fadeInLeft">
<div class="timeline-img-header">
<h2>Card Title</h2>
</div>
<div class="date-animated">10 JULY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content timeline-card js--fadeInRight">
<div class="timeline-img-header">
<h2>Card Title</h2>
</div>
<div class="date-animated">30 JULY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<div class="date-animated">5 AUG 2016</div>
<h2>Quote</h2>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content timeline-card js--fadeInRight">
<div class="timeline-img-header">
<h2>Card Title</h2>
</div>
<div class="date-animated">19 AUG 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item-animated">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<div class="date-animated">1 SEP 2016</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more" href="javascript:void(0)">More</a>
</div>
</div>
</div>
</section>
</div>
</div>
<script src='https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js'></script>
<script src="js/timeline/animated-vertical-timeline.js"></script>