"Our Services"
Bootstrap 4.1.1 Snippet by dkstudio

<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; }

Related: See More

Questions / Comments: