Responsee version lightweight responsive css frameworkWhat's New in Version 7

Responsive timeline

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.
read more >

New free template Financer

New free template Financer

Completely new template named Financer comes with new edition of Responsee. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 7.
read more >

Accordion

Accordion

Thanks to the accordion, you can display a huge contents even in a limited amount of space. Responsee Accordion supports an unlimited number of nested accordions. Thanks to this, you can divide a content into more and more smaller parts.
read more >

Responsive Modals

Responsive Modals

Thanks to Modals you can display a content in simple lightbox effect over particular page content. Modals may contain common text, headlines, images, buttons, iframes and a content of modal can be divided into the columns.
read more >

Ability to display the mobile navigation on the right

Ability to display the mobile navigation on the right

Thanks to the class "mobile-nav-right" you can show the mobile navigation on the right.
read more >

lorem ipsum generator professional logo generator

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:

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

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
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase