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

Modals / simple Lightbox

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.

How to use the Modals:

Define a button to open a modal using the “modal-button” class and the “data-modal” parameter (for example, data-modal=”modal-1″). Define the content of the modal window using the “modal” class and the “id” parameter (for example, id=”modal-1″). This means that the button with the parameter
data-modal=”modal-1″ opens the modal with parameter id=”modal-1″.

<div class="size-960">
<div class="line">
<p>Lorem ipsum dolor <a class="modal-button" data-modal="modal-1">open modal</a> rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat. </p>

<!-- Modal content--> 
<div class="modal" id="modal-1">
<h3>Responsive modal window</h3>
<p>
Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum. Nonummy maecenas ultricies eros sociis hendrerit dictum unde deleniti excepteur eiusmod doloremque.
</p>
<a class="modal-close-button">Close modal</a>			 
</div>

</div>
</div>

Practical example of Modal:

Lorem ipsum dolor open modal rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.

Open and close modal with buttons:

<div class="size-960">
<div class="line">
<p class="margin-bottom">Lorem ipsum dolor nonummy turpis tincidunt malesuada molestie praesent rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat. </p>
<a class="modal-button button submit-btn" data-modal="modal-2">Open modal</a>

<!-- Modal content--> 
<div class="modal" id="modal-2">
<h3>Responsive modal window</h3>
<p class="margin-bottom">
Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum. Nonummy maecenas ultricies eros sociis hendrerit dictum unde deleniti excepteur eiusmod doloremque.
</p>
<a class="modal-close-button button cancel-btn">Close modal</a>			 
</div>

</div>
</div>

Practical example of Modal with buttons:

Lorem ipsum dolor nonummy turpis tincidunt malesuada molestie praesent rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.

Open modal

Open modal with images (simple image lightbox):

<div class="size-960">
<div class="line">
<a class="modal-button" data-modal="modal-3"><img src="/wp-content/themes/responsee/img/gallery-1.svg" alt=""></a>

<!-- Modal content--> 
<div class="modal" id="modal-3">
<img src="/wp-content/themes/responsee/img/header-1.svg" alt="">		 
</div>

</div>
</div>

Practical example of Modal with image:

Modal with Google map (iframe):

<div class="size-960">
<div class="line">
<p>Lorem ipsum dolor <a class="modal-button" data-modal="modal-4">open Google map modal</a> rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.</p>

<!-- Modal content--> 
<div class="modal" id="modal-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d21301.699444392307!2d17.047469873176862!3d48.16110781031926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ssk!2ssk!4v1600023067427!5m2!1ssk!2ssk" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>		 
</div>

</div>
</div>

Practical example of Modal with Google map (ifarme):

Lorem ipsum dolor open modal with Google map rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.

Modal with the contents arranged in columns:

<div class="size-960">
<div class="line">
<p>Lorem ipsum dolor <a class="modal-button" data-modal="modal-5">open modal with columns</a> rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.</p>

<!-- Modal content--> 
<div class="modal" id="modal-5">
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-4 margin-bottom">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="s-12 m-6 l-4 margin-bottom">
<h2>Company</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="s-12 m-6 l-4 margin-bottom">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>	 
</div>

</div>
</div>

Practical example of Modal with the contents arranged in columns:

Lorem ipsum dolor open modal with columns rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.

Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase