<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="py-5 service-24">
<div class="container">
<!-- Row -->
<div class="row wrap-service-24">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card rounded card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">R</span>
<h6 class="ser-title">Retargeting Market</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">D</span>
<h6 class="ser-title">Digital Marketing</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">S</span>
<h6 class="ser-title">SEO Techniques</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">C</span>
<h6 class="ser-title">Client Management</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">E</span>
<h6 class="ser-title">Email Campaign</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">W</span>
<h6 class="ser-title">Website Strategy</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">E</span>
<h6 class="ser-title">eCommerce Shop</h6>
</a>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card card-shadow border-0 mb-4">
<a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded">
<span class="bg-success-grediant">C</span>
<h6 class="ser-title">Cloud Hosting</h6>
</a>
</div>
</div>
<div class="col-md-12 mt-3 text-center"> <a class="btn btn-outline-success btn-md"><span>View Details</span></a></div>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-24 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.service-24 h1, .service-24 h2, .service-24 h3, .service-24 h4, .service-24 h5, .service-24 h6 {
color: #3e4555;
}
.service-24 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-24 a {
text-decoration: none;
}
.service-24 .card-hover:hover {
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-24 .card-hover:hover .bg-success-grediant {
color: #ffffff;
text-fill-color: #ffffff;
-webkit-text-fill-color: #ffffff;
}
.service-24 .card-hover:hover .ser-title {
color: #ffffff;
}
.service-24 .bg-success-grediant {
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%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
font-size: 50px;
}
.service-24 .wrap-service-24 .card {
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
.service-24 .wrap-service-24 .card:hover {
-ms-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
}
.service-24 .btn-outline-success {
color: #2cdd9b !important;
background-color: transparent;
border-color: #2cdd9b;
}
.service-24 .btn-outline-success:hover {
background: #2cdd9b;
border-color: #2cdd9b;
color: #ffffff !important;
}
.service-24 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
