Description: Three columns responsive icon boxes with style "linesAlt" for LivIcons. 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 05 --> <div class="container"> <div class="row"> <a href="javascript:"> <div class="icon-box-05 first col-md-4 col-sm-6 col-xs-12"> <div class="livicon-evo" data-options=" name: magic; style: lines-alt; size: 180px; strokeColor: #3498db; strokeColorAlt: #e74c3c; colorsOnHover: custom; strokeColorAction: #fff; strokeColorAltAction: #fff; eventOn: parent; delay: 0.2; drawOnViewport: true"> </div> <div class="line-center"></div> <h3 class="text-center">Simple Magic</h3> <h4 class="text-center">lorem ipsum</h4> </div> </a> <a href="javascript:"> <div class="icon-box-05 second col-md-4 col-sm-6 col-xs-12"> <div class="livicon-evo" data-options=" name: clock; style: lines-alt; size: 180px; strokeColor: #3498db; strokeColorAlt: #e74c3c; colorsOnHover: custom; strokeColorAction: #fff; strokeColorAltAction: #fff; eventOn: parent; delay: 0.2; drawOnViewport: true"> </div> <div class="line-center"></div> <h3 class="text-center">Always on Time</h3> <h4 class="text-center">lorem ipsum</h4> </div> </a> <a href="javascript:"> <div class="icon-box-05 third col-md-4 col-sm-6 col-xs-12"> <div class="livicon-evo" data-options=" name: calendar; style: lines-alt; size: 180px; strokeColor: #3498db; strokeColorAlt: #e74c3c; colorsOnHover: custom; strokeColorAction: #fff; strokeColorAltAction: #fff; eventOn: parent; delay: 0.2; drawOnViewport: true"> </div> <div class="line-center"></div> <h3 class="text-center">Strict Deadline</h3> <h4 class="text-center">lorem ipsum</h4> </div> </a> <a href="javascript:"> <div class="icon-box-05 fourth col-md-4 col-sm-6 col-xs-12"> <div class="livicon-evo" data-options=" name: gear; style: lines-alt; size: 180px; strokeColor: #3498db; strokeColorAlt: #e74c3c; colorsOnHover: custom; strokeColorAction: #fff; strokeColorAltAction: #fff; eventOn: parent; delay: 0.2; drawOnViewport: true"> </div> <div class="line-center"></div> <h3 class="text-center">Flex Settings</h3> <h4 class="text-center">lorem ipsum</h4> </div> </a> <a href="javascript:"> <div class="icon-box-05 fifth col-md-4 col-sm-6 col-xs-12"> <div class="livicon-evo" data-options=" name: pencil; style: lines-alt; size: 180px; strokeColor: #3498db; strokeColorAlt: #e74c3c; colorsOnHover: custom; strokeColorAction: #fff; strokeColorAltAction: #fff; eventOn: parent; delay: 0.2; drawOnViewport: true"> </div> <div class="line-center"></div> <h3 class="text-center">Perfect Design</h3> <h4 class="text-center">lorem ipsum</h4> </div> </a> <a href="javascript:"> <div class="icon-box-05 sixth col-md-4 col-sm-6 col-xs-12"> <div class="livicon-evo" data-options=" name: help; style: lines-alt; size: 180px; strokeColor: #3498db; strokeColorAlt: #e74c3c; colorsOnHover: custom; strokeColorAction: #fff; strokeColorAltAction: #fff; eventOn: parent; delay: 0.2; drawOnViewport: true"> </div> <div class="line-center"></div> <h3 class="text-center">Support Included</h3> <h4 class="text-center">lorem ipsum</h4> </div> </a> </div> </div>
/************ Icon box 05 ************/ .icon-box-05, .icon-box-05 h3, .icon-box-05 h4, .icon-box-05 .line-center { -webkit-transition: all .2s linear; -ms-transition: all .2s linear; transition: all .2s linear; } .icon-box-05 { background-color: #fff; height: 440px; } .icon-box-05 .livicon-evo { height: 180px; margin: 60px auto 50px; } .icon-box-05 .line-center { width: 180px; height: 5px; margin: 0 auto 30px; background-color: #3498db; } .icon-box-05 h3 { color: #3498db; font-size: 30px; font-weight: 700; } .icon-box-05 h4 { color: #3498db; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: -moz-translateY(20px); -ms-transform: -ms-translateY(20px); transform: translateY(20px); } .icon-box-05.first { border-bottom: 1px solid #ddd; } .icon-box-05.second { border-bottom: 1px solid #ddd; } .icon-box-05.third { border-bottom: 1px solid #ddd; } .icon-box-05.fourth { border-bottom: 1px solid #ddd; } .icon-box-05.fifth { border-bottom: 1px solid #ddd; } .icon-box-05:hover { background-color: #3498db; } .icon-box-05:hover .line-center { background-color: #fff; -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); } .icon-box-05:hover h3 { color: #fff; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .icon-box-05:hover h4 { color: #fff; opacity: 1; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } @media (min-width: 768px) { .icon-box-05.first { border-right: 1px solid #ddd; } .icon-box-05.third { border-right: 1px solid #ddd; } .icon-box-05.fifth { border-bottom: none; border-right: 1px solid #ddd; } } @media (min-width: 992px) { .icon-box-05.first { border-right: 1px solid #ddd; } .icon-box-05.second { border-right: 1px solid #ddd; } .icon-box-05.third { border-right: none; } .icon-box-05.fourth { border-bottom: none; border-right: 1px solid #ddd; } .icon-box-05.fifth { border-bottom: none; border-right: 1px solid #ddd; } }