<div class="bg-light py-5 service-20">
<div class="container">
<!-- Row -->
<div class="row wrap-service-20">
<!-- Column -->
<div class="col-lg-6">
<div class="card border-0 mb-4">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body d-flex">
<div class="mr-3"><img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/features/feature13/img1.jpg" width="70" class="rounded" /></div>
<div>
<h6 class="font-weight-medium">Make your website in no-time with us.</h6></div>
</div>
</div>
<div class="col-md-4 text-center">
<a href="javascript:void(0)" class="text-white linking bg-success-gradiant rounded-right rounded-bottom">Lets Talk</a>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-6">
<div class="card border-0 mb-4">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body d-flex">
<div class="mr-3"><img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/features/feature13/img2.jpg" width="70" class="rounded" /></div>
<div>
<h6 class="font-weight-medium">Make your website in no-time with us.</h6></div>
</div>
</div>
<div class="col-md-4 text-center">
<a href="javascript:void(0)" class="text-white linking bg-success-gradiant rounded-right">Lets Talk</a>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-6">
<div class="card border-0 mb-4">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body d-flex">
<div class="mr-3"><img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/features/feature13/img3.jpg" width="70" class="rounded" /></div>
<div>
<h6 class="font-weight-medium">Make your website in no-time with us.</h6></div>
</div>
</div>
<div class="col-md-4 text-center">
<a href="javascript:void(0)" class="text-white linking bg-success-gradiant rounded-right">Lets Talk</a>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-6">
<div class="card border-0 mb-4">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body d-flex">
<div class="mr-3"><img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/features/feature13/img4.jpg" width="70" class="rounded" /></div>
<div>
<h6 class="font-weight-medium">Make your website in no-time with us.</h6></div>
</div>
</div>
<div class="col-md-4 text-center">
<a href="javascript:void(0)" class="text-white linking bg-success-gradiant rounded-right">Lets Talk</a>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-4 text-center">
<a class="btn btn-success-gradiant btn-md text-white" href="#f20"><span>View Details</span></a>
</div>
</div>
<!-- Row -->
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-20 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.service-20 h1, .service-20 h2, .service-20 h3, .service-20 h4, .service-20 h5, .service-20 h6 {
color: #3e4555;
}
.service-20 h6 {
line-height: 22px;
font-size: 18px;
}
.service-20 .font-weight-medium {
font-weight: 500;
}
.service-20 .bg-light {
background-color: #f4f8fa !important;
}
.service-20 .wrap-service-20 .linking {
width: 100%;
display: block;
padding: 35px 0;
}
.service-20 .bg-success-gradiant {
background: #2cdd9b;
background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}
.service-20 a{
text-decoration: none;
}
@media (max-width: 767px) {
.rounded-right {
border-top-right-radius: 0!important;
}
}
@media (min-width: 767px) {
.rounded-bottom {
border-bottom-left-radius: 0!important;
}
}
.service-20 .btn-success-gradiant {
background: #2cdd9b;
background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}
.service-20 .btn-success-gradiant:hover {
background: #1dc8cc;
background: -webkit-linear-gradient(legacy-direction(to right), #1dc8cc 0%, #2cdd9b 100%);
background: -webkit-gradient(linear, left top, right top, from(#1dc8cc), to(#2cdd9b));
background: -webkit-linear-gradient(left, #1dc8cc 0%, #2cdd9b 100%);
background: -o-linear-gradient(left, #1dc8cc 0%, #2cdd9b 100%);
background: linear-gradient(to right, #1dc8cc 0%, #2cdd9b 100%);
}
.service-20 .btn-md {
padding: 15px 45px;
font-size: 16px;
}