<div class="py-5 service-22">
<div class="container">
<!-- Row -->
<div class="row wrap-service-22">
<!-- Column -->
<div class="col-lg-6">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/features/feature22/img1.jpg" class="rounded img-shadow img-fluid" alt="wrapkit" />
</div>
<!-- Column -->
<div class="col-lg-6 mt-4 mt-md-0">
<div class="text-box"> <small class="text-info font-weight-medium">Make your site in No-Time</small>
<h4 class="font-weight-light mt-2 mb-4">WrapKit helps you to <span class="text-megna">build your project</span> in record time with fun making it.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquis would be good to have.</p>
<a class="btn btn-info-gradiant btn-md text-white border-0" href="#f20"><span>View Details</span></a>
</div>
</div>
<!-- Column -->
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-22 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.service-22 h1, .service-22 h2, .service-22 h3, .service-22 h4, .service-22 h5, .service-22 h6 {
color: #3e4555;
}
.service-22 .font-weight-medium {
font-weight: 500;
}
.service-22 .wrap-service-22 {
margin-top: 60px;
}
.service-22 .wrap-service-22 .text-box {
padding: 0 30px;
}
.service-22 .wrap-service-22 .text-box h3 {
margin: 10px 0 25px 0;
}
.service-22 .text-info {
color: #188ef4 !important;
}
.service-22 .text-megna {
color: #1dc8cd;
}
.service-22 .img-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.3);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.3);
}
.service-22 .btn-info-gradiant {
background: #188ef4;
background: -webkit-linear-gradient(legacy-direction(to right), #188ef4 0%, #316ce8 100%);
background: -webkit-gradient(linear, left top, right top, from(#188ef4), to(#316ce8));
background: -webkit-linear-gradient(left, #188ef4 0%, #316ce8 100%);
background: -o-linear-gradient(left, #188ef4 0%, #316ce8 100%);
background: linear-gradient(to right, #188ef4 0%, #316ce8 100%);
}
.service-22 .btn-info-gradiant:hover {
background: #316ce8;
background: -webkit-linear-gradient(legacy-direction(to right), #316ce8 0%, #188ef4 100%);
background: -webkit-gradient(linear, left top, right top, from(#316ce8), to(#188ef4));
background: -webkit-linear-gradient(left, #316ce8 0%, #188ef4 100%);
background: -o-linear-gradient(left, #316ce8 0%, #188ef4 100%);
background: linear-gradient(to right, #316ce8 0%, #188ef4 100%);
}
.service-22 .btn-md {
padding: 15px 45px;
font-size: 16px;
}