Evince

JS

In order to use this plugin on your page you will need to include the following script in the page.


<script src="plugins/vertical-timeline/js/main.js"></script>
<script src="plugins/vertical-timeline/js/modernizr.js"></script>
                                        

CSS

In order to use this plugin on your page you will need to include the following css in the page.


<link rel="stylesheet" href="plugins/vertical-timeline/css/style.css" />
                                        

Title of section 1

Sonsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Jan 24

Title of section 2

Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis

Fab 18

Title of section 3

Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam.

Mar 24

Title of section 4

fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius moditempora.

Apr 14

Title of section 5

labore et dolore magnam aliquam quaerat voluptatem.labore et dolore magnam aliquam quaerat voluptatem.

May 28

Final Section

anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius moditempora.

Feb 26

<section id="cd-timeline" class="cd-container">
    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-success">
            <i class="fas fa-tags"></i>
        </div>
        <!-- cd-timeline-img -->
        <div class="cd-timeline-content border-0 bg-light">
            <h4>Title of section 1</h4>
            <p>Sonsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <span class="cd-date">Jan 24</span>
        </div>
        <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-danger">
            <i class="fas fa-map-marker-alt"></i>
        </div>
        <!-- cd-timeline-img -->
        <div class="cd-timeline-content border-0 bg-light">
            <h4>Title of section 2</h4>
            <p>Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis</p>
            <div id="map" style="height: 200px; width: 100%;"></div>
            <span class="cd-date">Fab 18</span>
        </div>
        <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-info">
            <i class="fas fa-star"></i>
        </div>
        <!-- cd-timeline-img -->
        <div class="cd-timeline-content border-0 bg-light">
            <h4>Title of section 3</h4>
            <p>Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam.</p>
            <span class="cd-date">Mar 24</span>
        </div>
        <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-info">
            <i class="fas fa-comments"></i>
        </div>
        <!-- cd-timeline-img -->
        <div class="cd-timeline-content border-0 bg-light">
            <h4>Title of section 4</h4>
            <p>fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius moditempora.</p>
            <span class="cd-date">Apr 14</span>
        </div>
        <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-warning">
            <i class="fas fa-pen-square"></i>
        </div>
        <!-- cd-timeline-img -->
        <div class="cd-timeline-content border-0 bg-light">
            <h4>Title of section 5</h4>
            <p>labore et dolore magnam aliquam quaerat voluptatem.labore et dolore magnam aliquam quaerat voluptatem.</p>
            <img src="img/timeline-banner.jpg" alt="" />
            <span class="cd-date">May 28</span>
        </div>
        <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-primary">
            <i class="fas fa-paperclip"></i>
        </div>
        <!-- cd-timeline-img -->
        <div class="cd-timeline-content border-0 bg-light">
            <h4>Final Section</h4>
            <p>anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius moditempora.</p>
            <span class="cd-date">Feb 26</span>
        </div>
        <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->
</section>