Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<div class="h300 bg-gray-lineargradient"></div>

	<div class="h300 bg-green-lineargradient"></div>

	<div class="h300 bg-blue-lineargradient"></div>

	<div class="h300 bg-green-gradient"></div>

	<div class="h300 bg-black-gradient-opacity"></div>

						
How to use

Green-Blue

Blue-Green


	<div class="h300 bg-image-holder" style="background-image: url('path/to/img..');"></div>

	<!-- background image with content -->
	<div class="h300 bg-image-holder text-center" style="background-image: url('path/to/img..');">
		<h1 class="text-white pt50 mb-2">Demo Title</h1>
		<p class="text-white">Lorem ipsum dolor sit amet.</p>
	</div>

	<!-- Background fixed with opacity -->
	<div class="h300 bg-image bg-fixed text-center" style="background-image: url('path/to/img..');">
		<div class="overlay-content">
			<h1 class="text-white pt50 mb-2">Demo Title</h1>
			<p class="text-white">Lorem ipsum dolor sit amet.</p>
		</div>
	</div>

						
How to use
  • Use .bg-image-holder wrapper and set a backgrount image to it.
  • For overlay shadow over background use .bg-image class and wrap the contents inside the .overlay-content wrapper

Background Image

Background fixed with opacity

Demo Title

Lorem ipsum dolor sit amet.