<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 ----------> <!-- youtube: https://www.youtube.com/channel/UCqlv40k1N0L9nsSrzL1OWwg/videos site: http://www.templateindirr.com --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="service"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3 text-center"> <h1>Our Services</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus </p><br> </div> </div> <div class="service-icons"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center"> <div class="square-feature"> <span class="fa fa-laptop"></span> </div> <h2>Digital Design</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center"> <div class="square-feature"> <span class="fa fa-code"></span> </div> <h2>Web Development</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center"> <div class="square-feature text-center"> <span class="fa fa-rocket"></span> </div> <h2>Creative Direction</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center"> <div class="square-feature text-center"> <span class="fa fa-life-ring"></span> </div> <h2>Support</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900'); h1{ font-size:30px; color:#5db4c0; font-family: 'Lato', sans-serif; } h2{ font-size:20px; color:#5db4c0; font-family: 'Lato', sans-serif; } .service{ font-family: 'Lato', sans-serif; background:#f6f6f6; padding:60px 0px; } .service-icons{ margin:40px 0px; } .service .square-feature{ width: 130px; height: 130px; background:#5db4c0; border: 2px solid #eee; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2); margin:0 auto; } .service .square-feature:hover{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; background:#6b6b6b; } .service .square-feature span{ font-size:30px; margin:0 auto; padding-top:50px; } .service .fa{ color:#FFF; }