Options Admin - Responsive Web Application Kit

Timeline

One stop solution for perfect admin dashboard!

Toggle Code!

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.

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 last-child so my border fades...

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

Card Title

25 MAY 2016

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

Card Title

10 JULY 2016

Card Title

30 JULY 2016

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

1 SEP 2016

Title

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

John Doe

John Doe

Timeline

Vertical Timeline

A Flexbox Timeline

Technology

Confidence

Adaptation

Consistency

Conversion

Single Div Timeline

Hello, 'Responsive timeline without mediaQueries!

Oeehhh, that's awesome.. Me too!

I'm last-child so my border fades...

CSS Timeline

Animated Vertical Timeline

Title

Card Title

Quote

Title

Card Title

Card Title

Quote

Card Title

Title