Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.
Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.
Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements.
Description: Step boxes with only one LivIcon for emphasis the last step. This examples uses additional JavaScript code for equal height of blocks.
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 03 --> <div class="container"> <div class="row"> <div class="step-box-03 col-md-4 col-xs-12"> <div class="step1"> <div class="step-content"> <h4 class="text-uppercase">Research & Planning</h4> <p>Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.</p> </div> </div> </div> <div class="step-box-03 col-md-4 col-xs-12"> <div class="step2"> <div class="step-content"> <h4 class="text-uppercase">Design & Develop</h4> <p>Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements over content.</p> </div> </div> </div> <div class="step-box-03 col-md-4 col-xs-12"> <div class="livicon-evo" data-options=" name: cloud-download; style: lines; strokeColor: #eee; strokeWidth: 2px; eventOn: parent; repeat: loop; duration: 1; drawOnViewport: true"> </div> <div class="step3"> <div class="step-content"> <h4 class="text-uppercase">Test & Deliver</h4> <p>Lorem ipsum is a pseudo-latin text used in place of English to emphasise design elements.</p> </div> </div> </div> </div> </div>
/************ Step box 03 ************/ .step-box-03 { position: relative; min-height: 140px; } .step-box-03 h4 { color: #eee; margin-bottom: 15px; margin-top: 10px; font-weight: 300; font-size: 18px; } .step-box-03 p { color: #ccc; font-weight: 300; font-size: 14px; } .step-box-03 .step1, .step-box-03 .step2, .step-box-03 .step3 { height: 100%; position: static; z-index: 1; border-bottom: 3px solid #03A9F4; background: #37474F; } .step-box-03 .step1 { width: 90%; padding: 25px 0 20px 35px; } .step-box-03 .step2 { width: 80%; padding: 25px 0 20px 10px; margin: 0 auto; } .step-box-03 .step3 { width: 90%; padding: 25px 35px 20px 80px; float: right; background: #263238; } .step-box-03 .step2:before, .step-box-03 .step3:before { background: #37474F; content: " "; position: absolute; display: block; width: 50%; height: 100%; top: 0; left: 0; z-index: -1; border-bottom: 3px solid #03A9F4; -ms-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: skew(-12deg, 0deg); -ms-transform: skew(-12deg, 0deg); transform: skew(-12deg, 0deg); } .step-box-03 .step1:after, .step-box-03 .step2:after, .step-box-03 .step3:after { background: #37474F; content: " "; position: absolute; display: block; width: 50%; height: 100%; top: 0; right: 0; z-index: -1; border-bottom: 3px solid #03A9F4; border-right: 20px solid #03A9F4; -ms-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: skew(-12deg, 0deg); -ms-transform: skew(-12deg, 0deg); transform: skew(-12deg, 0deg); } .step-box-03 .step3:before, .step-box-03 .step3:after { background: #263238; } .step-box-03 .livicon-evo { position: absolute; top: 50%; margin-top: -30px; left: 50px; } @media (max-width: 767px) { .step-box-03 .step1:after, .step-box-03 .step2:before, .step-box-03 .step2:after, .step-box-03 .step3:before, .step-box-03 .step3:after { display: none; } .step-box-03 .step1 { width: 100%; padding: 25px 35px 20px 35px; } .step-box-03 .step2 { width: 100%; padding: 25px 35px 20px 35px; margin-left: 0; } .step-box-03 .step3 { width: 100%; padding: 25px 35px 20px 120px; float: none; } } @media (min-width: 768px) and (max-width: 991px) { .step-box-03 .step2:before, .step-box-03 .step3:before { display: none; } .step-box-03 .step2 { width: 90%; padding: 25px 0 20px 35px; margin-left: 0; } .step-box-03 .step3 { width: 90%; padding: 25px 0 20px 120px; float: none; } } @media (min-width: 992px) { .step-box-03 .step3:after { display: none; } }
//Step Box 03: calculating and setting equal height $(document).ready(function () { function equalHeight() { var arr =[]; $('.step-box-03').each(function () { var h = $(this).find('.step-content').height(); arr.push(h + 70); //70 is total margins and paddings }); var max = Math.max.apply(Math, arr); $('.step-box-03').css('height', max+'px'); }; equalHeight(); $(window).on('resize', function(){ equalHeight(); }); });