My forth feature block for the Mobirise Website builder.

Project Download:

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

HTML Code Snippet:

<section class="features5" group="Features" 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="9" step="1" value="6">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6">
        <input type="checkbox" title="Show Top Section" name="showTop" checked>
        <input type="range" inline title="Text Width" name="text_width" min="0" max="100" step="1" value="65" condition="showText == true">
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <select title="Cards" name="cardsAmount">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4" selected>4</option>
        </select>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="../_images/img/06.jpg" parallax>
            <input type="color" title="Background Color" value="#ffffff" 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="#ffffff" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.7" 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 text-center">
        <div class="row justify-content-center text-center pb-lg-5" mbr-if="showTop">
            <div class="col-12 col-md-10">
                <h2 class="mbr-section-title mbr-fonts-style pb-3" mbr-theme-style="display-2">Things We Do</h2>
                <p class="mbr-text mbr-fonts-style mx-auto wrapper pb-3" mbr-theme-style="display-7">
                    Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life one day however a small line.
                </p>
            </div>
        </div>
        <div class="media-container-row">
            <div class="card p-3 col-12 col-md-6" mbr-class="{'col-lg-3': cardsAmount == '4',
                             'col-lg-4': cardsAmount == '3'}">
                <div class="card-img pb-3">
                    <span mbr-icon class="mbr-iconfont fa-paint-brush fa" style="font-size: 50px; color: rgb(255, 185, 1);"></span>
                </div>
                <div class="card-box">
                    <h4 class="card-title py-3 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>Tiling &amp; Painting</b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 1" mbr-class="{'col-lg-3': cardsAmount == '4',
                             'col-lg-4': cardsAmount == '3'}">
                <div class="card-img pb-3">
                    <span mbr-icon class="mbr-iconfont fa-home fa" style="font-size: 50px; color: rgb(255, 185, 1);"></span>
                </div>
                <div class="card-box">
                    <h4 class="card-title py-3 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>
                        Renovation
                    </b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large</p>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 2" mbr-class="{'col-lg-3': cardsAmount == '4',
                             'col-lg-4': cardsAmount == '3'}">
                <div class="card-img pb-3">
                    <span mbr-icon class="mbr-iconfont fa-group fa" style="font-size: 50px; color: rgb(255, 185, 1);"></span>
                </div>
                <div class="card-box">
                    <h4 class="card-title py-3 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>
                        Consultation
                    </b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 3" mbr-class="{'col-lg-3': cardsAmount == '4',
                             'col-lg-4': cardsAmount == '3'}">
                <div class="card-img pb-3">
                    <span mbr-icon class="mbr-iconfont fa-pencil fa" style="font-size: 50px; color: rgb(255, 185, 1);"></span>
                </div>
                <div class="card-box mbr-fonts-style">
                    <h4 class="card-title py-3 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>
                        Design</b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">It is a paradisematic country, in which roasted parts of sentences fly into your mouth</p>
                </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);
}
.wrapper {
  width: (@text_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.card-img span {
  font-size: 72px;
  color: #707070;
}
.mbr-fonts-style {
  font-weight: 400;
}
H2 {
  color: #141414;
}
.card-title, .card-img B {
  color: #141414;
}
P {
  color: #999999;
}