<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 ----------> <!-- Font_-Awsome --> <script src="https://kit.fontawesome.com/aae1bf0757.js" crossorigin="anonymous"></script> <div class="container"> <div class="row row-cus"> <div class="col-lg-4 arrow-hover"> <a href=""> <div class="row arrow-row"> <div class="col-lg-10 arrow-text">Node JS Developer</div> <div class="col-lg-2 arrow-cus"> <i class="fas fa-chevron-right"></i></div> </div> </a> </div> <div class="col-lg-4"> <a href=""> <div class="row arrow-row"> <div class="col-lg-10 arrow-text">Java Developer</div> <div class="col-lg-2 arrow-cus"> <i class="fas fa-chevron-right"></i></div> </div> </a> </div> <div class="col-lg-4"> <a href=""> <div class="row arrow-row"> <div class="col-lg-10 arrow-text">Full Stack Developer</div> <div class="col-lg-2 arrow-cus"> <i class="fas fa-chevron-right"></i></div> </div> </a> </div> </div> </div>

/*row*/ .row-cus{ padding-top: 40px; } .arrow-cus { background-color: #F2994A; text-align: center; color: #fff; border-radius: 0 5px 5px 0; padding: 20px 0; } .arrow-text { align-items: center; font-size: 18px; color: #123754; padding: 17px 0; } .arrow-row { background: #FFFFFF; box-sizing: border-box; box-shadow: 0px 15px 15px -5px rgb(93 69 180 / 15%); border-radius: 5px; margin: 0 15px !important; align-items: center; } .arrow-row:hover .arrow-cus { background-color: #CD3D7F; } .arrow-row:hover .arrow-text {color: #CD3D7F;} @media only screen and (max-width: 768px) { .arrow-text { width: 80% !important; font-size: 14px; letter-spacing: 1px; } .arrow-row { padding-top:20px; } .arrow-cus{ width: 20% !important; } }