Visual Page Builder

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.

Flexible Settings

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.

Award Winning Design

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.

High Resolution

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.

Multilingual Support

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.

Cloud Storage Included

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.

Icon Boxes 06

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

Categories

Icon Boxes

Share