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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
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. It's also called placeholder (or filler) text. It's a convenient tool for examples.
Description: Four columns responsive icon boxes with LivIcons on colored background boxes. 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 03 --> <div class="container"> <div class="row icon-box-03"> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg1 right"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: heart.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper right"> <h4 class="text-uppercase"><a href="javascript:">Made with love</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg2 left"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: briefcase.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper left"> <h4 class="text-uppercase"><a href="javascript:">Wide list of projects</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> </div> <div class="row icon-box-03"> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg3 right"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: bell.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper right"> <h4 class="text-uppercase"><a href="javascript:">Notifications</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg4 left"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: credit-card-in.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper left"> <h4 class="text-uppercase"><a href="javascript:">On time payouts</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> </div> <div class="row icon-box-03"> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg5 right"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: trophy.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper right"> <h4 class="text-uppercase"><a href="javascript:">Award winning</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg6 left"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: gift.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"></div> </div> </div> <div class="text-wrapper left"> <h4 class="text-uppercase"><a href="javascript:">Special offers</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> </div> <div class="row icon-box-03"> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg7 right"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: gears.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper right"> <h4 class="text-uppercase"><a href="javascript:">Flexible settings</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> <div class="col-md-6 col-xs-12"> <div class="icon-wrapper bg8 left"> <div class="sub-wrapper"> <div class="livicon-evo" data-options=" name: help.svg; style: lines; strokeColor: #fff; eventOn: grandparent; drawOnViewport: true"> </div> </div> </div> <div class="text-wrapper left"> <h4 class="text-uppercase"><a href="javascript:">Extended support</a></h4> <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. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p> </div> </div> </div> </div>
/************ Icon box 03 ************/ .icon-box-03 .sub-wrapper { -webkit-transition: all .2s linear; -ms-transition: all .2s linear; transition: all .2s linear; } .icon-box-03 .icon-wrapper { float: none; position: relative; width: 120px; height: 120px; margin: 40px auto 20px; } .icon-box-03 .sub-wrapper { position: absolute; top: 6px; left: 6px; width: 108px; height: 108px; opacity: 0.62; } .icon-box-03 .livicon-evo { position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; } .icon-box-03 .icon-wrapper:hover .sub-wrapper { opacity: 1; } .icon-box-03 .text-wrapper { text-align: center; } .icon-box-03 h4 { color: #2C3F50; font-size: 17px; font-weight: 700; margin: 0 0 10px; } .icon-box-03 p { color:#90A4AE; } .icon-box-03 .icon-wrapper.bg1 { background-color: #80CBC4; } .icon-box-03 .icon-wrapper.bg1 .sub-wrapper { background-color: #80CBC4; border: 1px solid #80CBC4; } .icon-box-03 .icon-wrapper.bg1:hover .sub-wrapper { background-color: #26A69A; border-color: #fff; } .icon-box-03 .icon-wrapper.bg2 { background-color: #CE93D8; } .icon-box-03 .icon-wrapper.bg2 .sub-wrapper { background-color: #CE93D8; border: 1px solid #CE93D8; } .icon-box-03 .icon-wrapper.bg2:hover .sub-wrapper { background-color: #AB47BC; border-color: #fff; } .icon-box-03 .icon-wrapper.bg3 { background-color: #81D4FA; } .icon-box-03 .icon-wrapper.bg3 .sub-wrapper { background-color: #81D4FA; border: 1px solid #81D4FA; } .icon-box-03 .icon-wrapper.bg3:hover .sub-wrapper { background-color: #29B6F6; border-color: #fff; } .icon-box-03 .icon-wrapper.bg4 { background-color: #FFCC80; } .icon-box-03 .icon-wrapper.bg4 .sub-wrapper { background-color: #FFCC80; border: 1px solid #FFCC80; } .icon-box-03 .icon-wrapper.bg4:hover .sub-wrapper { background-color: #FFA726; border-color: #fff; } .icon-box-03 .icon-wrapper.bg5 { background-color: #B0BEC5; } .icon-box-03 .icon-wrapper.bg5 .sub-wrapper { background-color: #B0BEC5; border: 1px solid #B0BEC5; } .icon-box-03 .icon-wrapper.bg5:hover .sub-wrapper { background-color: #78909C; border-color: #fff; } .icon-box-03 .icon-wrapper.bg6 { background-color: #FF8A65; } .icon-box-03 .icon-wrapper.bg6 .sub-wrapper { background-color: #FF8A65; border: 1px solid #FF8A65; } .icon-box-03 .icon-wrapper.bg6:hover .sub-wrapper { background-color: #FF5722; border-color: #fff; } .icon-box-03 .icon-wrapper.bg7 { background-color: #B39DDB; } .icon-box-03 .icon-wrapper.bg7 .sub-wrapper { background-color: #B39DDB; border: 1px solid #B39DDB; } .icon-box-03 .icon-wrapper.bg7:hover .sub-wrapper { background-color: #7E57C2; border-color: #fff; } .icon-box-03 .icon-wrapper.bg8 { background-color: #81C784; } .icon-box-03 .icon-wrapper.bg8 .sub-wrapper { background-color: #81C784; border: 1px solid #81C784; } .icon-box-03 .icon-wrapper.bg8:hover .sub-wrapper { background-color: #4CAF50; border-color: #fff; } @media (min-width: 768px) { .icon-box-03 { margin: 20px 0 20px; } .icon-box-03 .icon-wrapper.right { float: right; margin-top: 2px; margin-left: 20px; } .icon-box-03 .text-wrapper.right { text-align: right; } .icon-box-03 .icon-wrapper.left { float: left; margin-top: 2px; margin-right: 20px; } .icon-box-03 .text-wrapper.left { text-align: left; } }