My first call to action block for the Mobirise Website builder.

Project Download:

HTML Code Snippet:

<section class="mbr-section info1" group="Info" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
        <!--Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Top" name="paddingTop" min="0" max="8" step="1" value="3">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="8" step="1" value="3">
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="../_images/img/04.jpg">
            <input type="color" title="Background Color" value="#ffb901" selected>
            <input type="video" title="Background Video" value="">
        <input type="checkbox" title="Overlay" name="overlay" checked condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#efefef" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.8" condition="overlay && bg.type !== 'color'">
        <!-- End block parameters -->
    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    <div class="container">
        <div class="row justify-content-center content-row">
            <div class="media-container-column title col-12 col-lg-7 col-md-6">
                <h2 class="align-left mbr-bold mbr-fonts-style" mbr-theme-style="display-2">Contractors &amp; Managers Since 1997.</h2>
            <div class="media-container-column col-12 col-lg-3 col-md-4">
                <div class="mbr-section-btn align-right py-4 hero-btn" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove"><a class="btn btn-white-outline" href="" data-app-placeholder="Type Text">GET A QUOTE<br></a></div>

CSS Code Snippet:

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
& when (@bg-type = 'color') {
  background-color: @bg-value;
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
.mbr-section-subtitle {
  color: #767676;
.btn {
  margin: 0 0 .5rem 0;
H2 {
  font-size: 30px;
  color: #ffffff;
.mbr-fonts-style {
  font-weight: 400;
.hero-btn a {
  font-weight: 700 !important;
  font-size: 0.75rem;