Mobirise Templates - Header - Mobile App

Mobirise Templates - Header - Mobile App was developed to ease the creation of mobile application landing pages. The template has a very clean and modern design, perfect for presenting your application.

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="app-header">
	<mbr-parameters>
	<input type="checkbox" title="Show Title" name="showTitle" checked>
	<input type="checkbox" title="Show Text" name="showText" checked>
	<input type="checkbox" title="Show Buttons" name="showButtons">
	<input type="checkbox" title="Store Icons" name="si" checked>
	<fieldset type="background" name="bg" parallax>
	<input type="image" title="Background Image" value="https://i.imgur.com/6yqoChb.png" selected>
	<input type="color" title="Background Color" value="#7743ff">
	</fieldset>
	<input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
	<input type="color" title="Overlay Color" name="overlayColor" value="#1b1b1b" condition="overlay && bg.type !== 'color'">
	<input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0" 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 h-100">
	<div class="row h-100 align-items-center text-center">
	<div class="col-md-12 col-lg-7 header-content">
	<h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style" mbr-theme-style="display-1" mbr-if="showTitle"><div>Mobile Application Landing Page</div></h1>
	<p class="mbr-text pb-4 mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	<p class="mt-3" mbr-if="si">
	<a href="https://www.learnwd.com/"><img alt="image" class="app-img mr-sm-2" src="https://i.imgur.com/qfkUjUG.png"></a>
	<a href="https://www.learnwd.com/"><img alt="image" class="app-img" src="https://i.imgur.com/3l5HBnC.png"></a>
	</p>
	<div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-secondary" href="https://www.learnwd.com/">Download Now</a>
	<a class="btn btn-md btn-white-outline" href="https://www.learnwd.com/">Learn More</a></div>
	</div>
	<div class="col-md-10 col-lg-4 mx-auto p-4">
	<img alt="image" class="img-fluid" src="https://i.imgur.com/HQq52B4.png" title>
	</div>
	</div>
	</div>
	</section>

view raw Mobirise-Templates-Header-Mobile-App.html hosted with ❤ by GitHub

CSS Code:

	& when (@bg-type ='image') {
	background-image: url(@bg-value);
	}
	& when (@bg-type ='color') {
	background-color: @bg-value;
	}
	background-size: cover;
	background-position: center center;
	padding-top: 150px;
	padding-bottom: 100px;
	color: #fff;
	@media (min-width: 992px) {
	height: 100vh;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1.275rem;
	.header-content {
	margin-bottom: 0;
	text-align: left !important;
	}
	p {
	float: left;
	}
	}
	@media (min-width: 768px) {
	.header-content {
	margin-bottom: 0;
	text-align: center;
	}
	}
	.btn {
	margin-left: 0px !important;
	padding: 20px 40px;
	}
	.btn-secondary {
	color: white !important;
	}
	p {
	width: 85%;
	margin: 0 auto;
	}
	.app-img {
	width: 175px;
	}
	@media (max-width: 480px) {
	.app-img {
	margin-bottom: 15px;
	}
	}

view raw Mobirise-Templates-Header-Mobile-App.css hosted with ❤ by GitHub