<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="//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"> <div class="container"> <div class="row"> <div class="services"> <div class="single-service"> <div class="service-icon"> <i class="fa fa-pinterest"></i> </div> <h4>web design</h4> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="">read more</a> </div> <div class="single-service"> <div class="service-icon"> <i class="fa fa-twitter"></i> </div> <h4>web development</h4> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="">read more</a> </div> <div class="single-service"> <div class="service-icon"> <i class="fa fa-instagram"></i> </div> <h4>graphic design</h4> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings.</p> <a href="">read more</a> </div> </div> </div> </div>

*{ margin:0; padding:0; box-sizing:border-box } @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body{ font-family: 'Poppins', sans-serif; } .services{ width:1200px; margin:100px auto; display:flex; flex-direction:row; justify-content:space-between; } .single-service{ flex-basis:390px; padding:30px 40px; text-align:center; border:1px solid #ddd; box-shadow:0 5px 30px -5px #eee; position:relative } .service-icon{ position:relative; margin-bottom:40px; } .service-icon i{ font-size:20px; color:#ff7720; padding:20px; border:1px solid #ff7720; border-radius:50%; transition:.3s; } .service-icon:before{ position:absolute; content:""; width:2px; height:20px; background-color:#ff7720; left:50%; top:100%; transform:translateX(-50%) } .service-icon:after{ position:absolute; content:""; width:40px; height:2px; background-color:#ff7720; bottom:-20px; left:50%; transform:translateX(-50%) } .single-service h4{ text-transform:capitalize; font-size:22px; margin-bottom:10px; } .single-service p{ margin-bottom:10px; } .single-service a{ position:absolute; padding:10px 30px; color:#fff; text-decoration:none; background-color:#ff7720; text-transform:capitalize; left:50%; transform:translateX(-50%); margin-top:10px; transition:.3s; } .single-service a:hover{ background-color:#333; } .single-service:before{ position:absolute; content:""; height:0; left:0; top:0; border-left:2px solid #ff7720; transition:.3s; } .single-service:after{ position:absolute; content:""; height:0; right:0; bottom:0; border-right:2px solid #ff7720; transition:.3s; } .single-service:hover:before, .single-service:hover:after{ height:50%; } .single-service:hover i{ background-color:#ff7720; color:#fff; }