<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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://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-family: 'Lato', sans-serif; font-size: 30px; color: #5db4c0; } h2 { font-family: 'Lato', sans-serif; font-size: 20px; color: #5db4c0; } .service { 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 { transform: rotate(360deg); background: #6b6b6b; } .service .square-feature span { font-size: 30px; margin: 0 auto; padding-top: 50px; } .service .fa { color: #FFF; }