<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 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/iframeov/pen/BNbmaB?depth=everything&order=popularity&page=6&q=statistics&show_forks=false" />
<style class="cp-pen-styles">ol, ul {
list-style: none;
}
body {
font-family: "Open Sans", sans-serif;
}
ul.about-icons {
width: 70%;
display: flex;
margin: 110px auto 140px;
align-items: center;
justify-content: space-around;
position: relative;
}
ul.about-icons li {
display: inline-block;
box-sizing: border-box;
width: 25%;
height: 150px;
text-align: center;
position: relative;
}
ul.about-icons li p {
line-height: 1.5;
}
ul.about-icons li span {
display: inline-block;
height: 105px;
position: relative;
min-width: 107px;
border: 1px solid #6DBD63;
border-radius: 50%;
margin-bottom: 20px;
}
ul.about-icons li span svg {
position: absolute;
padding: 25px;
left: 1px;
top: 1px;
right: 0%;
transition: all 0.2s;
margin-bottom: 25px;
}
ul.about-icons li span:before {
transition: all 0.2s;
position: absolute;
top: 0;
margin-top: 0%;
left: 0;
margin-left: 0%;
content: "";
border-radius: 50%;
width: 100%;
height: 100%;
border: 3px rgba(109, 189, 99, 0) solid;
}
ul.about-icons li span:hover {
background-color: #6DBD63;
}
ul.about-icons li span:hover svg {
transform: scale(1.2);
width: 55px;
}
ul.about-icons li span:hover svg path, ul.about-icons li span:hover svg rect, ul.about-icons li span:hover svg polygon {
fill: #fff;
}
ul.about-icons li span:hover:before {
border: 5px rgba(109, 189, 99, 0.3) solid;
width: 120%;
height: 120%;
margin: -15% 0 0 -15%;
}
</style></head><body>
<div class="wrapper">
<ul class="about-icons">
<li class="skilled-team">
<span><svg version="1.1" id="person" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="53px" height="53px" viewBox="0 0 53 53" enable-background="new 0 0 49.448 53.353" xml:space="preserve">
<path fill="#6DBE64" d="M44.06,40.355l-12.463-4.452v-6.818c3.645-2.819,6.064-7.705,6.064-13.26c0-8.717-5.946-15.81-13.257-15.81
c-7.31,0-13.256,7.092-13.256,15.81c0,5.873,2.705,10.997,6.702,13.723v6.355L5.387,40.355c-3.235,1.159-5.408,4.244-5.408,7.678
v4.813c0,0.271,0.219,0.49,0.491,0.49h48.51c0.271,0,0.49-0.22,0.49-0.49v-4.813C49.469,44.601,47.295,41.515,44.06,40.355z
M24.405,0.997c6.25,0,11.413,5.675,12.17,12.981c-0.007,0-0.014,0.001-0.021,0.002c-0.24,0.016-0.472,0.032-0.753,0.087
c-4.057,0.779-6.667-0.577-9.016-4.689c-0.088-0.155-0.219-0.23-0.435-0.247c-0.179,0.003-0.343,0.104-0.426,0.263
c-1.296,2.485-5.585,4.664-9.179,4.664c-1.613,0-3.019-0.326-4.396-0.988C13.423,6.208,18.416,0.997,24.405,0.997z M12.129,15.825
c0-0.589,0.036-1.167,0.092-1.738c1.419,0.633,2.873,0.952,4.524,0.952c3.638,0,7.796-1.987,9.604-4.478
c2.013,3.213,4.322,4.698,7.401,4.698c0.703,0,1.448-0.078,2.237-0.229c0.236-0.047,0.428-0.058,0.629-0.071
c0.008,0,0.019-0.002,0.026-0.002c0.015,0.289,0.036,0.575,0.036,0.869c0,8.176-5.507,14.827-12.275,14.827
S12.129,24.001,12.129,15.825z M48.488,52.356H0.959v-4.323c0-3.021,1.912-5.734,4.757-6.754l12.789-4.568
c0.196-0.069,0.326-0.255,0.326-0.462v-6.101c1.697,0.943,3.581,1.485,5.573,1.485c2.244,0,4.356-0.674,6.211-1.852v6.467
c0,0.207,0.131,0.393,0.326,0.462l12.788,4.568c2.846,1.021,4.758,3.734,4.758,6.754V52.356z"/>
</svg></span>
<p>
Highly Skilled <br/> Team
</p>
</li>
<li class="microsoft-partner">
<span>
<svg version="1.1" id="stamp" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="53px" height="53px" viewBox="0 0 53.354 53.353" enable-background="new 0 0 53.354 53.353" xml:space="preserve">
<g>
<g>
<path fill="#6DBE64" d="M50.553,53.353H2.803c-0.292,0-0.527-0.236-0.527-0.527v-4.55H3.33v4.023h46.696v-4.023h1.054v4.55
C51.079,53.116,50.844,53.353,50.553,53.353z"/>
</g>
<g>
<path fill="#6DBE64" d="M52.828,48.803H0.527C0.236,48.803,0,48.566,0,48.275v-6.894c0-2.801,2.277-5.077,5.075-5.077h11.209
c8.11-5.501,4.377-13.713,1.647-19.718c-1.081-2.378-2.014-4.431-2.014-5.903C15.917,3.343,21.494,0,26.674,0
c5.183,0,10.763,3.343,10.763,10.684c0,1.464-0.93,3.514-2.005,5.887c-2.726,6.017-6.456,14.243,1.638,19.734h11.211
c2.797,0,5.073,2.276,5.073,5.077v6.894C53.354,48.566,53.119,48.803,52.828,48.803z M1.054,47.748h51.247v-6.366
c0-2.219-1.804-4.023-4.02-4.023H36.909c-0.104,0-0.205-0.031-0.291-0.089c-9.011-5.985-4.88-15.102-2.146-21.134
c1.024-2.262,1.91-4.215,1.91-5.452c0-6.616-5.033-9.63-9.708-9.63c-4.673,0-9.703,3.014-9.703,9.63c0,1.243,0.89,3.2,1.919,5.466
c2.737,6.022,6.874,15.123-2.155,21.12c-0.086,0.058-0.188,0.089-0.292,0.089H5.075c-2.217,0-4.021,1.805-4.021,4.023V47.748z"/>
</g>
</g>
</svg>
</span>
<p>
Microsoft Certified <br/> Partner
</p>
</li>
<li class="years-experience">
<span>
<svg version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="53px" height="53px" viewBox="0 0 53.354 53.353" enable-background="new 0 0 53.354 53.353" xml:space="preserve">
<g>
<path fill="#6DBE64" d="M43.732,53.397H9.623C4.317,53.397,0,49.081,0,43.775V9.665c0-5.306,4.317-9.623,9.623-9.623h34.109
c5.306,0,9.622,4.317,9.622,9.623v34.11C53.354,49.081,49.038,53.397,43.732,53.397z M9.623,1.098
c-4.725,0-8.567,3.843-8.567,8.567v34.11c0,4.723,3.843,8.567,8.567,8.567h34.109c4.723,0,8.567-3.845,8.567-8.567V9.665
c0-4.724-3.845-8.567-8.567-8.567H9.623z"/>
<path fill="#6DBE64" d="M26.678,46.575c-10.948,0-19.856-8.907-19.856-19.855c0-10.949,8.908-19.856,19.856-19.856
c10.949,0,19.855,8.907,19.855,19.856C46.533,37.668,37.627,46.575,26.678,46.575z M26.678,7.919c-10.367,0-18.8,8.433-18.8,18.8
c0,10.366,8.433,18.801,18.8,18.801c10.366,0,18.801-8.435,18.801-18.801C45.479,16.353,37.044,7.919,26.678,7.919z"/>
<path fill="#6DBE64" d="M33.499,28.384h-7.958c-0.292,0-0.527-0.236-0.527-0.527V15.35h1.055v11.979h7.43V28.384z"/>
</g>
</svg>
</span>
<p>
15 Years of <br/> Experience
</p>
</li>
<li class="sophistication">
<span>
<svg version="1.1" id="smile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="53px" height="53px" viewBox="0 0 53.354 53.353" enable-background="new 0 0 53.354 53.353" xml:space="preserve">
<path fill="#6DBE64" d="M26.677,53.354c-14.709,0-26.676-11.967-26.676-26.677C0.001,11.967,11.967,0,26.677,0
c14.709,0,26.677,11.967,26.677,26.677C53.354,41.387,41.386,53.354,26.677,53.354z M26.677,1.055
c-14.127,0-25.621,11.494-25.621,25.622c0,14.129,11.494,25.621,25.621,25.621c14.126,0,25.62-11.492,25.62-25.621
C52.297,12.549,40.803,1.055,26.677,1.055z"/>
<path fill="#6DBE64" d="M26.677,46.532c-9.694,0-17.581-7.888-17.581-17.582h1.055c0,9.113,7.414,16.526,16.525,16.526
c9.111,0,16.528-7.413,16.528-16.526h1.053C44.258,38.645,36.371,46.532,26.677,46.532z"/>
<path fill="#6DBE64" d="M21.521,22.129h-1.056c0-2.217-1.803-4.02-4.02-4.02c-2.216,0-4.02,1.802-4.02,4.02h-1.055
c0-2.798,2.277-5.075,5.075-5.075C19.244,17.055,21.521,19.332,21.521,22.129z"/>
<path fill="#6DBE64" d="M41.983,22.129H40.93c0-2.217-1.804-4.02-4.02-4.02c-2.217,0-4.021,1.802-4.021,4.02h-1.054
c0-2.798,2.276-5.075,5.075-5.075C39.707,17.055,41.983,19.332,41.983,22.129z"/>
</svg>
</span>
<p>
Sophistication with <br/> a Smile
</p>
</li>
</ul>
<div class="clear"></div>
</div>
</body></html>
