<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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/phillymatty/pen/zvpGzX?depth=everything&order=popularity&page=16&q=icon+box&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<style class="cp-pen-styles">.service {
width: 100%;
height: 300px;
margin: 20px 0;
text-align: center;
border: 1px solid #ddd;
-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.service .service-icon-box {
position: relative;
top: 100px;
display: inline-block;
margin-bottom: 20px;
padding: 10px;
background: white;
-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.service .service-heading, .service .sub-heading {
position: relative;
top: 80px;
-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.service .service-description {
width: 100%;
padding: 5px 10%;
margin: 0 auto;
opacity: 0;
-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.service .service-description h5 {
margin-bottom: 10px;
}
.service .service-icon-box > img.service-icon {
width: 100px;
}
.service:hover {
border-color: #00a8ff;
height: 350px;
min-height: 300px;
}
.service:hover.tall {
height: 500px;
}
.service:hover .service-icon-box {
top: -30px;
}
.service:hover .service-heading {
top: -40px;
}
.service:hover .service-description {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
</style></head><body>
<br />
<br />
<div class="row">
<div class="small-6 columns">
<div class="service tall">
<div class="service-icon-box">
<img src="http://static.insidesales.com/assets/icons/product_pillars/svg/predict.svg" alt="" class="service-icon">
</div>
<h4 class="service-heading">Predictive Scoring & Prioritization</h4>
<div class="service-description">
<h5 class="">NeuralView</h5>
<p class="">Prescriptively target sales efforts by likelihood to
contact and close</p>
<a class="" href=""> Learn More ›
</a>
</div>
<div class="service-description">
<h5 class="">Sales Advisor</h5>
<p class="">Know which opportunities will close to focus teams on the areas where they’ll have the most impact.</p>
<a class="" href=""> Learn More ›
</a>
</div>
</div>
</div>
<div class="small-6 columns">
<div class="service ">
<div class="service-icon-box">
<img src="http://static.insidesales.com/assets/icons/product_pillars/svg/communicate.svg" alt="" class="service-icon">
</div>
<h4 class="service-heading">Sales Communications</h4>
<div class="service-description">
<h5 class="">PowerDialer</h5>
<p class="">Power phone communication for sales with single-click dialing and automatic data capture to Salesforce.</p>
<a class="" href=""> Learn More ›
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<div class="service ">
<div class="service-icon-box">
<img src="http://static.insidesales.com/assets/icons/product_pillars/svg/engagement.svg" alt="" class="service-icon">
</div>
<h4 class="service-heading">Email & Web Tracking</h4>
<div class="service-description">
<h5 class="">Vision</h5>
<p class="">Tracks email and website engagement providing real-time alerts to sales reps.</p>
<a class="" href=""> Learn More ›
</a>
</div>
</div>
</div>
<div class="small-6 columns">
<div class="service">
<div class="service-icon-box">
<img src="http://static.insidesales.com/assets/icons/product_pillars/svg/forecast.svg" alt="" class="service-icon">
</div>
<h4 class="service-heading">Predictive Forecasting</h4>
<div class="service-description">
<h5 class="">HD Forecast</h5>
<p class="">Deliver predictive pipelines and a precision forecast with insights and actions that mitigate deal risk.</p>
<a class="" href=""> Learn More ›
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<div class="service">
<div class="service-icon-box">
<img src="http://static.insidesales.com/assets/icons/product_pillars/svg/gamification.svg" alt="" class="service-icon">
</div>
<h4 class="service-heading">Motivation</h4>
<div class="service-description">
<h5 class="">PowerStandings</h5>
<p class="">Motivate sales performance with game mechanics, data intelligence, and broadcasted results.</p>
<a class="" href=""> Learn More ›
</a>
</div>
</div>
</div>
<div class="small-6 columns">
<div class="service">
<div class="service-icon-box">
<img src="http://static.insidesales.com/assets/icons/product_pillars/svg/hiring.svg" alt="" class="service-icon">
</div>
<h4 class="service-heading">Sales Hiring</h4>
<div class="service-description">
<h5 class="">Sales Indicator</h5>
<p class="">A pre-hiring assessment that predicts sales success before you hire.</p>
<a class="" href=""> Learn More ›
</a>
</div>
</div>
</div>
</div>
</body></html>
