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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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="fas fa-chevron-down"></em>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h4 class="mb-none">What is Lorem Ipsum?</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">What is Lorem Ipsum?</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-text-light section-background section-center" style="background-image: url('/portals/1/img/custom-header-bg.jpg');">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h4>What is Lorem Ipsum?</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/1/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>What is Lorem Ipsum?</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="video section section-text-light section-video section-center" data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%', 'overlay': true}" data-plugin-video-background="/portals/1/video" data-video-path="/portals/1/video/dark">
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h4>What is Lorem Ipsum?</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

<section class="section section-text-light section-parallax section-center" data-image-src="/portals/1/img/custom-header-bg.jpg" data-plugin-parallax="parallax">
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h4>What is Lorem Ipsum?</h4>
				<p class="mb-none">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.</p>
			</div>
		</div>
	</div>
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<section class="parallax section section-text-light section-parallax section-center" data-image-src="/portals/1/img/parallax-image.jpg" data-plugin-options="{'speed': 1.5}" data-plugin-parallax="parallax">
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h4>What is Lorem Ipsum?</h4>
				<p class="mb-none"> 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. </p>
			</div>
		</div>
	</div>
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<section class="parallax section section-parallax section-center" data-image-src="/portals/1/img/parallax-transparent.jpg" data-plugin-parallax="parallax">
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h4>What is Lorem Ipsum?</h4>
				<p class="mb-none"> 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. </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

<div class="container-fluid">
	<div class="row">
		<div class="col-md-6 p-none">
			<section style="background-image: url('/portals/1/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">
						<h5>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

<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">
						<h5>With Parallax</h5>
						<p class="mb-none"> 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. </p>
					</div>
				</div>
			</section>
		</div>
		<div class="col-md-6 p-none">
			<section class="parallax section section-parallax match-height" data-plugin-parallax="parallax" data-image-src="/portals/1/img/parallax-image.jpg"></section>
		</div>
	</div>
</div>