My sixth feature block for the Mobirise Website builder.

Project Download:

https://www.dropbox.com/s/yiwfdxz3k24srsy/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 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" selected>3</option>
            <option value="4">4</option>
        </select>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="#" 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="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-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>Address</b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">123 6th St.
                        <br>Melbourne, FL 32904</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-phone 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>
                        Phone
                    </b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">Phone: +44 123 123  
<br>Fax: +04 1234 1234 1234</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-envelope 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>
                        Email
                    </b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">support@website.com
                        <br>Twitter: @yourtwitter</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>
                        Email</b></h4>
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">support@website.com 
<br>Twitter: @yourtwitter</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);
}
.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;
  text-align: center;
}