Bootstrap Snippet Service box with box shadow using HTML CSS Bootstrap

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
<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="container">
    <div class="row">
        
        <div class="col-lg-4 col-md-6">
            <div class="service-single">
                <div class="icon">
                    <img src="assets/images/icon-1.png" class="img-fluid" alt="">
                </div>
                <h4>Shared Hosting</h4>
                <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
            </div>
        </div>
        
         <!--start blog single-->
                <div class="col-md-4">
                    <div class="blog-single">
                        <div class="post-media">
                            <a href=""><img src="https://www.karosearch.com/images/categories/cabs-taxi-rentals.jpg" class="img-fluid" alt=""></a>
                        </div>
                        <div class="post-cont text-center">
                            <h6><a href=""><i class="icofont-user"></i> Admin</a><small>|</small><a href=""><i class="icofont-ui-calendar"></i> 25 Mar, 2019</a></h6>
                            <h3><a href="">How to setup dedicated hosting</a></h3>
                            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
                        </div>
                    </div>
                </div>
                <!--end blog single-->
    </div>
</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
/*-------------------------------------------------------------------------------------
    service area
---------------------------------------------------------------------------------------*/
.section-heading {
    margin: 0 0 60px;
}
.section-heading h2 {
    font-weight: 600;
}
.service-area {
    padding: 110px 0 90px;
}
.service-area.two {
    padding: 110px 0 160px;
}
.service-single {
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    padding: 30px 40px 15px;
    margin: 0 0 30px;
    background-color: #fff
}
.service-single .icon {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: rgba(229, 240, 255, 0.5);
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    text-align: center;
    margin: 0 0 25px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Service box with box shadow"
Bootstrap 4.1.1 Snippet by dkstudio

Related: See More

Questions / Comments:

"Service box with box shadow" Bootstrap 4.1.1 Snippet by dkstudio

Related: See More

Questions / Comments:

"Service box with box shadow"
Bootstrap 4.1.1 Snippet by dkstudio