Bootstrap Snippet Our Services using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Our Services"
Bootstrap 4.1.1 Snippet by dkstudio

Related: See More

Questions / Comments:

"Our Services" Bootstrap 4.1.1 Snippet by dkstudio

Related: See More

Questions / Comments:

"Our Services"
Bootstrap 4.1.1 Snippet by dkstudio