Sections & Parallax

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>