Responsive Timeline

Thanks to the timeline, you can show an events in the handy form. Each event can be presented using an icon or an image.

Practical utilization of the timeline you can find in the template Financer

Correct structure of Timeline:

<div class="size-960">
<div class="line">

<div class="timeline-container">
  
              <div class="timeline-block">
                <div class="timeline-icon">
                   <i class="icon-sli-trophy"></i>
                </div>
                <div class="timeline-content">
                  <h3>Accusamus auctor aute euismod ipsam</h3> 
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2020</span>
                </div>
              </div>
  
              <div class="timeline-block">
                <div class="timeline-icon">
                   <i class="icon-sli-people"></i>
                </div>
                <div class="timeline-content">
                  <h3>Lacus ipsam culpa earum beatae fugiat</h3>  
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2019</span>
                </div>
              </div>
              
              <div class="timeline-block">
                <div class="timeline-icon">
                   <i class="icon-sli-graduation"></i>
                </div>
                <div class="timeline-content">
                  <h3>Wisi malesuada scelerisque praesent mi accumsan euismod earum</h3> 
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2018</span>
                </div>
              </div>
              
              <div class="timeline-block">
                <div class="timeline-icon">
                   <i class="icon-sli-plane"></i>
                </div>
                <div class="timeline-content">
                  <h3>Euismod ea penatibus felis</h3> 
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2017</span>
                </div>
              </div>                                                                                                                                                              
  
            </div>
			
</div>
</div>

Practical example of Timeline:

Timeline with images:

<div class="size-960">
<div class="line">

<div class="timeline-container">
  
              <div class="timeline-block">
                <div class="timeline-icon">
                   <img src="/wp-content/themes/responsee/img/timeline-1.jpg" alt="">
                </div>
                <div class="timeline-content">
                  <h3>Accusamus auctor aute euismod ipsam</h3> 
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2020</span>
                </div>
              </div>
  
              <div class="timeline-block">
                <div class="timeline-icon">
                   <img src="/wp-content/themes/responsee/img/timeline-2.jpg" alt="">
                </div>
                <div class="timeline-content">
                  <h3>Lacus ipsam culpa earum beatae fugiat</h3>  
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2019</span>
                </div>
              </div>
              
              <div class="timeline-block">
                <div class="timeline-icon">
                   <img src="/wp-content/themes/responsee/img/timeline-3.jpg" alt="">
                </div>
                <div class="timeline-content">
                  <h3>Wisi malesuada scelerisque praesent mi accumsan euismod earum</h3> 
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2018</span>
                </div>
              </div>
              
              <div class="timeline-block">
                <div class="timeline-icon">
                   <img src="/wp-content/themes/responsee/img/timeline-4.jpg" alt="">
                </div>
                <div class="timeline-content">
                  <h3>Euismod ea penatibus felis</h3> 
                  <p>Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.</p>
                  <span class="timeline-date">2017</span>
                </div>
              </div>                                                                                                                                                              
  
            </div>
			
</div>
</div>

Practical example of Timeline with images:

Accusamus auctor aute euismod ipsam

Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.

2020

Lacus ipsam culpa earum beatae fugiat

Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.

2019

Wisi malesuada scelerisque praesent mi accumsan euismod earum

Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.

2018

Euismod ea penatibus felis

Tortor massa nec orci accusamus auctor aute euismod lacus ipsam culpa earum beatae fugiat. Wisi malesuada scelerisque praesent mi accumsan euismod ea penatibus felis lacinia maiores.

2017