<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="main-box"> <div class="contentx"> <div class="waves"> <div class="wave2"></div> <div class="wave2"></div> <div class="wave2"></div> <div class="wave2"></div> </div> <!-- SERVICE SECTION --> <section id="service" class="parallax-section"> <div class="container"> <!--========================== Call To Action Section ============================--> <div class="row"> <div class="wow fadeInUp section-title" data-wow-delay="0.2s"> <!-- SECTION TITLE --> </div> <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s"> <div class="service-thumb"> <i class="fa fa-smile-o"></i> <h4>Graphic Design</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing morbi venenatis.</p> </div> </div> <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s"> <div class="service-thumb bg-grey"> <i class="fa fa-camera"></i> <h4 class="white-color">Photography</h4> <p>Duis sed arcu sed nunc maximus tempor. Maecenas et enim laoreet, pharetra risus vel.</p> </div> </div> <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.6s"> <div class="service-thumb"> <i class="fa fa-lightbulb-o"></i> <h4>UI/UX design</h4> <p>Sed tristique, nunc sit amet pellentesque pharetra, sapien urna.</p> </div> </div> <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.8s"> <div class="service-thumb"> <i class="fa fa-clone"></i> <h4>illustration</h4> <p>Cras ut urna quis nisi luctus molestie tincidunt sed ipsum. Donec gravida laoreet erat.</p> </div> </div> </div> </div> </section> </div> </div>

/*--------------------------------------- testimonial-cards -----------------------------------------*/ /* Call To Action Section --------------------------------*/ #call-to-action { background: #8f93a524; background-size: cover; padding: 28px 0; } #call-to-action .cta-title { color: #fff; font-size: 28px; font-weight: 700; } #call-to-action .cta-text { color: #fff; } @media (min-width: 769px) { #call-to-action .cta-btn-container { display: flex; align-items: center; justify-content: flex-end; } } #call-to-action .cta-btn { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 26px; border-radius: 3px; transition: 0.5s; margin: 10px; border: 3px solid #fff; color: #fff; } #call-to-action .cta-btn:hover { background: #50d8af; border: 3px solid #50d8af; } /*--------------------------------------- Service section -----------------------------------------*/ .service-thumb { background: #673ab7e0; border-radius: 5px; padding: 42px 22px; cursor: crosshair; position: relative; top: 0; -webkit-transition: all ease-in-out 0.4s; transition: all ease-in-out 0.4s; border: 1px #009688 solid; } .service-thumb:hover { background: #2b2b2b; top: -5px; } .service-thumb:hover .fa, .service-thumb:hover h4 { color: #ffffff; } .service-thumb h4 { padding-bottom: 5px; } .service-thumb .fa { color: #7682cc; font-size: 62px; text-align: center; margin-top: 32px; margin-bottom: 22px; } .bg-grey .fa { color: #ffffff; }