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.