<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <section id="service"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section_title text-center"> <h2>Our Services</h2> <div class="brand_border"> <i class="fa fa-minus" aria-hidden="true"></i> <i class="fas fa-handshake"></i> <i class="fa fa-minus" aria-hidden="true"></i> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <br>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p> </div> </div> </div> <div class="row"> <!--START SINGLE SERVICE AREA--> <div class="col-md-6 col-lg-4 col-sm-12"> <div class="single_service hvr-curl-top-right"> <div class="single_service-left"> <div class="icon"> <i class="fa fa-laptop"></i> </div> </div> <div class="single_service-body"> <h4 class="single_service-heading">web Design</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p> </div> </div> </div><!--/END SINGLE SERVICE AREA--> <!--START SINGLE SERVICE AREA--> <div class="col-md-6 col-lg-4 col-sm-12"> <div class="single_service hvr-curl-top-right"> <div class="single_service-left"> <div class="icon"> <i class="fas fa-quidditch"></i> </div> </div> <div class="single_service-body"> <h4 class="single_service-heading">Logo Design</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p> </div> </div> </div><!--/END SINGLE SERVICE AREA--> <!--START SINGLE SERVICE AREA--> <div class="col-md-6 col-lg-4 col-sm-12"> <div class="single_service hvr-curl-top-right"> <div class="single_service-left"> <div class="icon"> <i class="fas fa-newspaper"></i> </div> </div> <div class="single_service-body"> <h4 class="single_service-heading">Ui & Ux Design</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p> </div> </div> </div><!--/END SINGLE SERVICE AREA--> <!--START SINGLE SERVICE AREA--> <div class="col-md-6 col-lg-4 col-sm-12"> <div class="single_service hvr-curl-top-right"> <div class="single_service-left"> <div class="icon"> <i class="fas fa-smile"></i> </div> </div> <div class="single_service-body"> <h4 class="single_service-heading">Branding</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p> </div> </div> </div><!--/END SINGLE SERVICE AREA--> <!--START SINGLE SERVICE AREA--> <div class="col-md-6 col-lg-4 col-sm-12"> <div class="single_service hvr-curl-top-right"> <div class="single_service-left"> <div class="icon"> <i class="fa fa-crop"></i> </div> </div> <div class="single_service-body"> <h4 class="single_service-heading">Devlopment</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p> </div> </div> </div><!--/END SINGLE SERVICE AREA--> <!--START SINGLE SERVICE AREA--> <div class="col-md-6 col-lg-4 col-sm-12"> <div class="single_service hvr-curl-top-right"> <div class="single_service-left"> <div class="icon"> <i class="fa fa-cogs"></i> </div> </div> <div class="single_service-body"> <h4 class="single_service-heading">Security System</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p> </div> </div> </div><!--/END SINGLE SERVICE AREA--> </div> </div> </section><!--/END SERVICE AREA-->

section { padding: 60px 0; min-height: 100vh; } a, a:hover, a:focus, a:active { text-decoration: none; outline: none; } a, a:active, a:focus { color: #6f6f6f; text-decoration: none; transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -ms-transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; } .section_title { margin-bottom: 40px; } .section_title h2 { color: #333333; font-size: 25px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; } .brand_border .fa.fa-minus { color: #fff; font-size: 8px; height: 2px; background: #F8C01B none repeat scroll 0 0; width: 100px; } .brand_border .fas.fa-handshake { font-size: 14px; color:#000000; } .section_title p { color: #333333; font-size: 14px; line-height: 25px; padding: 14px 0; } .choose_us .section_title { margin-top: 45px; } #service .single_service { padding: 32px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 50px; } #service .single_service:hover{ box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4); } #service .icon { border: 1px solid #666; border-radius: 5%; color: #333333; font-size: 35px; line-height: 65px; overflow: hidden; text-align: center; text-decoration: none; width: 70px; } #service .single_service .single_service-left { padding-right: 25px; } .single_service-heading { font-size: 15px; font-weight: 700; text-transform: uppercase; color: #000; } .single_service-body p { font-size: 13px; line-height: 25px; } .single_service-left { display: table-cell; vertical-align: top; } .single_service-body { color: #333333; display: table-cell; vertical-align: top; } .hvr-curl-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; } #service .single_service:hover { background: #F8C01B none repeat scroll 0 0; }