Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

#### Timeline

#### Timeline 1 Offical link Preview link

    <!-- cd-timeline Start-->
    <section class="cd-container" id="cd-timeline">
      <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-picture bg-primary"><i class="icon-pencil-alt"></i></div>
        <div class="cd-timeline-content">
          <h4>Title of section<span> 1</span></h4>
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum
          provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste
          voluptatibus minus veritatis qui ut.</p><span class="cd-date">Jan <span class="counter">
          14</span></span>
        </div>
      </div>
      <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-movie bg-secondary"><i class="icon-video-camera"></i></div>
        <div class="cd-timeline-content">
          <h4>Title of section<span> 2</span></h4>
          <div class="ratio ratio-21x9 m-t-20">
            <iframe src="https://www.youtube.com/embed/wpmHZspl4EM" allowfullscreen=""></iframe>
          </div><span class="cd-date">Jan <span class="counter">18</span></span>
        </div>
      </div>
      <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-picture bg-success"><i class="icon-image"></i></div>
        <div class="cd-timeline-content">
          <h4>Title of section<span> 3</span></h4><img class="img-fluid p-t-20"
          src="{% static 'assets/images/banner/1.jpg'%}" alt=""><span class="cd-date">Jan <span
          class="counter">24</span></span>
        </div>
      </div>
      <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-location bg-info"><i class="icon-pulse"></i></div>
        <div class="cd-timeline-content">
          <h4>Title of section<span> 4</span></h4>
          <audio class="m-t-20" controls="">
            <source src="{% static 'assets/audio/horse.ogg'%}" type="audio/ogg"> Your browser does not support
            the audio element.
          </audio><span class="cd-date">Feb <span class="counter">14</span></span>
        </div>
      </div>
      <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-location bg-warning"><i class="icon-image"></i></div>
        <div class="cd-timeline-content">
          <h4>Title of section<span> 5</span></h4><img class="img-fluid p-t-20"
          src="{% static 'assets/images/banner/3.jpg'%}" alt=""><span class="cd-date">Feb <span
          class="counter">18</span></span>
        </div>
      </div>
      <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-movie bg-danger"><i class="icon-pencil-alt"></i></div>
        <div class="cd-timeline-content">
          <h4>Final Section</h4>
          <p class="m-0">This is the content of the last section</p><span class="cd-date">Feb <span
          class="counter">26</span></span>
        </div>
      </div>
    </section>
    <!-- cd-timeline Ends-->

##### To use timeline you have to add the following script js files

    <!-- Timeline js-->
    <script src="../assets/js/timeline-v-1/main.js" ></script>
    <script src="../assets/js/modernizr.js" ></script>

#### Timeline 2 Offical link Preview link

    <!-- timeline Start-->
    <div id="timeline-2">
      <div data-year="2010">Start</div>
      <div class="active" data-year="2011">Lorem is simply dummy text of the printing and typesetting industry.
      the printing and typesetting industry.</div>
      <div data-year="2013">Lorem is simply dummy text of the printing and typesetting industry. </div>
      <div data-year="2014">Lorem is simply dummy text of the printing and typesetting industry.</div>
      <div data-year="2015">Lorem is simply dummy text of the printing and typesetting industry.</div>
      <div data-year="2017">Lorem is simply dummy text of the printing and typesetting industry.</div>
      <div data-year="2018">End.</div>
    </div>
    <!-- timeline End -->

##### To use timeline you have to add the following script js files

    <!-- Timeline js-->
    <script src="../assets/js/timeline-v-2/jquery.timeliny.min.js"></script>
    <script src="../assets/js/timeline-v-2/timeline-v-2-custom.js" ></script>