Research & Planning

Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.

Design & Develop

Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.

Test & Deliver

Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements.

Step Boxes 03

Description: Step boxes with only one LivIcon for emphasis the last step. This examples uses additional JavaScript code for equal height of blocks.

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Step box 03 -->
<div class="container">
    <div class="row">
        <div class="step-box-03 col-md-4 col-xs-12">
            <div class="step1">
                <div class="step-content">
                    <h4 class="text-uppercase">Research & Planning</h4>
                    <p>Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.</p>
                </div>
            </div>
        </div>
        <div class="step-box-03 col-md-4 col-xs-12">
            <div class="step2">
                <div class="step-content">
                    <h4 class="text-uppercase">Design & Develop</h4>
                    <p>Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.</p>
                </div>
            </div>
        </div>
        <div class="step-box-03 col-md-4 col-xs-12">
            <div class="livicon-evo" data-options="
                name: cloud-download;
                style: lines;
                strokeColor: #eee;
                strokeWidth: 2px;
                eventOn: parent;
                repeat: loop;
                duration: 1;
                drawOnViewport: true">
            </div>
            <div class="step3">
                <div class="step-content">
                    <h4 class="text-uppercase">Test & Deliver</h4>
                    <p>Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements.</p>
                </div>
            </div>
        </div>
    </div>
</div>
/************ Step box 03 ************/
.step-box-03 {
  position: relative;
  min-height: 140px;
}
.step-box-03 h4 {
  color: #eee;
  margin-bottom: 15px;
  margin-top: 10px;
  font-weight: 300;
  font-size: 18px;
}
.step-box-03 p {
  color: #ccc;
  font-weight: 300;
  font-size: 14px;
}
.step-box-03 .step1,
.step-box-03 .step2,
.step-box-03 .step3 {
  height: 100%;
  position: static;
  z-index: 1;
  border-bottom: 3px solid #03A9F4;
  background: #37474F;
}
.step-box-03 .step1 {
  width: 90%;
  padding: 25px 0 20px 35px;
}
.step-box-03 .step2 {
  width: 80%;
  padding: 25px 0 20px 10px;
  margin: 0 auto;
}
.step-box-03 .step3 {
  width: 90%;
  padding: 25px 35px 20px 80px;
  float: right;
  background: #263238;
}
.step-box-03 .step2:before,
.step-box-03 .step3:before {
  background: #37474F;
  content: " ";
  position: absolute;
  display: block;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  border-bottom: 3px solid #03A9F4;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: skew(-12deg, 0deg);
  -ms-transform: skew(-12deg, 0deg);
  transform: skew(-12deg, 0deg);
}
.step-box-03 .step1:after,
.step-box-03 .step2:after,
.step-box-03 .step3:after {
  background: #37474F;
  content: " ";
  position: absolute;
  display: block;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  border-bottom: 3px solid #03A9F4;
  border-right: 20px solid #03A9F4;
  -ms-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: skew(-12deg, 0deg);
  -ms-transform: skew(-12deg, 0deg);
  transform: skew(-12deg, 0deg);
}
.step-box-03 .step3:before,
.step-box-03 .step3:after {
  background: #263238;
}

.step-box-03 .livicon-evo {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  left: 50px;
}
@media (max-width: 767px) {
  .step-box-03 .step1:after,
  .step-box-03 .step2:before,
  .step-box-03 .step2:after,
  .step-box-03 .step3:before,
  .step-box-03 .step3:after {
    display: none;
  }
  .step-box-03 .step1 {
    width: 100%;
    padding: 25px 35px 20px 35px;
  }
  .step-box-03 .step2 {
    width: 100%;
    padding: 25px 35px 20px 35px;
    margin-left: 0;
  }
  .step-box-03 .step3 {
    width: 100%;
    padding: 25px 35px 20px 120px;
    float: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .step-box-03 .step2:before,
  .step-box-03 .step3:before {
    display: none;
  }
  .step-box-03 .step2 {
    width: 90%;
    padding: 25px 0 20px 35px;
    margin-left: 0;
  }
  .step-box-03 .step3 {
    width: 90%;
    padding: 25px 0 20px 120px;
    float: none;
  }
}
@media (min-width: 992px) {
  .step-box-03 .step3:after {
    display: none;
  }
}
//Step Box 03: calculating and setting equal height
$(document).ready(function () {
    function equalHeight() {
        var arr =[];
        $('.step-box-03').each(function () {
            var h = $(this).find('.step-content').height();
            arr.push(h + 70); //70 is total margins and paddings
        });
        var max = Math.max.apply(Math, arr);
        $('.step-box-03').css('height', max+'px');
    };
    equalHeight();
    $(window).on('resize', function(){
        equalHeight();
    });
});

Categories

Step Boxes

Share