Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Description: Three columns responsive icon boxes with big LivIcons as background with 'autoPlay'
option turn on. Also buttons contains 2 icons each, which are changed on hover. 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
<!-- Icon box 06 --> <div class="container"> <div class="row"> <div class="icon-box-06 box1 col-md-4 col-sm-6 col-xs-12"> <div class="wrapper"> <div class="livicon-evo" data-options=" name: thumbnails-small; size: 360px; rotate: 180; style: lines; strokeColor: #000; duration: 5; repeat: loop; repeatDelay: 25; eventType: none; autoPlay: true; colorsOnHover: none"> </div> </div> <div class="this-content"> <h3>Visual Page Builder</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p> </div> <a href="javascript:"> <div class="btn-group" role="group"> <button class="btn btn-default text text-uppercase">Check It Out</button> <button class="btn btn-default icon"> <div class="livicon-evo arrow" data-options=" name: arrow-right; size: 30px; style: lines; strokeColor: #fff; strokeWidth: 2px; repeat: loop; eventOn: grandparent; colorsOnHover:none"> </div> <div class="livicon-evo main" data-options=" name: thumbnails-small; size: 30px; style: lines; strokeColor: #fff; animated: false; colorsOnHover: none"> </div> </button> </div> </a> </div> <div class="icon-box-06 box2 col-md-4 col-sm-6 col-xs-12"> <div class="wrapper"> <div class="livicon-evo" data-options=" name: gears; size: 360px; style: lines; strokeColor: #000; delay: 5; duration: 5; repeat: loop; repeatDelay: 25; eventType: none; autoPlay: true; colorsOnHover: none"> </div> </div> <div class="this-content"> <h3>Flexible Settings</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p> </div> <a href="javascript:"> <div class="btn-group" role="group"> <button class="btn btn-default text text-uppercase">Try to Play</button> <button class="btn btn-default icon"> <div class="livicon-evo arrow" data-options=" name: arrow-right; size: 30px; style: lines; strokeColor: #fff; strokeWidth: 2px; repeat: loop; eventOn: grandparent; colorsOnHover: none"> </div> <div class="livicon-evo main" data-options=" name: gear; size: 30px; style: lines; strokeColor: #fff; animated: false; colorsOnHover: none"> </div> </button> </div> </a> </div> <div class="icon-box-06 box3 col-md-4 col-sm-6 col-xs-12"> <div class="wrapper"> <div class="livicon-evo" data-options=" name: like; size: 360px; style: lines; strokeColor: #000; delay: 10; duration: 5; repeat: loop; repeatDelay: 25; eventType: none; autoPlay: true; colorsOnHover: none"> </div> </div> <div class="this-content"> <h3>Award Winning Design</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p> </div> <a href="javascript:"> <div class="btn-group" role="group"> <button class="btn btn-default text text-uppercase">Vote For Us</button> <button class="btn btn-default icon"> <div class="livicon-evo arrow" data-options=" name: arrow-right; size: 30px; style: lines; strokeColor: #fff; strokeWidth: 2px; repeat: loop; eventOn: grandparent; colorsOnHover: none"> </div> <div class="livicon-evo main" data-options=" name: like; size: 30px; style: lines; strokeColor: #fff; animated: false; colorsOnHover: none"> </div> </button> </div> </a> </div> <div class="icon-box-06 box4 col-md-4 col-sm-6 col-xs-12"> <div class="wrapper"> <div class="livicon-evo" data-options=" name: tablet; size: 360px; style: lines; strokeColor: #000; delay: 15; duration: 5; repeat: loop; repeatDelay: 25; eventType: none; autoPlay: true; colorsOnHover: none"> </div> </div> <div class="this-content"> <h3>High Resolution</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p> </div> <a href="javascript:"> <div class="btn-group" role="group"> <button class="btn btn-default text text-uppercase">Learn More</button> <button class="btn btn-default icon"> <div class="livicon-evo arrow" data-options=" name: arrow-right; size: 30px; style: lines; strokeColor: #fff; strokeWidth: 2px; repeat: loop; eventOn: grandparent; colorsOnHover: none"> </div> <div class="livicon-evo main" data-options=" name: tablet; size: 30px; style: lines; strokeColor: #fff; animated: false; colorsOnHover: none"> </div> </button> </div> </a> </div> <div class="icon-box-06 box5 col-md-4 col-sm-6 col-xs-12"> <div class="wrapper"> <div class="livicon-evo" data-options=" name: globe; size: 360px; style: lines; strokeColor: #000; delay: 20; duration: 5; repeat: loop; repeatDelay: 25; eventType: none; autoPlay: true; colorsOnHover: none"> </div> </div> <div class="this-content"> <h3>Multilingual Support</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p> </div> <a href="javascript:"> <div class="btn-group" role="group"> <button class="btn btn-default text text-uppercase">Open a Ticket</button> <button class="btn btn-default icon"> <div class="livicon-evo arrow" data-options=" name: arrow-right; size: 30px; style: lines; strokeColor: #fff; strokeWidth: 2px; repeat: loop; eventOn: grandparent; colorsOnHover: none"> </div> <div class="livicon-evo main" data-options=" name: globe; size: 30px; style: lines; strokeColor: #fff; animated: false; colorsOnHover: none"> </div> </button> </div> </a> </div> <div class="icon-box-06 box6 col-md-4 col-sm-6 col-xs-12"> <div class="wrapper"> <div class="livicon-evo" data-options=" name: cloud-upload; size: 360px; style: lines; strokeColor: #000; delay: 25; duration: 3; repeat: loop; repeatDelay: 25; eventType: none; autoPlay: true; colorsOnHover: none"> </div> </div> <div class="this-content"> <h3>Cloud Storage Included</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p> </div> <a href="javascript:"> <div class="btn-group" role="group"> <button class="btn btn-default text text-uppercase">Register Now</button> <button class="btn btn-default icon"> <div class="livicon-evo arrow" data-options=" name: arrow-right; size: 30px; style: lines; strokeColor: #fff; strokeWidth: 2px; repeat: loop; eventOn: grandparent; colorsOnHover: none"> </div> <div class="livicon-evo main" data-options=" name: cloud-upload; size: 30px; style: lines; strokeColor: #fff; animated: false; colorsOnHover: none"> </div> </button> </div> </a> </div> </div> </div>
/************ Icon box 06 ************/ .icon-box-06 { position: relative; padding: 40px; min-height: 360px; overflow: hidden!important; color: #fff; } .icon-box-06 .wrapper { position: absolute; top: -80px; right: -80px; z-index: 1; opacity: 0.05; } .icon-box-06 .this-content { position: relative; z-index: 100; } .icon-box-06 h3 { margin-bottom: 30px; font-size: 24px; font-weight: 700; color: #fff; } .icon-box-06 p { font-size: 14px; line-height: 1.6; font-weight: 300; margin-bottom: 30px; color: #fff; } .icon-box-06 .btn-group { position: absolute; left: 40px; bottom: 40px; } .icon-box-06 .btn { border-radius: 2px; border: 2px solid #fff; color: #fff; background-color: transparent; } .icon-box-06 .btn:active { -webkit-box-shadow: none; box-shadow: none; } .icon-box-06 .btn:hover { color: #fff; background-color: transparent; border-color: #fff; } .icon-box-06 .btn:focus, .icon-box-06 .btn:active:focus, .icon-box-06 .btn:active.focus { outline: 0; } .icon-box-06 .text { min-width: 160px; height: 50px; font-weight: 900; } .icon-box-06 .icon { position: relative; height: 50px; margin-left: -2px!important; } .icon-box-06 .btn-group .main, .icon-box-06 .btn-group .arrow { -webkit-transition: opacity .2s linear; -ms-transition: opacity .2s linear; transition: opacity .2s linear; } .icon-box-06 .btn-group .arrow { opacity: 0; position: absolute; top: 8px; left: 12px; } .icon-box-06 .btn-group:hover .main { opacity: 0; } .icon-box-06 .btn-group:hover .arrow { opacity: 1; } .icon-box-06.box1 { background-color: #546E7A; } .icon-box-06.box2 { background-color: #8BC34A; } .icon-box-06.box3 { background-color: #FFC107; } .icon-box-06.box4 { background-color: #03A9F4; } .icon-box-06.box5 { background-color: #8D6E63; } .icon-box-06.box6 { background-color: #26A69A; } @media (max-width: 767px) { .icon-box-06 { min-height: 300px; } }