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