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