Timeline

One stop solution for perfect admin dashboard!

Vertical Timeline

  • Codify
    Let's make coolest things in css
    Presentation
    10:00 12:00
  • Codify
    Let's make coolest things in javascript
    Presentation
    13:00 14:00
  • Codify
    Let's make coolest things in css
    Review
    15:00 17:45
                                                
<!-- ========== 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.

01

Technology

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.

Graphic
02

Confidence

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.

Graphic
03

Adaptation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.

Graphic
04

Consistency

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.

Graphic
05

Conversion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.

Graphic
                                                
<!-- ========== 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

2016
  • 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)
2017
                                                
<!-- ========== 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

1 MAY 2016

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

Card Title

25 MAY 2016

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
3 JUN 2016

Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!

Title

22 JUN 2016

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

Card Title

10 JULY 2016

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

Card Title

30 JULY 2016

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
5 AUG 2016

Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!

Card Title

19 AUG 2016

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
1 SEP 2016

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.

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>