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

<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="//code.jquery.com/jquery-1.11.1.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>
/*------------------------------------------------------------------------------------- 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; } .service-single .icon i { font-size: 50px; line-height: 100px; background: linear-gradient(-50deg, #0985f9 0%, #6809dc 100%); background-color: rgba(0, 0, 0, 0); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-color: transparent; } .service-single h4 { font-weight: 600; margin: 0 0 10px; } .service-single .icon img { max-width: 60px; } .service-carousel .service-single { border: 1px solid #e6f0fa; -webkit-box-shadow: 0 0; box-shadow: 0 0; border-right: 0 } .service-carousel .lastActive .service-single { border-right: 1px solid #e6f0fa; } .service-carousel .service-single img { margin: 0 auto; padding: 18px 0 0; } /*------------------------------------------------------------------------------------- blog page ---------------------------------------------------------------------------------------*/ .blog-wrap { padding: 120px 0; } .sidebar { margin-right: 20px; } .blog-single { margin: 0 0 50px; } .blog-pagination { margin: 20px 0 0; } .blog-pagination li { display: inline-block; } .blog-pagination li a { display: block; width: 60px; height: 60px; line-height: 60px; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-radius: 50%; margin: 0 4px; font-weight: 600; font-size: 16px; border: 1px solid #e6f0fa; } .blog-pagination li a:hover, .blog-pagination li a.active { background-color: #092EED; border-color: #092EED; color: #fff; } .blog-area { padding: 110px 0 70px } .post-cont { -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 20px 20px; width: 90%; margin: -30px auto 0; position: relative; background-color: #fff; border-radius: 20px; } .post-cont h6 a { font-size: 14px; padding: 0 12px; color: #6d70a6 } .post-cont h6 small { color: #6d70a6; } .post-cont h6 a i { padding-right: 2px; } .post-cont h3 a { font-weight: 600; margin-bottom: 5px; display: inline-block; } .post-cont h3 a:hover, .post-cont h6 a:hover { color: #092EED } .post-media img { border-radius: 4px; }

Related: See More


Questions / Comments: