Sample Section

## Basic

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

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>`. It's always a good practice to wrap your section content inside a `.container` or `.container-fluid`.

Let's dive into it and see other possibilities.

Sample Section

## Background Gray

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

This section has an additional `.bg-gray` class.

Sample Section

## Light Content

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

This section has an additional `.text-white` and `.bg-dark` classes.

Sample Section

## Primary Color

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

This section has an additional `.text-white` and `.bg-primary` classes.

Sample Section

## Custom Color

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

This section has an additional `.text-white` and `style="background-color: #00cbce"` classes.

Sample Section

## Background Image

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Simply provide a background-image for your section. Don't forget to check our overlays.

Sample Section

## Fixed Background Image

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

This section has an additional `.bg-fixed` class.

Sample Section

## Gradient Overlay

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Include an `.overlay` element as a child of your section and style it as you want. It'll be a layer between your content and section background.

Sample Section

## Granim Overlay

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

The same overlay as the previous example, but with a `data-granim="#834d9b,#d04ed6,#1cd8d2,#93edc7"`. See granim documentation for more info.

Sample Section

## Gradient Background

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

This section has an additional `.text-white` class and `style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"` attribute.
You can get access to a list of gradient background samples at webgradients.com

Sample Section

## Parallax Image

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Add a `data-parallax="path/to/img.jpg"` to your section.

Sample Section

## Constellation

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Simply include `<canvas class="constellation"></canvas>` into your section. See constellation documentation for more possibilities.

Sample Section

## Local Video Background

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Add `.section-video` class to your section and put a `<video>` tag as a child of section to display a local video.

### Dialog Title

All it harmonics; Such based to pity of and rank people brief three their time and the this the should service employed of by on beginning turn how is back a years phase that the to the might question. So, sides on blocks rattling transformed built he sight there traveler be worn people was in queen have he term city animals drops.

### Dialog Title

All it harmonics; Such based to pity of and rank people brief three their time and the this the should service employed of by on beginning turn how is back a years phase that the to the might question. So, sides on blocks rattling transformed built he sight there traveler be worn people was in queen have he term city animals drops.

Sample Section

## Parallax Video

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Include a `data-video="mp4:path/to/video.mp4"` attribute. You can use `data-speed` to set parallax speed. It should be a number between -1.0 and 2.0.

Sample Section

## YouTube Video Background

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Include `data-video` attribute with link to your YouTube video. You can use `data-speed="0.5"` to have a parallax video background. You can use any other number between -1.0 and 2.0.

Sample Section

## Vimeo Video Background

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

Include `data-video` attribute with link to your Vimeo video. You can use `data-speed="0.5"` to have a parallax video background as we have for this section. You can use any other number between -1.0 and 2.0.

Sample Section

## Overflow Content

This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.

##### Stream of images

Add `.flex-nowrap` to a .row with column larger than 12 in sum. So it only displays the first 12 columns.