Section Sample

Basic


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

You mostly only need to copy and paste a code from the section which you want to use. You might see that all of the sections have a wrapper like this: <section class="section"></section>. Let's dive into it and see other possibilities.

Section Sample

Background Color


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

This section has an additional .bg-gray class.

Section Sample

Inverse Color


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

This section has an additional .section-inverse class.

Section Sample

Primary Color


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

This section has an additional .section-inverse and .bg-primary classes.

Section Sample

Custom Color


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

This section has an additional .section-inverse and style="background-color: #01d5d8" classes.

Section Sample

Background Image


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

Add a .bg-img class to your <section> and provide a background-image for the section.

To add an overlay to your section, simply add data-overlay="X" to the section, which X is an integer number between 0 to 10. You might want to change the overlay dark color to light or primary color by adding either data-overlay-light="true" or data-overlay-primary="true" respectively.

Section Sample

Gradient Background


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

This section has an additional .section-inverse class and style="background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)" attribute. You can get access to a list of gradient background samples at http://webgradient.com

Section Sample

Parallax Image


Apart from navbar and footer, every other content in this website is inside a section. Sections are a wrapper to divide your content into several pieces.

Add a data-parallax="path/to/img.jpg" to your section. You are able to use overlays as well.

Section Dialog

Display a rounded block right in the middle of your section. It has .section-dialog class name and would be greate to use it in call to action blocks or registration forms. Feel free to include it inside a .section-inverse; the dialog will become inverse as well.