<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="new-products"> <div class="container"> <h1 class="new-products-title">NEW PRODUCTS</h1> <ul class="arrows pager"> <li> <a data-slide="prev" href="#carousel-example"> <i class="glyphicon glyphicon-chevron-left"></i> </a> </li> <li> <a data-slide="next" href="#carousel-example"> <i class="glyphicon glyphicon-chevron-right"></i> </a> </li> </ul> <div id="carousel-example" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="col-item"> <div class="photo"> <img src="http://via.placeholder.com/400x250" class="img-responsive" alt="" /> </div> <div class="info"> <div class="row"> <div class="price text-center"> <h1>ÜRÜN ADI</h1> <p class="price-text-color">60 TL</p> </div> </div> <div class="al-btn text-center"> <a href="#" class="btn btn-default orange-btn">Satın Al</a> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="col-item"> <div class="photo"> <img src="http://via.placeholder.com/400x250" class="img-responsive" alt="" /> </div> <div class="info"> <div class="row"> <div class="price text-center"> <h1>ÜRÜN ADI</h1> <p class="price-text-color">60 TL</p> </div> </div> <div class="al-btn text-center"> <a href="#" class="btn btn-default orange-btn">Satın Al</a> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="col-item"> <div class="photo"> <img src="http://via.placeholder.com/400x250" class="img-responsive" alt="" /> </div> <div class="info"> <div class="row"> <div class="price text-center"> <h1>ÜRÜN ADI</h1> <p class="price-text-color">60 TL</p> </div> </div> <div class="al-btn text-center"> <a href="#" class="btn btn-default orange-btn">Satın Al</a> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="col-item"> <div class="photo"> <img src="http://via.placeholder.com/400x250" class="img-responsive" alt="" /> </div> <div class="info"> <div class="row"> <div class="price text-center"> <h1>ÜRÜN ADI</h1> <p class="price-text-color">60 TL</p> </div> </div> <div class="al-btn text-center"> <a href="#" class="btn btn-default orange-btn">Satın Al</a> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="col-item"> <div class="photo"> <img src="http://via.placeholder.com/400x250" class="img-responsive" alt="" /> </div> <div class="info"> <div class="row"> <div class="price text-center"> <h1>ÜRÜN ADI</h1> <p class="price-text-color">60 TL</p> </div> </div> <div class="al-btn text-center"> <a href="#" class="btn btn-default orange-btn">Satın Al</a> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="col-item"> <div class="photo"> <img src="http://via.placeholder.com/400x250" class="img-responsive" alt="" /> </div> <div class="info"> <div class="row"> <div class="price text-center"> <h1>ÜRÜN ADI</h1> <p class="price-text-color">60 TL</p> </div> </div> <div class="al-btn text-center"> <a href="#" class="btn btn-default orange-btn">Satın Al</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700'); body { font-family: 'PT Sans', sans-serif; } .new-products-title { font-weight: 700; color: #333; letter-spacing: 2px; font-size: 30px; } .new-products .price h1 { text-transform: uppercase; font-size: 20px; margin-top: 20px; } .new-products .price p { font-weight: bolder; color: #f54f29; font-size: 24px; text-transform: uppercase; } .orange-btn { padding: 13px 25px; border: none; text-align: center; background: #f54f29; cursor: pointer; color: #FFF; margin: 10px 0px; font-weight: 600; font-size: 16px; } .pager li > a, .pager li > span { display: inline-block; padding: 10px 20px; background-color: #f6f6f6; border: none; border-radius: 0px; font-size: 12px; color: #f54f29; } .arrows { position: relative; top: -60px; text-align: right; }