Sections & Parallax

Sections & Parallax Shortcodes

You can show the counters in different layout styles.


Default Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Default Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 1 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-1">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Color Scale 1 Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 2 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-2">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Color Scale 2 Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 3 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-3">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 3 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 4 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-4">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 4 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 5 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-5">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 5 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 6 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-6">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 6 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 7 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-7">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 7 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 8 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-8">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 8 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Color Scale 9 Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-default-scale-9">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none text-light">Color Scale 9 Section</h4>
                <p class="mb-none text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Primary Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-primary">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Primary Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Secondary Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-secondary">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Secondary Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Tertiary Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-tertiary">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Tertiary Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Quaternary Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-quaternary">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Quaternary Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Removing Margin Top and Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default mt-none mb-none">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Removing Margin Top and Bottom</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

With Divider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<section class="section section-default section-with-divider">
    <div class="divider divider-solid divider-style-4">
        <em class="fa fa-chevron-down"></em>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">With Divider</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Center-Aligned Content Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section section-default section-center">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Center-Aligned Content Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Custom Background Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section style="background-image: url('/portals/2/img/custom-header-bg.jpg');" class="section section-text-light section-background section-center">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4>Custom Background Section</h4>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Custom Background Section

(With Overlay)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<section style="background-image: url('/portals/2/img/custom-header-bg.jpg');" class="section section-text-light section-background section-center section-overlay">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-none">Custom Background Section</h4>
                <h5>(With Overlay)</h5>
                <p class="mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ipsum, facilisis eget scelerisque non, fermentum at tellus.</p>
            </div>
        </div>
    </div>
</section>

Video Section

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<section class="video section section-text-light section-video section-center" data-video-path="/portals/2/video/dark" data-plugin-video-background="/portals/2/video" data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%', 'overlay': true}">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h4>Video Section</h4>
                <p class="mb-none">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <br />
                    Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
                </p>
            </div>
        </div>
    </div>
</section>

Default Parallax Section

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<section style="background-image: url('/portals/2/img/custom-header-bg.jpg');" data-stellar-background-ratio="0.5" class="parallax section section-text-light section-parallax section-center">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h4>Default Parallax Section</h4>
                <p class="mb-none ">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <br />
                    Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
                </p>
            </div>
        </div>
    </div>
</section>

Parallax Section

(Fixed Image)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<section style="background-image: url('/portals/2/img/parallax-image.jpg');" data-stellar-background-ratio="0" class="parallax section section-text-light section-parallax section-center">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h4 class="mb-none">Parallax Section</h4>
                <h5>(Fixed Image)</h5>
                <p class="mb-none">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <br />
                    Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
                </p>
            </div>
        </div>
    </div>
</section>

Parallax Section

(Dark Text)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<section style="background-image: url('/portals/2/img/parallax-transparent.jpg');" data-stellar-background-ratio="0.5" class="parallax section section-parallax section-center">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h4 class="mb-none text-dark">Parallax Section</h4>
                <h5 class="text-dark">(Dark Text)</h5>
                <p class="mb-none">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <br />
                    Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
                </p>
            </div>
        </div>
    </div>
</section>

Half Section

(With Custom Background)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 p-none">
            <section style="background-image: url('/portals/2/img/custom-header-bg.jpg');" class="section section-text-light section-background section-center match-height">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-6 p-none">
            <section class="section section-default pl-lg pr-lg match-height">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="mb-none">Half Section</h4>
                        <h5>(With Custom Background)</h5>
                        <p class="mb-none">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <br />
                            Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.
                        </p>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Half Section

(With Parallax)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 p-none">
            <section class="section section-primary pl-lg pr-lg match-height">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="mb-none">Half Section</h4>
                        <h5>(With Parallax)</h5>
                        <p class="mb-none">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                            Aenean massa. <br />
                            Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut,
                            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean
                            vulputate eleifend tellus.
                        </p>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-6 p-none">
            <section style="background-image: url('/portals/2/img/parallax-image.jpg');" data-stellar-background-ratio="0" class="parallax section section-parallax match-height"></section>
        </div>
    </div>
</div>