<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="block bg-lighter full-block bottom-null ">
<div class="container">
<h1 class="text-center">Our Services <span class="color">In</span></h1>
<p class="info text-center">Our Services</p>
<div class="hexagon-box-wrapper">
<div class="hexagon-box">
<div class="hexagon-icon"><i class="icon-computer-with-monitor"></i>
<div class="h-box">
<div class="h-box-title">PC Repair</div>
<div class="h-box-text">Problem PC? We’ll solve it. We’re who you call when your desktop runs slow and your programs stop working. </div>
</div>
</div>
<div class="hexagon-icon"><i class="icon-apple"></i>
<div class="h-box">
<div class="h-box-title">Mac Repair</div>
<div class="h-box-text">Our Mac repair service offers high-quality repairs and advice: without the premium price.</div>
</div>
</div>
<div class="hexagon-icon"><i class="icon-updated-security-for-protection-on-internet"></i>
<div class="h-box">
<div class="h-box-title">Data Backup & Recovery</div>
<div class="h-box-text">We can help you back up your important personal data (photos, videos, documents, school work, etc.) to disk and cloud with no hassles.</div>
</div>
</div>
<div class="hexagon-icon visible-xs">
<img src="images/h-bg.png" alt="">
</div>
<div class="hexagon-icon"><i class="icon-data-network"></i>
<div class="h-box">
<div class="h-box-title">Network / Servers</div>
<div class="h-box-text">Our technicians can set up a secure wireless network in your home that will allow you to share everything between as many computers</div>
</div>
</div>
<div class="hexagon-icon"><i class="icon-viruses"></i>
<div class="h-box">
<div class="h-box-title">Malware and Virus Removal
</div>
<div class="h-box-text">Through years of experience we can remove the infestation without destroying your data. </div>
</div>
</div>
<div class="hexagon-icon"><i class="icon-notebook-and-mouse-cursor"></i>
<div class="h-box">
<div class="h-box-title">Laptop Repair </div>
<div class="h-box-text">Laptop gone down? Don’t worry! Our qualified, friendly laptop repair technicians will bring it back to life. </div>
</div>
</div>
</div>
</div>
</div>
</div>
@media (min-width: 768px) {
.hexagon-box-wrapper {
position: relative;
margin: 0 auto;
padding: 265px 0;
width: 470px;
background: url(../images/h-bg.png) no-repeat center center;
background-size: 100% auto;
}
.hexagon-box {
position: relative;
width: 470px;
height: 223px;
background-color: transparent;
border-left: solid 2px #9455d0;
border-right: solid 2px #9455d0;
}
.hexagon-box:before,
.hexagon-box:after {
content: "";
position: absolute;
z-index: 1;
width: 332px;
height: 332px;
-webkit-transform: scaleY(0.5) rotate(-45deg);
-ms-transform: scaleY(0.5) rotate(-45deg);
transform: scaleY(0.5) rotate(-45deg);
background-color: inherit;
left: 67px;
}
.hexagon-box:before {
top: -172px;
border-top: solid 2px #9455d0;
border-right: solid 2px #9455d0;
}
.hexagon-box:after {
bottom: -172px;
border-bottom: solid 2px #9455d0;
border-left: solid 2px #9455d0;
}
.hexagon-box span {
width: 100%;
text-align: center;
top: 50%;
position: relative;
float: left;
margin-top: -9px;
}
}
.hexagon-icon {
position: absolute;
z-index: 2;
}
.hexagon-icon i {
display: block;
width: 91px;
height: 91px;
border: 4px solid #9455d0;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 25px #f8f9fa;
font-size: 40px;
line-height: 87px;
color: #444;
text-align: center;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s;
}
body.layout-2 .hexagon-icon i {
border-width: 3px;
-webkit-transition: 0s;
-moz-transition: 0s;
transition: 0s;
}
@media (min-width: 768px) {
body.layout-2 .hexagon-icon:hover i {
background: #9455d0;
background: -moz-linear-gradient(-45deg, #ba4ecf 0%, #6782c9 100%);
background: -webkit-linear-gradient(-45deg, #ba4ecf 0%, #6782c9 100%);
background: linear-gradient(135deg, #ba4ecf 0%, #6782c9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@custom-color-gradient-start', endColorstr='@custom-color-gradient-end', GradientType=1);
color: #fff;
}
}
.hexagon-icon:nth-child(1) {
top: 0;
left: 50%;
margin-left: -46px;
margin-top: -158px;
}
.hexagon-icon:nth-child(1) .h-box {
width: 370px;
text-align: center;
bottom: 105px;
left: 50%;
margin-left: -185px;
}
.hexagon-icon:nth-child(2) {
top: 0;
left: 100%;
margin-left: -46px;
margin-top: -46px;
}
.hexagon-icon:nth-child(2) .h-box {
width: 235px;
text-align: left;
top: 0;
left: 100%;
margin: -6px 0 0 15px;
}
.hexagon-icon:nth-child(3) {
bottom: 0;
left: 100%;
margin-left: -46px;
margin-bottom: -46px;
}
.hexagon-icon:nth-child(3) .h-box {
width: 235px;
text-align: left;
top: 0;
left: 100%;
margin: -6px 0 0 15px;
}
.hexagon-icon:nth-child(5) {
bottom: 0;
left: 50%;
margin-left: -46px;
margin-bottom: -160px;
}
.hexagon-icon:nth-child(5) .h-box {
width: 370px;
text-align: center;
bottom: 0;
left: 50%;
margin-left: -185px;
margin-bottom: -120px;
}
.hexagon-icon:nth-child(6) {
bottom: 0;
left: 0;
margin-left: -46px;
margin-bottom: -46px;
}
.hexagon-icon:nth-child(6) .h-box {
width: 235px;
text-align: right;
top: 0;
right: 100%;
margin: -6px 15px 0 0;
}
.hexagon-icon:nth-child(7) {
top: 0;
left: 0;
margin-left: -46px;
margin-top: -46px;
}
.hexagon-icon:nth-child(7) .h-box {
width: 235px;
text-align: right;
top: 0;
right: 100%;
margin: -6px 15px 0 0;
}
.h-box {
font-size: 14px;
line-height: 22px;
position: absolute;
color: #2a2a2a !important;
}
.h-box-title {
margin-bottom: 5px;
font-size: 22px;
line-height: 26px;
font-family: 'Chivo', sans-serif;
}
@media (max-width: 1199px) {
.hexagon-icon:nth-child(2) .h-box,
.hexagon-icon:nth-child(3) .h-box,
.hexagon-icon:nth-child(6) .h-box,
.hexagon-icon:nth-child(7) .h-box {
width: 180px;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.hexagon-box,
.hexagon-box-wrapper {
width: 320px;
}
.hexagon-box:before,
.hexagon-box:after {
width: 200px;
height: 200px;
left: 60px;
}
.hexagon-box:before {
top: -160px;
}
.hexagon-box:after {
bottom: -160px;
}
.h-box {
font-size: 13px;
}
.hexagon-icon:nth-child(2) .h-box,
.hexagon-icon:nth-child(3) .h-box,
.hexagon-icon:nth-child(6) .h-box,
.hexagon-icon:nth-child(7) .h-box {
width: 150px;
}
}
@media (max-width: 767px) {
.hexagon-icon {
width: 100%;
position: relative;
margin: 0 0 55px !important;
text-align: center;
left: inherit !important;
right: inherit !important;
top: inherit !important;
bottom: inherit !important;
}
.hexagon-icon i {
display: inline-block;
box-shadow: none;
margin-bottom: 15px;
}
.hexagon-icon:after {
position: absolute;
content: '';
height: 35px;
width: 2px;
background-color: #9455d0;
left: 50%;
bottom: -45px;
}
.hexagon-icon:last-child:after {
display: none;
}
.hexagon-icon > img {
display: block;
margin: 5px auto;
max-width: 300px;
}
.h-box {
position: relative;
left: inherit !important;
right: inherit !important;
top: inherit !important;
bottom: inherit !important;
margin: 0 auto 0 !important;
text-align: center !important;
width: 100% !important;
max-width: 320px;
}
}
.column-filters {
margin-bottom: 35px;
}
