Why choose us

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

Learn More

Always on Time

Lorem ipsum is a pseudo-Latin text used in place of English.

Quality Assembly

Lorem ipsum is a pseudo-Latin text used in place of English.

Fast Delivery

Lorem ipsum is a pseudo-Latin text used in place of English.

Step Boxes 01

Description: Four columns responsive step boxes with "solid" LivIcons with delays for drawing. Replace javascript: of href attribute with your links.

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 01 -->
<div class="container">
    <div class="row">
        <div class="step-box-01 intro col-md-3 col-sm-6 col-xs-12">
            <h3>Why choose us</h3>
            <p class="lead">
                Lorem ipsum is a pseudo-Latin text used in web design, typography, layout in
                place of English.
            </p>
            <p class="bottom">
                <a href="javascript:" class="text-uppercase">
                    <strong>Learn More</strong>
                    <span class="livicon-evo" data-options="
                        name: more;
                        size: 24px;
                        style: solid;
                        solidColor: #fff;
                        strokeWidth: 1;
                        eventOn: parent;
                        repeat: loop
                    "></span>
                </a>
            </p>
        </div>
        <div class="step-box-01 step1 col-md-3 col-sm-6 col-xs-12">
            <div class="livicon-evo" data-options="
                name: clock;
                style: solid;
                size: 90px;
                solidColor: #fff;
                solidColorBg: #455A64;
                strokeStyle: round;
                strokeWidth: 4px;
                eventOn: parent;
                drawDelay: 0;
                drawOnViewport: true">
            </div>
            <h4 class="text-center text-uppercase">Always on Time</h4>
            <p class="text-center">
                Lorem ipsum is a pseudo-Latin text used in place of English.
            </p>
        </div>
        <div class="step-box-01 step2 col-md-3 col-sm-6 col-xs-12">
            <div class="livicon-evo" data-options="
                name: wrench;
                style: solid;
                size: 90px;
                solidColor: #fff;
                solidColorBg: #37474F;
                eventOn: parent;
                drawDelay: 1.3;
                drawOnViewport: true">
            </div>
            <h4 class="text-center text-uppercase">Quality Assembly</h4>
            <p class="text-center">
                Lorem ipsum is a pseudo-Latin text used in place of English.
            </p>
        </div>
        <div class="step-box-01 step3 col-md-3 col-sm-6 col-xs-12">
            <div class="livicon-evo" data-options="
                name: truck;
                style: solid;
                size: 90px;
                solidColor: #fff;
                solidColorBg: #263238;
                eventOn: parent;
                duration: 1.2;
                drawDelay: 2.5;
                drawOnViewport: true">
            </div>
            <h4 class="text-center text-uppercase">Fast Delivery</h4>
            <p class="text-center">
                Lorem ipsum is a pseudo-Latin text used in place of English.
            </p>
        </div>
    </div>
</div>
/************ Step box 01 ************/
.step-box-01 {
  position: relative;
  min-height: 290px;
}
.step-box-01 h3,
.step-box-01 h4,
.step-box-01 p.lead {
  color: #fff;
}
.step-box-01.intro {
  padding: 25px;
  background-color: #FF5722;
}
.step-box-01.intro h3 {
  margin-bottom: 18px;
  font-size: 26px;
}
.step-box-01.intro:after {
  border-left-color: #FF5722;
}
.step-box-01.step1 {
  background-color: #455A64;
}
.step-box-01.step1:after {
  border-left-color: #455A64;
}
.step-box-01.step2 {
  background-color: #37474F;
}
.step-box-01.step2:after {
  border-left-color: #37474F;
}
.step-box-01.step3 {
  background-color: #263238;
}
.step-box-01 .livicon-evo {
  height: 90px;
  margin: 40px auto 35px;
}
.step-box-01:after {
    content: '';
    position: absolute;
    top: 15px;
    right: -15px;
    border: 8px solid transparent;
    z-index: 5;
}
.step-box-01 .bottom {
  position: absolute;
  left: 25px;
  bottom: 6px;
}
.step-box-01 .bottom a,
.step-box-01 .bottom a:hover,
.step-box-01 .bottom a:active,
.step-box-01 .bottom a:focus {
  color: #fff;
  text-decoration: none;
}
.step-box-01.step1 p,
.step-box-01.step2 p,
.step-box-01.step3 p {
  color: #ddd;
}
.step-box-01 .bottom .livicon-evo {
  display: inline-block;
  position: relative;
  height: 24px;
  top: -1px;
  margin: 0;
}
@media (min-width: 768px) {
  .step-box-01 .lead {
    font-size: 18px;
  }
}
@media (max-width: 991px) {
  .step-box-01.step1:after {
    display: none;
  }
}

Categories

Step Boxes

Share