My third feature block for the Mobirise Website builder.

Project Download:

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

HTML Code Snippet:

<section>
    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <input type="color" title="Progress Color" name="progressColor" value="#528bff">
        <input type="color" title="Background color" name="bgc" value="#ffffff" selected>
        <input type="range" inline title="Subtitle Width" name="subtitle_width" min="0" max="100" step="1" value="90">
        <select title="Progress count" name="progressCount">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected>3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <input type="range" inline title="Progress 1" name="progress1" min="0" max="100" step="1" value="85">
        <input type="range" inline title="Progress 2" name="progress2" min="0" max="100" step="1" value="60" condition="progressCount>1">
        <input type="range" inline title="Progress 3" name="progress3" min="0" max="100" step="1" value="75" condition="progressCount>2">
        <input type="range" inline title="Progress 4" name="progress4" min="0" max="100" step="1" value="70" condition="progressCount>3">
        <input type="range" inline title="Progress 5" name="progress5" min="0" max="100" step="1" value="60" condition="progressCount>4">
        <fieldset type="background" name="bg">
            <input type="image" title="Image" value="https://i.imgur.com/KcGxkjg.png" selected>
        </fieldset>
        <!-- End block parameters -->
    </mbr-parameters>
    <div class="container-fluid p-0">
        <div class="row justify-content-center align-items-center">
            <div class="col-12 col-lg-6">
                <div class="img-bg"></div>
            </div>
            <div class="progress_elements col-lg-6">
                <div class="row my-4 px-5 text-center text-md-left">
                    <div class="col-12 col-md-10 col-lg-8">
                        <h2 class="mbr-section-title mbr-fonts-style pb-3" mbr-theme-style="display-2" mbr-if="showTitle">Professional Solutions</h2>
                        <p class="mbr-text mbr-fonts-style wrapper pb-3" mbr-theme-style="display-7" mbr-if="showText">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks.</p>
                    </div>
                </div>
                <div class="row px-5">
                    <div class="col-12 col-lg-8">
                        <div class="progress1 pb-5">
                            <div class="title-wrap">
                                <div class="progressbar-title mbr-fonts-style" mbr-theme-style="display-7">
                                    <p data-app-selector=".progressbar-title p, .progress_value">
                                        <strong>Marketing</strong>
                                    </p>
                                </div>
                                <div class="progress_value mbr-fonts-style" mbr-theme-style="display-7">
                                    <div class="progressbar-number">
                                    </div>
                                    <span>%</span>
                                </div>
                            </div>
                            <progress class="progress progress-primary " value="{{progress1}}" max="100">
                            </progress>
                        </div>
                        <div class="progress2 pb-5" mbr-if="progressCount>1">
                            <div class="title-wrap">
                                <div class="progressbar-title mbr-fonts-style" mbr-theme-style="display-7">
                                    <p data-app-selector=".progressbar-title p, .progress_value">
                                        <strong>Investing</strong>
                                    </p>
                                </div>
                                <div class="progress_value mbr-fonts-style" mbr-theme-style="display-7">
                                    <div class="progressbar-number">
                                    </div>
                                    <span>%</span>
                                </div>
                            </div>
                            <progress class="progress progress-primary" value="{{progress2}}" max="100">
                            </progress>
                        </div>
                        <div class="progress3 pb-5" mbr-if="progressCount>2">
                            <div class="title-wrap">
                                <div class="progressbar-title mbr-fonts-style" mbr-theme-style="display-7">
                                    <p data-app-selector=".progressbar-title p, .progress_value">
                                        <strong>Analysing</strong>
                                    </p>
                                </div>
                                <div class="progress_value mbr-fonts-style" mbr-theme-style="display-7">
                                    <div class="progressbar-number">
                                    </div>
                                    <span>%</span>
                                </div>
                            </div>
                            <progress class="progress progress-primary" value="{{progress3}}" max="100">
                            </progress>
                        </div>
                        <div class="progress4 pb-5" mbr-if="progressCount>3">
                            <div class="title-wrap">
                                <div class="progressbar-title mbr-fonts-style" mbr-theme-style="display-7">
                                    <p data-app-selector=".progressbar-title p, .progress_value">
                                        <strong>Safety</strong>
                                    </p>
                                </div>
                                <div class="progress_value mbr-fonts-style" mbr-theme-style="display-7">
                                    <div class="progressbar-number">
                                    </div>
                                    <span>%</span>
                                </div>
                            </div>
                            <progress class="progress progress-primary" value="{{progress4}}" max="100">
                            </progress>
                        </div>
                        <div class="progress5 pb-5" mbr-if="progressCount>4">
                            <div class="title-wrap">
                                <div class="progressbar-title mbr-fonts-style" mbr-theme-style="display-7">
                                    <p data-app-selector=".progressbar-title p, .progress_value">
                                        <strong>Study</strong>
                                    </p>
                                </div>
                                <div class="progress_value mbr-fonts-style" mbr-theme-style="display-7">
                                    <div class="progressbar-number">
                                    </div>
                                    <span>%</span>
                                </div>
                            </div>
                            <progress class="progress progress-primary" value="{{progress5}}" max="100">
                            </progress>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS Code Snippet:

background-color: @bgc;
overflow-x: hidden;
.wrapper {
  width: (@subtitle_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.img-bg {
  background: url(@bg-value);
  background-size: cover;
  background-position: center center;
  height: 450px;
  @media (min-width: 992px) {
    height: 630px;
  }
}
.progress {
  width: 100%;
}
.title-wrap {
  display: flex;
  justify-content: space-between;
}
progress {
  height: 8px;
}
.progressbar-number {
  display: inline-block;
}
.progress-primary {
  background: rgba(206, 206, 206, 0.4);
  border: none;
  outline: none;
}
.progress-primary::-webkit-progress-bar {
  background: rgba(206, 206, 206, 0.4);
}
.mbr-section-subtitle {
  color: #767676;
}
.section-content-title {
  font-weight: 500;
}
.progress_value {
  position: relative;
}
.progress1 .progressbar-number:before, .progress2 .progressbar-number:before, .progress3 .progressbar-number:before, .progress4 .progressbar-number:before, .progress5 .progressbar-number:before {
  position: absolute;
  right: 15px;
  top: 0;
}
progress[value]::-webkit-progress-bar {
  background: rgba(206, 206, 206, 0.4);
}
progress::-webkit-progress-value {
  background: @progressColor;
}
progress[value]::-moz-progress-bar {
  background: @progressColor;
}
progress::-ms-fill {
  background: @progressColor;
}
.progress1 .progressbar-number:before {
  content: '@{progress1}';
}
.progress2 .progressbar-number:before {
  content: '@{progress2}';
}
.progress3 .progressbar-number:before {
  content: '@{progress3}';
}
.progress4 .progressbar-number:before {
  content: '@{progress4}';
}
.progress5 .progressbar-number:before {
  content: '@{progress5}';
}
@media (min-width: 768px) {
  .text-elements {
    padding-right: 3rem;
  }
  .progress_elements {
    padding-left: 3rem;
  }
}
.progressbar-title p, .progress_value STRONG {
  color: #141414;
}
.progressbar-title p, .progress_value {
  color: #141414;
}
H2 {
  color: #141414;
}
p {
  color: #999999;
}
.mbr-fonts-style {
  font-weight: 400;
}

Images used:

Designed by Freepik