My first showcase block for the Mobirise Website builder.

Project Download:

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

HTML Code Snippet:


<section class="mbr-gallery mbr-slider-carousel" group="Sliders & Gallery" plugins="Masonry,BootstrapCarouselSwipe,Gallery,VimeoPlayer,SliderVideo">
    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" title="Top" name="paddingTop" min="0" max="9" step="1" value="6" inline>
        <input type="range" title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6" inline>
        <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="color" title="Overlay Color" name="overlayColor" value="#ffb901">
        <input type="checkbox" title="Gradient Overlay" name="gradOverlay">
        <input type="color" title="Overlay Color 2" name="overlayColor2" value="#45505b" condition="gradOverlay">
        <input type="range" title="Overlay Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.7" inline>
        <input type="color" title="Background Color" name="bgColor" value="#f8f8f8">
        <input type="gallery" title="Gallery" name="gallery">
        <!-- End block parameters -->
    </mbr-parameters>
    <div class="container">
        <div class="row justify-content-center text-center" 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">Featured Work</h2>
                <p class="mbr-text mbr-fonts-style mx-auto wrapper" mbr-theme-style="display-7">
                    There live the blind texts, separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
                </p>
            </div>
        </div>
        <div mbr-gallery="gallery" mbr-gallery-spacing="4" mbr-gallery-show-filter></div>
    </div>
</section>

HTML Code Snippet:


padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;
.wrapper {
  width: (@text_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.mbr-slider .carousel-control {
  background: #1b1b1b;
}
.mbr-slider .carousel-control-prev {
  left: 0;
  margin-left: 2.5rem;
}
.mbr-slider .carousel-control-next {
  right: 0;
  margin-right: 2.5rem;
}
.mbr-slider .modal-body .close {
  background: #1b1b1b;
}
.mbr-gallery-item > div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: @overlayColor;
  & when (@gradOverlay) {
    background: linear-gradient(to left, @overlayColor, @overlayColor2) !important;
  }
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
}
.mbr-gallery-item > div:hover {
  .mbr-gallery-title::before {
    background: transparent !important;
  }
  &:before {
    opacity: @overlayOpacity !important;
  }
}
.mbr-gallery-title {
  font-size: .9em;
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  z-index: 2;
  &:before {
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    background: @overlayColor !important;
    & when (@gradOverlay) {
      background: linear-gradient(to left, @overlayColor, @overlayColor2) !important;
    }
    opacity: @overlayOpacity;
    -webkit-transition: 0.2s background ease-in-out;
    transition: 0.2s background ease-in-out;
  }
}
.mbr-gallery-item--p4 {
  padding: 0.75rem;
}
P {
  color: #999999;
}
.mbr-fonts-style {
  font-weight: 400;
  border: none;
}
.btn-primary-outline {
  color: #141414;
  background: none;
  border: none;
}
.btn-primary-outline:hover {
  color: #ffb901;
}
.btn-primary-outline:active {
  border: none;
  color: #ffb901;
}
.btn:focus {
  box-shadow: none;
  color: #ffb901;
}
.btn {
  margin: 0 !important;
  padding: 1rem 2rem;
}

Images used:

Designed by Freestockcenter
Designed by Freepik
Designed by Freepik
https://www.pexels.com/photo/architecture-building-construction-daylight-534220/
https://pixabay.com/en/construction-worker-safety-2578410/
https://pixabay.com/en/man-working-construction-measuring-3752512/