My second header block for the Mobirise Website builder.

Project Download:

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

HTML Code Snippet:

<section group="Headers" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{
   'mbr-fullscreen': fullScreen,
   'mbr-parallax-background': bg.parallax}">
    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="checkbox" title="Full Screen" name="fullScreen" checked>
        <input type="range" inline title="Top" name="paddingTop" min="0" max="9" step="1" value="6" condition="fullScreen == false">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6" condition="fullScreen == false">
        <input type="checkbox" title="Show Arrow" name="showArrow" checked>
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <input type="range" inline title="Text Width" name="text_width" min="0" max="100" step="1" value="60" condition="showText == true">
        <input type="checkbox" title="Show Buttons" name="showButtons" checked>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="https://i.imgur.com/PTghL5A.jpg" parallax selected>
            <input type="color" title="Background Color" value="#073B4C">
            <input type="video" title="Background Video" value="http://www.youtube.com/watch?v=uNCr7NdOJgw">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#141414" 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'">
        <!-- End block parameters -->
    </mbr-parameters>
    <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div>
    <div class="container align-center">
        <div class="row justify-content-md-center">
            <div class="mbr-white col-md-10">
                <h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style" mbr-theme-style="display-1" mbr-if="showTitle"><b>WE BUILD YOUR DREAMS</b></h1>
                <p class="mbr-text pb-3 mbr-fonts-style mx-auto wrapper" mbr-theme-style="display-5" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
                </p>
                <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn hero-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-secondary" href="https://freedesignblocks.com/" data-app-placeholder="Type Text">GET A QUOTE</a></div>
            </div>
        </div>
    </div>
    <div mbr-if="showArrow" class="mbr-arrow hidden-sm-down" aria-hidden="true">
        <a href="#next">
            <span mbr-icon class="fa-chevron-down fa"></span>
        </a>
    </div>
</section>

CSS Code Snippet:

& when not (@fullScreen) {
  padding-top: (@paddingTop * 15px);
  padding-bottom: (@paddingBottom * 15px);
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
.wrapper {
  width: (@text_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.mbr-arrow {
  background-color: transparent !important;
}
.hero-btn a {
  font-weight: 700;
  font-size: 0.75rem;
}
.fa {
  position: absolute;
  left: 23px !important;
  top: 8px !important;
  font-size: 18px;
}
.mbr-fonts-style {
  font-weight: 400;
}

Images used:

Designed by Freepik