Research & Planning

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.

Design & Develop

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.

Test & Deliver

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.

Step Boxes 02

Description: Step boxes with combination of morph and regular icons. This examples uses additional JavaScript code for supplementary animation.

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 02 -->
<div class="container">
    <div class="row">
        <div class="step-box-02 step1 col-sm-4 col-xs-12">
            <h4 class="text-center text-uppercase">Research & Planning</h4>
            <div class="line">
                <div class="morph-icon">
                    <div class="livicon-evo" data-options="
                        name: morph-square2-triangle2.svg;
                        style: solid;
                        solidColor: #0097A7;
                        size: 100%;
                        strokeWidth: 0;
                        colorsOnHover: darker;
                        morphState: end;
                        eventOn: .step-box-02.step1;
                        duration: 0.2
                    "></div>
                </div>
                <div class="straight-icon">
                    <div class="livicon-evo" data-options="
                        name: lab.svg;
                        style: solid;
                        size: 100%;
                        solidColor: #fff;
                        solidColorBg: #0097A7;
                        eventOn: .step-box-02.step1;
                        delay: 0.25
                    "></div>
                </div>
            </div>
            <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
        </div>
        <div class="step-box-02 step2 col-sm-4 col-xs-12">
            <h4 class="text-center text-uppercase">Design & Develop</h4>
            <div class="line">
                <div class="morph-icon">
                    <div class="livicon-evo" data-options="
                        name: morph-square2-triangle2.svg;
                        style: solid;
                        solidColor: #0097A7;
                        size: 100%;
                        strokeWidth: 0;
                        colorsOnHover: darker;
                        morphState: end;
                        eventOn: .step-box-02.step2;
                        duration: 0.2
                    "></div>
                </div>
                <div class="straight-icon">
                    <div class="livicon-evo" data-options="
                        name: pencil.svg;
                        style: solid;
                        size: 100%;
                        solidColor: #fff;
                        solidColorBg: #0097A7;
                        eventOn: .step-box-02.step2;
                        delay: 0.25
                    "></div>
                </div>
            </div>
            <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
        </div>
        <div class="step-box-02 step3 col-sm-4 col-xs-12">
            <h4 class="text-center text-uppercase">Test & Deliver</h4>
            <div class="line">
                <div class="morph-icon">
                    <div class="livicon-evo" data-options="
                        name: morph-square2-triangle2.svg;
                        style: solid;
                        solidColor: #0097A7;
                        size: 100%;
                        strokeWidth: 0;
                        colorsOnHover: darker;
                        morphState: end;
                        eventOn: .step-box-02.step3;
                        duration: 0.2
                    "></div>
                </div>
                <div class="straight-icon">
                    <div class="livicon-evo" data-options="
                        name: rocket.svg;
                        style: solid;
                        size: 100%;
                        rotate: 45;
                        solidColor: #fff;
                        solidColorBg: #0097A7;
                        eventOn: .step-box-02.step3;
                        delay: 0.25
                    "></div>
                </div>
            </div>
            <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
        </div>
    </div>
</div>
/************ Step box 02 ************/
.step-box-02 {
  padding: 0!important;
}
.step-box-02 h4 {
  color: #263238;
  font-size: 16px;
}
.step-box-02 p {
  padding: 0 15px 0!important;
  color: #78909C;
}
.step-box-02.step1:first-child .line {
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(40%, #B2DFDB));
  background: -webkit-linear-gradient(left, transparent 0%, #B2DFDB 40%);
  background: linear-gradient(to right, transparent 0%, #B2DFDB 40%);
}
.step-box-02.step3:last-child .line {
    background: -webkit-gradient(linear, left top, right top, color-stop(60%,#B2DFDB), color-stop(100%,transparent));
    background: -webkit-linear-gradient(left, #B2DFDB 60%, transparent 100%);
    background: linear-gradient(to right, #B2DFDB 60%,transparent 100%);
}
.step-box-02 .line {
  position: relative;
  height: 1px;
  width: 100%;
  margin-left: -10px;
  background: #B2DFDB;
  margin: 55px 0;
}
.step-box-02 .morph-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: -15px;
  left: 50%;
  margin-left: -15px;
}
.step-box-02 .straight-icon {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: 0px;
}
@media (max-width: 767px) {
  .step-box-02 {
    margin-top: 60px;
  }
}
//Step Box 02 additional animations
$(document).ready(function () {
    $('.step-box-02').hover(
        function() {
            TweenLite.to($(this).find(".morph-icon"), 0.15, {width:'90px', height:'90px', top: '-45px', marginLeft: '-45px', ease: Power0.easeNone});
            TweenLite.to($(this).find(".straight-icon"), 0.15, {width:'30px', height:'30px', top: '-15px', marginLeft: '-15px', ease: Power0.easeNone});
        },
        function() {
            TweenLite.to($(this).find(".morph-icon"), 0.15, {width:'30px', height:'30px', top: '-15px', marginLeft: '-15px', ease: Power0.easeNone});
            TweenLite.to($(this).find(".straight-icon"), 0.15, {width:'0px', height:'0px', top: '0px', marginLeft: '0px', ease: Power0.easeNone});
        }
    );
});

Categories

Step Boxes

Share