Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
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%; } }