Creating

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.

View More

Printing

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.

View More

Storage

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.

View More

Revisions

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.

View More

Icon Boxes 04

Description: Four columns responsive icon boxes with combination of morph and regular LivIcons, the last ones are not animated in this example. 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 04 -->
<div class="container">
    <div class="row">
        <div class="icon-box-04 col-sm-3 col-xs-6">
            <div class="wrapper">
                <div class="livicon-evo back" data-options="
                    name: morph-octagon-sticker;
                    style: filled;
                    strokeColor: #57bfe1;
                    fillColor: #57bfe1;
                    size: 160px;
                    morphImage: path/to/your_image.jpg;
                    eventOn: grandparent;
                    drawOnViewport: false;
                    strokeWidth:0;">
                </div>
                <div class="livicon-evo front" data-options="
                    name: magic;
                    style: filled;
                    strokeColor: #3498db;
                    fillColor: #ecf0f1;
                    animated: none;
                    drawDelay: 0.5;
                    drawOnViewport: true">
                </div>
            </div>
            <h4 class="text-center text-uppercase">Creating</h4>
            <div class="line-center"></div>
            <p class="text-center">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>
            <p class="text-center"><a href="javascript:" type="button" class="btn btn-default btn-sm text-uppercase">View More</a></p>
        </div>
        <div class="icon-box-04 col-sm-3 col-xs-6">
            <div class="wrapper">
                <div class="livicon-evo back" data-options="
                    name: morph-octagon-sticker;
                    style: filled;
                    strokeColor: #57bfe1;
                    fillColor: #57bfe1;
                    size: 160px;
                    morphImage: path/to/your_image.jpg;
                    eventOn: grandparent;
                    drawOnViewport: false;
                    strokeWidth:0;">
                </div>
                <div class="livicon-evo front" data-options="
                    name: print-image;
                    style: filled;
                    strokeColor: #3498db;
                    fillColor: #ecf0f1;
                    animated: none;
                    drawDelay: 0.5;
                    drawOnViewport: true">
                </div>
            </div>
            <h4 class="text-center text-uppercase">Printing</h4>
            <div class="line-center"></div>
            <p class="text-center">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>
            <p class="text-center"><a href="javascript:" type="button" class="btn btn-default btn-sm text-uppercase">View More</a></p>
        </div>
        <div class="icon-box-04 col-sm-3 col-xs-6">
            <div class="wrapper">
                <div class="livicon-evo back" data-options="
                    name: morph-octagon-sticker;
                    style: filled;
                    strokeColor: #57bfe1;
                    fillColor: #57bfe1;
                    size: 160px;
                    morphImage: path/to/your_image.jpg;
                    eventOn: grandparent;
                    drawOnViewport: false;
                    strokeWidth:0;">
                </div>
                <div class="livicon-evo front" data-options="
                    name: save;
                    style: filled;
                    strokeColor: #3498db;
                    fillColor: #ecf0f1;
                    animated: none;
                    drawDelay: 0.5;
                    drawOnViewport: true">
                </div>
            </div>
            <h4 class="text-center text-uppercase">Storage</h4>
            <div class="line-center"></div>
            <p class="text-center">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>
            <p class="text-center"><a href="javascript:" type="button" class="btn btn-default btn-sm text-uppercase">View More</a></p>
        </div>
        <div class="icon-box-04 col-sm-3 col-xs-6">
            <div class="wrapper">
                <div class="livicon-evo back" data-options="
                    name: morph-octagon-sticker;
                    style: filled;
                    strokeColor: #57bfe1;
                    fillColor: #57bfe1;
                    size: 160px;
                    morphImage: path/to/your_image.jpg;
                    eventOn: grandparent;
                    drawOnViewport: false;
                    strokeWidth:0;">
                </div>
                <div class="livicon-evo front" data-options="
                    name: calendar;
                    style: filled;
                    strokeColor: #3498db;
                    fillColor: #ecf0f1;
                    animated: none;
                    drawDelay: 0.5;
                    drawOnViewport: true">
                </div>
            </div>
            <h4 class="text-center text-uppercase">Revisions</h4>
            <div class="line-center"></div>
            <p class="text-center">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>
            <p class="text-center"><a href="javascript:" type="button" class="btn btn-default btn-sm text-uppercase">View More</a></p>
        </div>
    </div>
</div>
/************ Icon box 04 ************/
.icon-box-04 .btn {
  -webkit-transition: all .2s linear;
  -ms-transition: all .2s linear;
  transition: all .2s linear;
}
.icon-box-04 .wrapper {
  margin: 0 auto;
  width: 160px;
  position: relative;
}
.icon-box-04 .livicon-evo.front {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
}
.icon-box-04 h4 {
  color: #34495e;
  font-size: 20px;
  font-weight: 900;
}
.icon-box-04 p {
  color: #90A4AE;
}
.icon-box-04 .line-center {
  width: 60px;
  height: 2px;
  background-color: #2980b9;
  margin: 20px auto 20px;
}
.icon-box-04 .btn {
  margin-top: 10px;
  border-radius: 0;
  border-width: 2px;
  border-color: #90A4AE;
  color: #90A4AE;
}
.icon-box-04 .btn:focus {
  background-color: #fff;
}
.icon-box-04 .btn:hover {
  border-color: #2980b9;
  background-color: #2980b9;
  color: #fff;
}
@media (max-width: 767px) {
  .icon-box-04 {
    margin-top: 40px;
  }
}

Categories

Icon Boxes

Share