<div class="py-5 bg-light service-34 wrap-service34-box">
<!-- Row -->
<div class="row ">
<div class="col-lg-6 left-image">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/features/feature34/img1.png" class="img-fluid" alt="wrappixel" />
</div>
<div class="container">
<div class="col-lg-6 ml-auto">
<div class="">
<span class="badge badge-info rounded-pill px-3 py-1 font-weight-light">Service 34</span>
<h3 class="my-3 text-uppercase">Simple Bootstrap service panel</h3>
<p class="op-8">You can relay on our amazing features list and also our customer services will be great experience.</p>
<div class="row mt-3">
<div class="col-md-12">
<div class="card card-shadow border-0 mb-3">
<div class="card-body">
<div class="row p-3">
<div class="col-6 border-right">
<h3 class="mb-0 font-weight-light">6455</h3>
<h6 class="text-muted font-weight-light">PROJECTS</h6>
</div>
<div class="col-6 text-right border-left">
<h3 class="mb-0 font-weight-light">85.5%</h3>
<h6 class="text-muted font-weight-light">Sucess Rate</h6>
</div>
<div class="col-lg-12 mt-3">
<a class="btn btn-success-gradiant btn-md btn-block" href="#f34"><span>View Details</span></a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,500);
.service-34 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.service-34 h1, .service-34 h2, .service-34 h3, .service-34 h4, .service-34 h5, .service-34 h6 {
color: #3e4555;
}
.service-34 .bg-light {
background-color: #f4f8fa !important;
}
.service-34 .text-muted {
color: #8d97ad !important;
}
.service-34 .badge {
line-height: 14px;
}
.service-34 .badge-info {
background: #188ef4;
}
.service-34 .op-8 {
opacity: 0.8;
}
.service-34 .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-34.wrap-service34-box {
overflow: hidden;
position: relative;
}
.service-34.wrap-service34-box .left-image {
position: absolute;
left: -15px;
text-align: left;
top: 0px;
}
.service-34 .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%);
border: 0px;
color: #ffffff;
}
.service-34 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
@media (max-width: 1023px) {
.service-34.wrap-service34-box .left-image {
position: relative;
top: -90px;
}
}