Mobirise Templates - Features - Large Image

Mobirise Templates - Features - Large Image is the Mobirise version of this Bootstrap Template.

This Mobirise Template is fully functional and everything in the design can be customized inside the Mobirise editor itself.

For a live preview of this template click here

If you wish to see more features added to this block then please contact me and describe your desired feature.

Requirements

• Mobirise 4
• Mobirise Code Editor

If you don't know how to implement this template into your Mobirise project please read my guide here.

HTML Code:

	<section class="features-block-2">
	<mbr-parameters>
	<input type="range" inline title="Top" name="paddingTop" min="0" max="100" step="1" value="100">
	<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="100" step="1" value="100">
	<input type="checkbox" title="Show Title" name="h1" checked>
	<input type="checkbox" title="Show Subtitle" name="h2" checked>
	<input type="checkbox" title="Show Bottom Text" name="bt" checked>
	<input type="checkbox" title="Show Bottom Title" name="bh1" condition="bt" checked>
	<input type="checkbox" title="Show Bottom text" name="bh2" condition="bt" checked>
	<input type="checkbox" title="Show Bottom link" name="bl" condition="bt" checked>
	<fieldset type="background" name="bg" parallax>
	<input type="image" title="Background Image" value="../_images/jumbotron.jpg" parallax>
	<input type="color" title="Background Color" value="#ffffff" selected>
	</fieldset>
	<input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
	<input type="color" title="Overlay Color" name="overlayColor" value="#767676" condition="overlay && bg.type !== 'color'">
	<input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.4" condition="overlay && bg.type !== 'color'">
	</mbr-parameters>
	<div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div>
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-12 col-md-8 text-center">
	<h2 class="mbr-section-title mbr-fonts-style pb-3" mbr-theme-style="display-2" mbr-if="h1">Responsive Design using Bootstrap</h2>
	<p class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-7" mbr-if="h2">We offer a huge collection of simple, beautiful and ready to use blocks. All blocks can be downloaded free of charge from learnwd.com</p>
	</div>
	<div class="col-12">
	<img alt="image" class="img-fluid mt-5" src="https://i.imgur.com/TM8k0Pc.png">
	</div>
	</div>
	<div class="row text-left pt-5" mbr-if="bt">
	<div class="col-12 col-md-6">
	<h3 class="mbr-section-title mbr-fonts-style pb-1" mbr-theme-style="display-5" mbr-if="bh1">What is Bootstrap?</h3>
	<p class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-7" mbr-if="bh2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<p class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-7" mbr-if="bl"><a href="https://www.learnwd.com/">Read More &gt;</a></p>
	</div>
	<div class="col-12 col-md-6 pt-4 pt-md-0">
	<h3 class="mbr-section-title mbr-fonts-style pb-1" mbr-theme-style="display-5" mbr-if="bh1">How does Bootstrap work?</h3>
	<p class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-7" mbr-if="bh2">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
	<p class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-7" mbr-if="bl"><a href="https://www.learnwd.com/">Read More &gt;</a></p>
	</div>
	</div>
	</div>
	</section>

view raw Mobirise-Templates-Features-Large-Image.html hosted with ❤ by GitHub

CSS Code:

	padding-top: (@paddingTop * 1px);
	padding-bottom: (@paddingBottom * 1px);
	& when (@bg-type = 'image') {
	background-image: url(@bg-value);
	}
	& when (@bg-type = 'color') {
	background-color: @bg-value;
	}

view raw Mobirise-Templates-Features-Large-Image.css hosted with ❤ by GitHub