Creative On Each Step

Sketch

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

Design

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

Develop

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

Deliver

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

Step Boxes 04

Description: Step boxes with big sized special "steps" LivIcons and the other ones on them which are not animated in this examples.

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 04 -->
<div class="container-fluid step-box-04-full-bg">
    <div class="container">
        <div class="row">
            <h3 class="text-center">Creative On Each Step</h3>
        </div>
        <div class="row">
            <div class="step-box-04 col-md-3 col-sm-6 col-xs-12">
                <div class="wrapper">
                    <div class="livicon-evo back" data-options="
                        name: step-one-fourth;
                        style: filled;
                        size: 100%;
                        strokeColor: #1393BD;
                        fillColor: #80D2ED;
                        strokeWidth: 2;
                        eventOn: grandparent;
                        drawOnViewport: true;
                        drawDelay: 0.5;
                        drawStartPoint: start;
                        drawStagger: 1;
                        keepStrokeWidthOnResize: true">
                    </div>
                    <div class="livicon-evo front" data-options="
                        name: pencil;
                        style: lines;
                        size: 60px;
                        strokeColor: #B4E7F8;
                        strokeWidth: 2;
                        animated: false;
                        drawOnViewport: true;
                        eventOn: grandparent;
                        colorsOnHover: lighter">
                    </div>
                </div>
                <h4 class="text-center">Sketch</h4>
                <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-04 col-md-3 col-sm-6 col-xs-12">
                <div class="wrapper">
                    <div class="livicon-evo back" data-options="
                        name: step-two-fourth;
                        style: filled;
                        size: 100%;
                        strokeColor: #1393BD;
                        fillColor: #80D2ED;
                        strokeWidth: 2;
                        eventOn: grandparent;
                        drawOnViewport: true;
                        drawDelay: 0.5;
                        drawStartPoint: start;
                        drawStagger: 1;
                        keepStrokeWidthOnResize: true">
                    </div>
                    <div class="livicon-evo front" data-options="
                        name: image;
                        style: lines;
                        size: 60px;
                        strokeColor: #B4E7F8;
                        strokeWidth: 2;
                        animated: false;
                        drawOnViewport: true;
                        eventOn: grandparent;
                        colorsOnHover: lighter">
                    </div>
                </div>
                <h4 class="text-center">Design</h4>
                <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-04 col-md-3 col-sm-6 col-xs-12">
                <div class="wrapper">
                    <div class="livicon-evo back" data-options="
                        name: step-three-fourth;
                        style: filled;
                        size: 100%;
                        strokeColor: #1393BD;
                        fillColor: #80D2ED;
                        strokeWidth: 2;
                        eventOn: grandparent;
                        drawOnViewport: true;
                        drawDelay: 0.5;
                        drawStartPoint: start;
                        drawStagger: 1;
                        keepStrokeWidthOnResize: true">
                    </div>
                    <div class="livicon-evo front" data-options="
                        name: desktop;
                        style: lines;
                        size: 60px;
                        strokeColor: #B4E7F8;
                        strokeWidth: 2;
                        animated: false;
                        drawOnViewport: true;
                        eventOn: grandparent;
                        colorsOnHover: lighter">
                    </div>
                </div>
                <h4 class="text-center">Develop</h4>
                <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-04 col-md-3 col-sm-6 col-xs-12">
                <div class="wrapper">
                    <div class="livicon-evo back" data-options="
                        name: step-full;
                        style: filled;
                        size: 100%;
                        strokeColor: #1393BD;
                        fillColor: #80D2ED;
                        strokeWidth: 2;
                        eventOn: grandparent;
                        drawOnViewport: true;
                        drawDelay: 0.5;
                        drawStartPoint: start;
                        drawStagger: 1;
                        keepStrokeWidthOnResize: true">
                    </div>
                    <div class="livicon-evo front" data-options="
                        name: upload;
                        style: lines;
                        size: 60px;
                        strokeColor: #B4E7F8;
                        strokeWidth: 2;
                        animated: false;
                        drawOnViewport: true;
                        eventOn: grandparent;
                        colorsOnHover: lighter">
                    </div>
                </div>
                <h4 class="text-center">Deliver</h4>
                <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>
</div>
/************ Step box 04 ************/
.step-box-04-full-bg {
  padding-top: 60px;
  padding-bottom: 40px;
  background-color: #57BFE1;
  font-weight: 300;
}
.step-box-04-full-bg h3,
.step-box-04-full-bg h4,
.step-box-04-full-bg p {
  color: #fff;
  font-weight: inherit;
}
.step-box-04-full-bg h3 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 30px;
}
.step-box-04-full-bg h4 {
  font-size: 18px;
}
.step-box-04-full-bg p {
  font-size: 14px;
  color: #B4E7F8;
}
.step-box-04 .wrapper {
  position: relative;
  margin: 10px auto 20px;
  width: 100%;
}
.step-box-04 .livicon-evo.back {

}
.step-box-04 .livicon-evo.front {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
}
@media (max-width: 767px) {
  .step-box-04 .wrapper {
    width: 62%;
  }
}

Categories

Step Boxes

Share