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

Project Download:

https://www.dropbox.com/s/lo536g098l7d4qc/project.mobirise?dl=1

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}">
    <mbr-parameters>
        <!--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="http://www.youtube.com/watch?v=uNCr7NdOJgw">
        </fieldset>
        <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 -->
    </mbr-parameters>
    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
    <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>
            <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="https://freedesignblocks.com/" data-app-placeholder="Type Text">GET A QUOTE<br></a></div>
            </div>
        </div>
    </div>
</section>

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;
}