<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 ----------> <!-- Free shipping , free exchange, premium sport, black friday--> <div class="container-fluid"> <section> <h1 class="text-center text-secondary mb-5">Shipping stats</h1> <div class="row"> <!-- Shipping --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 shipping rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">Free shipping on all UK orders</li> </ul> </div> </div> <!-- ../Shipping --> <!-- exchange --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 exchange rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">15 days return on all items</li> </ul> </div> </div> <!-- ../exchange --> <!-- support --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 support rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">We support online 24/7</li> </ul> </div> </div> <!-- ../support --> <!-- black-friday --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 black-friday rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">Shocking disount on every friday</li> </ul> </div> </div> <!-- ../black-friday --> </div> </section> </div> <!-- ../Free shipping , free exchange, premium sport, black friday-->

@import url('https://fonts.googleapis.com/css?family=Tajawal'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section{ padding: 60px 0; } .qualities .shipping{ -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .qualities:hover .shipping, .qualities:hover .exchange, .qualities:hover .support, .qualities:hover .black-friday{ box-shadow: -3px 3px 9px 2px rgba(178,178,179,.3); background:#6c757d!important; } .qualities:hover .shipping ul li, .qualities:hover .exchange ul li, .qualities:hover .support ul li, .qualities:hover .black-friday ul li { color:#ffffff !important; } .qualities:hover .shipping ul li:before { color:#ffffff; } .qualities ul li{ padding-left: 20px; position: relative; } .qualities ul li:before{ font-family: FontAwesome; margin-left: -25px; position: absolute; } .shipping ul li:before { content: "\f1b9"; } .exchange ul li:before { content: "\f004"; } .support ul li:before { content: "\f098"; } .black-friday ul li:before { content: "\f06b"; }