<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 ----------> <div class="container"> <div class="row" id="ads"> <!-- Category Card --> <div class="col-md-4"> <div class="carbox"> <div class="card-image"> <span class="card-notify-badge">Test Test Test Test </span> <img class="img-carbox" src="https://i.pinimg.com/originals/18/14/9a/18149afc5f3901fc22be42aef0d1463c.jpg" alt="Alternate Text" /> <span class="card-notify-badge2"><h6>Xiaomi Mi Band 4 Akıllı Bileklik Siyah</h6></span> </div> <div class="card-body text-center"> <div class="ad-title m-auto"> <h6>İlk fiyattan al 1000 TL</h6> </div> </div> </div> </div> <div class="col-md-4"> <div class="carbox"> <div class="card-image"> <span class="card-notify-badge">Test Test Test Test </span> <img class="img-carbox" src="https://i.pinimg.com/originals/18/14/9a/18149afc5f3901fc22be42aef0d1463c.jpg" alt="Alternate Text" /> <span class="card-notify-badge2"><h6>Xiaomi Mi Band 4 Akıllı Bileklik Siyah</h6></span> </div> <div class="card-body text-center"> <div class="ad-title m-auto"> <h6>İlk fiyattan al 1000 TL</h6> </div> </div> </div> </div> <div class="col-md-4"> <div class="carbox"> <div class="card-image"> <span class="card-notify-badge">Test Test Test Test </span> <img class="img-carbox" src="https://i.pinimg.com/originals/18/14/9a/18149afc5f3901fc22be42aef0d1463c.jpg" alt="Alternate Text" /> <span class="card-notify-badge2"><h6>Xiaomi Mi Band 4 Akıllı Bileklik Siyah</h6></span> </div> <div class="card-body text-center"> <div class="ad-title m-auto"> <h6>İlk fiyattan al 1000 TL</h6> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); body { font-family: 'Montserrat', sans-serif; } #ads { margin: 20px 0 10px 0; } #ads .carbox { overflow: hidden; width: 350px; border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: box-shadow .25s; } #ads .carbox:hover { box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } #ads .img-carbox { width: 350px; height:200px; border-top-left-radius:5px; border-top-right-radius:5px; transition-duration: 1s; } #ads .img-carbox:hover { transform: scale(1.03); } #ads .card-notify-badge { position: absolute; left: 130px; top: -15px; background: #f2d900; border-radius: 15px 15px; padding: 5px 5px; font-size: 14px; } #ads .card-notify-badge2 { position: absolute; left: 15px; top: 180px; height: 20px; width: 350px; background: #d9d9d9; text-align: center; color: #000; font-size: 14px; opacity: 0.8; }