Elements
These modular elements can be readily used and customized across pages and in different blocks.
Gradient Background <> show code
<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
Background Image <> show code
<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.