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