<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <span><i class="fa fa-globe"></i></span> </div> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis. </p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox skyblue"> <div class="service-icon"> <span><i class="fa fa-rocket"></i></span> </div> <h3 class="title">Web Development</h3> <p class="description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis. </p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <span><i class="fa fa-globe"></i></span> </div> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis. </p> </div> </div> </div> </div>

.serviceBox{ text-align: center; position: relative; } .serviceBox .service-icon{ width: 130px; height: 130px; border-radius: 50%; padding: 10px; margin: 0 auto 45px; border: 2px solid #fba21a; z-index: 1; position: relative; transition: all 0.5s ease 0s; } .serviceBox .service-icon:before, .serviceBox .service-icon:after{ content: ""; width: 35px; height: 35px; border-radius: 50%; background: #fff; border: 3px solid #fba21a; border-top: 2px solid transparent; border-right: 2px solid transparent; position: absolute; bottom: 0; left: 50%; opacity: 0; transform: translateX(-50%) rotate(135deg); transition: all 0.3s ease 0s; } .serviceBox .service-icon:after{ width: 20px; height: 20px; background: #fba21a; border: none; } .serviceBox:hover .service-icon:before{ bottom: -16px; opacity: 1; } .serviceBox:hover .service-icon:after{ bottom: -8px; opacity: 1; } .serviceBox .service-icon span{ display: block; width: 100%; height: 100%; font-size: 50px; color: #fba21a; line-height: 104px; border-radius: 50%; border: 2px solid #fba21a; } .serviceBox .service-icon span:before, .serviceBox .service-icon span:after{ content: ''; display: block; width: 3px; height: 30px; background: #fba21a; position: absolute; bottom: 0; left: 50%; opacity: 0; transform: translateX(-50%); transition: all 0.3s ease 0s; } .serviceBox .service-icon span:after{ width: 20px; height: 20px; background: transparent; border: 3px solid #fba21a; border-left: 3px solid transparent; border-top: 3px solid transparent; transform: translateX(-48%) rotate(45deg); } .serviceBox:hover .service-icon span:before, .serviceBox:hover .service-icon span:after{ bottom: -30px; opacity: 1; } .serviceBox .title{ font-size: 20px; color: #fba21a; text-transform: uppercase; margin: 0 0 10px 0; } .serviceBox .description{ font-size: 15px; color: #555; padding: 0 10px; margin: 0; } .serviceBox.skyblue .service-icon{ border-color: #05b4b7; } .serviceBox.skyblue .service-icon:before{ border-bottom-color: #05b4b7; border-left-color: #05b4b7; } .serviceBox.skyblue .service-icon:after, .serviceBox.skyblue .service-icon span:before{ background: #05b4b7; } .serviceBox.skyblue .service-icon span{ border-color: #05b4b7; color: #05b4b7; } .serviceBox.skyblue .service-icon span:after{ border-right-color: #05b4b7; border-bottom-color: #05b4b7; } .serviceBox.skyblue .title{ color: #05b4b7; } .serviceBox.pink .service-icon{ border-color: #d41271; } .serviceBox.pink .service-icon:before{ border-bottom-color: #d41271; border-left-color: #d41271; } .serviceBox.pink .service-icon:after, .serviceBox.pink .service-icon span:before{ background: #d41271; } .serviceBox.pink .service-icon span{ border-color: #d41271; color: #d41271; } .serviceBox.pink .service-icon span:after{ border-right-color: #d41271; border-bottom-color: #d41271; } .serviceBox.pink .title{ color: #d41271; } .serviceBox.green .service-icon{ border-color: #0fb513; } .serviceBox.green .service-icon:before{ border-bottom-color: #0fb513; border-left-color: #0fb513; } .serviceBox.green .service-icon:after, .serviceBox.green .service-icon span:before{ background: #0fb513; } .serviceBox.green .service-icon span{ border-color: #0fb513; color: #0fb513; } .serviceBox.green .service-icon span:after{ border-right-color: #0fb513; border-bottom-color: #0fb513; } .serviceBox.green .title{ color: #0fb513; } @media only screen and (max-width:990px){ .serviceBox{ margin-bottom: 30px; } }