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