"Awesome Service Box"
Bootstrap 4.1.1 Snippet by nahian91

<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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- Header Area Start --> <header> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Service Section using Bootstrap!</h2> <ul> <li>9 Colors</li> <li>10 Unique Design</li> <li>Mobile Friendly</li> </ul> </div> </div> </div> </header> <!-- Header Area End --> <!-- Section Style 1 Start --> <section class="style-1 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 1</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 1 End --> <!-- Section Style 2 Start --> <section class="style-2 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 2</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 2 End --> <!-- Section Style 3 Start --> <section class="style-3 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 3</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 3 End --> <!-- Section Style 4 Start --> <section class="style-4 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 4</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 4 End --> <!-- Section Style 5 Start --> <section class="style-5 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 5</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 5 End --> <!-- Section Style 6 Start --> <section class="style-6 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 6</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 6 End --> <!-- Section Style 7 Start --> <section class="style-7 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 7</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-globe"></i> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-code"></i> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-crop"></i> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-star"></i> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-lightbulb-o"></i> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <i class="fa fa-heart"></i> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 7 End --> <!-- Section Style 8 Start --> <section class="style-8 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 8</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <div class="box-icon"> <i class="fa fa-globe"></i> </div> <div class="box-content"> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="single-service"> <div class="box-icon"> <i class="fa fa-code"></i> </div> <div class="box-content"> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="single-service"> <div class="box-icon"> <i class="fa fa-crop"></i> </div> <div class="box-content"> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <div class="box-icon"> <i class="fa fa-star"></i> </div> <div class="box-content"> <h3>Branding</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="single-service"> <div class="box-icon"> <i class="fa fa-lightbulb-o"></i> </div> <div class="box-content"> <h3>User Friendly</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="single-service"> <div class="box-icon"> <i class="fa fa-heart"></i> </div> <div class="box-content"> <h3>24/7 Support</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </div> </section> <!-- Section Style 8 End --> <!-- Section Style 9 Start --> <section class="style-9 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 9</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <img src="img/service1.jpg" alt="" /> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <img src="img/service2.jpg" alt="" /> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <img src="img/service3.jpg" alt="" /> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 9 End --> <!-- Section Style 10 Start --> <section class="style-10 section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Service Style 10</h2> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="single-service"> <img src="img/service1.jpg" alt="" /> <h3>Web Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <img src="img/service2.jpg" alt="" /> <h3>Web Development</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> <div class="col-md-4"> <div class="single-service"> <img src="img/service3.jpg" alt="" /> <h3>Graphic Design</h3> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="" class="border-btn">Read More</a> </div> </div> </div> </div> </section> <!-- Section Style 10 End -->
/* Template Name: Bootstrap Service Section Author: Abdullah Nahian Author URI: Version: 1.0 ====/======== ===== ==/====/ CSS Index ====/======== =======/====/ 01. Common Css 02. Section Title CSS 03. Header Area CSS 04. Slider Area CSS 05. About Area CSS 06. Service Area CSS 07. Skill Area CSS 08. Advertisement Area CSS 09. Portfolio Area CSS 10. Team Area CSS 11. Counter Up Area CSS 12. Price Area CSS 13. Testimonial Area CSS 14. Blog Area CSS 15. Contact Area CSS 16. Footer Area CSS */ /* * ---------------------------------------------------- * 01. Reset CSS * ---------------------------------------------------- */ @import url('http://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900'); body, html{ height:100% } .alignleft { float: left; margin-right: 15px; } .alignright { float: right; margin-left: 15px; } .aligncenter { display: block; margin: 0 auto 15px; } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; color: #373737; font-weight: 400; line-height: 1.3 } p{ color:#373737 } body { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000; line-height: 1.8 } a:hover { text-decoration: none; } a:focus, input:focus, textarea:focus, button:focus { outline: 0 solid; text-decoration: none; } /* Common Css */ header { text-align: center; background-image: url('../img/service-bannar.jpg'); background-size: cover; background-position: center; position: relative; z-index: 1; color: #fff; padding: 80px 0; } header:before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #333; z-index: -1; opacity: .7; } header h2 { color: #fff; font-size: 45px; } header ul { list-style: none; margin: 0; padding: 0; } header li { display: inline-block; background-color: #0bbbc1; padding: 10px 25px; font-size: 20px; margin: 20px 10px; border-radius: 3px; } .single-service { margin-bottom: 60px; } .section-padding { padding: 80px 0; } a.border-btn { color: #fff; background-color: #0bbbc1; display: inline-block; padding: 10px 30px; border-radius: 3px; margin-top: 20px; font-weight: 500; -webkit-transition:.4s; transition: .4s; position:relative; overflow:hidden; z-index:10 } a.border-btn:before { position: absolute; content: ""; width: 100%; height: 100%; background-color: #333; left: 0; top: -100%; border-radius: 3px; -webkit-transition:.4s; transition: .4s; visibility: hidden; z-index:-1 } a.border-btn:hover:before { visibility:visible; top: 0; } .single-service h3 { font-weight: 600; font-size: 20px; } .single-service p { font-weight: 300; color: #333; font-size: 14px; } /* Section Title Css */ .section-title { text-align: center; margin: 80px 0; } .section-title h2 { position: relative; display: inline-block; padding-bottom: 25px; } .section-title h2:before { position: absolute; content: ""; width: 80px; height: 3px; background-color: #0bbbc1; bottom: 0; left: 50%; margin-left: -40px; } .section-title h2:after { position: absolute; content: ""; width: 60px; height: 3px; background-color: #0bbbc1; left: 50%; bottom: -10px; margin-left: -30px; } /* Service Style 1 Css */ .style-1 .single-service { text-align: center; padding: 25px 40px; box-shadow: 0 5px 30px -5px #ccc; padding-bottom:20px } .style-1 .single-service i.fa { color: #0bbbc1; font-size: 40px; margin: 20px 0; } /* Service Style 2 Css */ .style-2 .single-service { box-shadow: 0 5px 30px -5px #ccc; padding: 25px 40px; } .style-2 .single-service i.fa:after { position: absolute; content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #0bbbc1; border-bottom: 10px solid transparent; bottom: -18px; left: 50%; margin-left: -10px; } .style-2 .single-service i.fa { font-size: 30px; color: #fff; background-color: #0bbbc1; width: 50px; height: 50px; text-align: center; line-height: 50px; position: relative; margin-bottom: 25px; position:relative } /* Service Style 3 Css */ .style-3 .single-service { text-align: center; border: 1px solid #ddd; padding: 25px 40px; -webkit-transition:.4s; transition: .4s; } .style-3 .single-service i.fa { width: 60px; height: 60px; font-size: 30px; line-height: 60px; border: 1px solid #0bbbc1; margin-bottom: 30px; border-radius: 50%; color: #0bbbc1; -webkit-transition:.4s; transition: .4s; } .style-3 .single-service:hover i.fa { background-color: #0bbbc1; color: #fff; border-color: #0bbbc1; } .style-3 .single-service:hover { box-shadow: -3px 3px 3px 0px #ddd; } /* Service Style 4 Css */ .style-4 .single-service { border: 1px solid #ddd; padding: 25px 40px; margin-bottom: 70px; box-shadow: 0 5px 30px -5px #ccc; position:relative; -webkit-transition:.3s; transition:.3s; text-align:center } .style-4 .single-service i.fa { color: #0bbbc1; font-size: 30px; margin: 25px 0px; border: 1px solid #0bbbc1; text-align: center; border-radius: 50%; position: relative; width: 60px; height: 60px; line-height: 60px; -webkit-transition:.5s; transition:.5s } .style-4 .single-service:after, .single-team:after { position: absolute; content: ""; width: 0%; border-top: 3px solid #0bbbc1; left: 0; top: 0; border-left: 3px solid #0bbbc1; height: 0%; z-index: 2; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility:hidden; -webkit-transition:.5s; transition:.5s } .style-4 .single-service:before, .single-team:before { position: absolute; content: ""; width: 0%; border-bottom: 3px solid #0bbbc1; right: 0; bottom: 0; border-right: 3px solid #0bbbc1; height: 0%; z-index: 2; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility:hidden; -webkit-transition:.5s; transition:.5s } .style-4 .single-service:hover:before, .single-service:hover:after{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility:visible; height:50%; width:50%; } .style-4 .single-service:hover i.fa { background-color: #0bbbc1; border-color: #0bbbc1; color: #fff; } .style-4 .single-service h3 { position: relative; font-weight: 400; margin-top: 0px; padding-top: 20px; font-size: 22px; } .style-4 .single-service p { font-weight: 300; } .style-4 .single-service h3:before { position: absolute; content: ""; width: 3px; height: 12px; background-color: #0bbbc1; top: -25px; left: 50%; margin-left: -1.5px; } .style-4 .single-service h3:after { position: absolute; content: ""; width: 30px; height: 3px; background-color: #0bbbc1; left: 50%; margin-left: -15px; top: -13px; } /* Service Style 5 Css */ .style-5 .single-service { border: 1px solid #ddd; padding: 25px 40px; margin-bottom: 70px; box-shadow: 0 5px 30px -5px #ccc; position:relative; -webkit-transition:.3s; transition:.3s; text-align:center } .style-5 .single-service i.fa { color: #0bbbc1; font-size: 30px; margin: 25px 0px; border: 1px solid #0bbbc1; text-align: center; border-radius: 50%; position: relative; width: 60px; height: 60px; line-height: 60px; -webkit-transition:.5s; transition:.5s } .style-5 .single-service:after{ position: absolute; content: ""; width: 0%; left: 0; top: 0; border-left: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-5 .single-service:before{ position: absolute; content: ""; width: 0%; right: 0; bottom: 0; border-right: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-5 .single-service:hover:before, .single-service:hover:after{ height:50%; width:50%; } .style-5 .single-service:hover i.fa { background-color: #0bbbc1; border-color: #0bbbc1; color: #fff; } .style-5 .single-service h3 { position: relative; font-weight: 400; margin-top: 0px; padding-top: 20px; font-size: 22px; } .style-5 .single-service p { font-weight: 300; } .style-5 .single-service h3:before { position: absolute; content: ""; width: 3px; height: 12px; background-color: #0bbbc1; top: -25px; left: 50%; margin-left: -1.5px; } .style-5 .single-service h3:after { position: absolute; content: ""; width: 30px; height: 3px; background-color: #0bbbc1; left: 50%; margin-left: -15px; top: -13px; } /* Service Style 6 Css */ .style-6 .single-service { border: 1px solid #ddd; padding: 25px 40px; margin-bottom: 70px; box-shadow: 0 5px 30px -5px #ccc; position:relative; -webkit-transition:.3s; transition:.3s; text-align:center; border-bottom: 3px solid #0bbbc1; padding-bottom:30px } .style-6 .single-service i.fa { color: #0bbbc1; font-size: 30px; margin: 25px 0px; border: 1px solid #0bbbc1; text-align: center; border-radius: 50%; position: relative; width: 60px; height: 60px; line-height: 60px; -webkit-transition:.5s; transition:.5s } .style-6 .single-service:after{ position: absolute; content: ""; width: 0%; left: 0; top: 0; border-left: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-6 .single-service:before{ position: absolute; content: ""; width: 0%; right: 0; bottom: 0; border-right: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-6 .single-service:hover:before, .single-service:hover:after{ height:50%; width:50%; } .style-6 .single-service:hover i.fa { background-color: #0bbbc1; border-color: #0bbbc1; color: #fff; } .style-6 .single-service h3 { position: relative; font-weight: 400; margin-top: 0px; padding-top: 20px; font-size: 22px; } .style-6 .single-service p { font-weight: 300; } .style-6 .single-service h3:before { position: absolute; content: ""; width: 3px; height: 12px; background-color: #0bbbc1; top: -25px; left: 50%; margin-left: -1.5px; } .style-6 .single-service h3:after { position: absolute; content: ""; width: 30px; height: 3px; background-color: #0bbbc1; left: 50%; margin-left: -15px; top: -13px; } .style-6 .single-service a.border-btn { background-color: #0bbbc1; position: absolute; left: 50%; margin-left: -70px; margin-top: 10px; z-index: 99; } /* Service Style 7 Css */ .style-7 .single-service { border: 1px solid #ddd; padding: 25px 40px; margin-bottom: 70px; box-shadow: 0 5px 30px -5px #ccc; position:relative; -webkit-transition:.3s; transition:.3s; text-align:center } .style-7 .single-service i.fa { color: #0bbbc1; font-size: 30px; margin: 25px 0px; border: 1px solid #0bbbc1; text-align: center; border-radius: 50%; position: relative; width: 60px; height: 60px; line-height: 60px; -webkit-transition:.5s; transition:.5s } .style-7 .single-service:after{ position: absolute; content: ""; width: 0%; left: 0; top: 0; border-top: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-7 .single-service:before{ position: absolute; content: ""; width: 0%; right: 0; bottom: 0; border-bottom: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-7 .single-service:hover:before, .single-service:hover:after{ height:50%; width:50%; } .style-7 .single-service:hover i.fa { background-color: #0bbbc1; border-color: #0bbbc1; color: #fff; } .style-7 .single-service h3 { position: relative; font-weight: 400; margin-top: 0px; padding-top: 20px; font-size: 22px; } .style-7 .single-service p { font-weight: 300; } .style-7 .single-service h3:before { position: absolute; content: ""; width: 3px; height: 12px; background-color: #0bbbc1; top: -25px; left: 50%; margin-left: -1.5px; } .style-7 .single-service h3:after { position: absolute; content: ""; width: 30px; height: 3px; background-color: #0bbbc1; left: 50%; margin-left: -15px; top: -13px; } /* Service Style 8 Css */ .style-8 .single-service:hover .box-icon i.fa { border-radius: 50%; background-color: #0bbbc1; color: #fff; border-color: #0bbbc1; } .box-icon { float: left; } .box-content { padding-left: 75px; } .box-icon i.fa { border-radius: 0px; text-align: center; } .box-content a { margin-top: 5px; } .box-icon i.fa { border-radius: 0px; text-align: center; border: 1px solid #0bbbc1; width: 60px; height: 60px; line-height: 60px; font-size: 30px; color: #0bbbc1; -webkit-transition:.4s; transition:.4s } .style-8 .single-service { border-right: 3px solid #0bbbc1; border-bottom: 3px solid #0bbbc1; padding: 25px; margin-bottom: 70px; border-radius: 3px; } /* Service Style 9 Css */ .style-9 .single-service { border: 1px solid #ddd; padding: 25px 40px; margin-bottom: 70px; box-shadow: 0 5px 30px -5px #ccc; position: relative; -webkit-transition: .3s; transition: .3s; text-align: center; padding-top: 238px; } .style-9 .single-service img { position: absolute; width: 100%; left: 0; top: 0; } .style-9 .single-service:after{ position: absolute; content: ""; width: 0%; left: 0; top: 0; border-left: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-9 .single-service:before{ position: absolute; content: ""; width: 0%; right: 0; bottom: 0; border-right: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-9 .single-service:hover:before, .single-service:hover:after{ height:50%; width:50%; } .style-9 .single-service:hover i.fa { background-color: #0bbbc1; border-color: #0bbbc1; color: #fff; } .style-9 .single-service h3 { position: relative; font-weight: 400; margin-top: 0px; padding-top: 35px; font-size: 22px; } .style-9 .single-service p { font-weight: 300; } .style-9 .single-service h3:before { position: absolute; content: ""; width: 3px; height: 12px; background-color: #0bbbc1; top: 0px; left: 50%; margin-left: -1.5px; } .style-9 .single-service h3:after { position: absolute; content: ""; width: 30px; height: 3px; background-color: #0bbbc1; left: 50%; margin-left: -15px; top: 12px; } .style-9 .single-service:hover img { opacity: .7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .style-9 .single-service img { -webkit-transition:.4s; transition: .4s; } /* Service Style 10 Css */ .style-10 .single-service { border: 1px solid #ddd; padding: 25px 40px; margin-bottom: 70px; box-shadow: 0 5px 30px -5px #ccc; position:relative; -webkit-transition:.3s; transition:.3s; text-align:center; border-bottom: 3px solid #0bbbc1; padding-bottom:30px; padding-top: 238px; } .style-10 .single-service img{ position:absolute; left:0; top:0; width:100% } .style-10 .single-service:after{ position: absolute; content: ""; width: 0%; left: 0; top: 0; border-left: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-10 .single-service:before{ position: absolute; content: ""; width: 0%; right: 0; bottom: 0; border-right: 3px solid #0bbbc1; height: 0%; z-index: 2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition:.5s; transition:.5s } .style-10 .single-service:hover:before, .single-service:hover:after{ height:50%; } .style-10 .single-service:hover i.fa { background-color: #0bbbc1; border-color: #0bbbc1; color: #fff; } .style-10 .single-service h3 { position: relative; font-weight: 400; margin-top: 0px; padding-top: 35px; font-size: 22px; } .style-10 .single-service p { font-weight: 300; } .style-10 .single-service h3:before { position: absolute; content: ""; width: 3px; height: 12px; background-color: #0bbbc1; top: 0px; left: 50%; margin-left: -1.5px; } .style-10 .single-service h3:after { position: absolute; content: ""; width: 30px; height: 3px; background-color: #0bbbc1; left: 50%; margin-left: -15px; top: 12px; } .style-10 .single-service a.border-btn { background-color: #0bbbc1; position: absolute; left: 50%; margin-left: -70px; margin-top: 10px; z-index: 99; } .style-10 .single-service:hover img { opacity: .7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .style-10 .single-service img { -webkit-transition:.4s; transition: .4s; }

Related: See More


Questions / Comments: