Icon Boxes 05

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

Categories

Icon Boxes

Share