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;
}
}