"services"
Bootstrap 3.0.0 Snippet by vivekbisht109

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="icon-wrapper"> <i class="fa fa-puzzle-piece" aria-hidden="true"></i> </div> <div class="content-wrapper"> <p>Pixel Perfect Design</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p> </div> </div> </div> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="icon-wrapper"> <i class="fa fa-arrows" aria-hidden="true"></i> </div> <div class="content-wrapper"> <p>Retina Ready</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p> </div> </div> </div> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="icon-wrapper"> <i class="fa fa-globe" aria-hidden="true"></i> </div> <div class="content-wrapper"> <p>Image Parralax</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p> </div> </div> </div> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="icon-wrapper"> <i class="fa fa-pencil" aria-hidden="true"></i> </div> <div class="content-wrapper"> <p>Ease Customizable</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p> </div> </div> </div> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="icon-wrapper"> <i class="fa fa-sitemap" aria-hidden="true"></i> </div> <div class="content-wrapper"> <p>Seo Optimized</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p> </div> </div> </div> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="icon-wrapper"> <i class="fa fa-phone" aria-hidden="true"></i> </div> <div class="content-wrapper"> <p>24/7 Support</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p> </div> </div> </div> </div>
body { padding: 0; margin: 0; } .container { max-width: 1000px; margin: 48px auto; font-family: "Roboto"; } .container .outer-wrapper { float: left; width: 50%; height: 180px; position: relative; background: #efefef; } .container .outer-wrapper:before { position: absolute; display: block; width: 100%; height: 1px; bottom: 0px; left: 0; background: linear-gradient(90deg, #efefef, #cfcfcf, #efefef); content: ""; z-index: 45; } .container .outer-wrapper:nth-child(odd):after { display: block; position: absolute; width: 2px; height: 90%; background: linear-gradient(#efefef, #cfcfcf, #efefef); top: 50%; transform: translate(-50%, -50%); right: 0; content: ""; z-index: 40; } .container .outer-wrapper:hover:after, .container .outer-wrapper:hover:before { display: none; } .container .outer-wrapper:hover .inner-wrapper { background: linear-gradient(#8eba2f 10%, #44c125 70%); width: 105%; height: 110%; z-index: 50; box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.27); color: #fff; } .container .outer-wrapper .inner-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: #efefef; overflow: hidden; z-index: 40; color: #505050; font-size: 24px; text-align: center; box-shadow: 0px 0px 0px transparent; display: flex; align-items: center; cursor: pointer; } .container .outer-wrapper .inner-wrapper .icon-wrapper { width: 50%; text-align: center; } .container .outer-wrapper .inner-wrapper .icon-wrapper i { font-size: 48px; } .container .outer-wrapper .inner-wrapper .content-wrapper { text-align: left; padding: 5px; } .container .outer-wrapper .inner-wrapper .content-wrapper p { margin: 0; } .container .outer-wrapper .inner-wrapper .content-wrapper p:first-child { font-size: 20px; font-weight: 700; margin-bottom: 5px; } .container .outer-wrapper .inner-wrapper .content-wrapper p:last-child { font-size: 16px; font-style: italic; }

Related: See More


Questions / Comments: