<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container"> <br> <div class="card border-0"> <div class="row"> <aside class="col-sm-4"> <article class="gallery-wrap"> <div class="img-big-wrap"> <div> <a href="#"><img src="https://via.placeholder.com/450x450"></a></div> </div> <div class="img-small-wrap"> <div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div> <div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div> <div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div> <div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div> </div> </article> </aside> <aside class="col-sm-5"> <article class="card-body m-0 pt-0 pl-5"> <h3 class="title text-uppercase">Nom du produit</h3> <div class="rating"> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="review-no ml-2">(41 avis)</span> </div> </div> <div class="mb-3 mt-3"> <span class="h7 text-success">En stock.</span> </div> <div class="mb-3 mt-3"> <span class="price-title">Prix :</span> <span class="price color-price-waanbii">5^€</span> </div> <dl class="item-property"> <dt>Description</dt> <dd><p>Here goes description consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p></dd> </dl> <dl class="param param-feature"> <dt>Poids</dt> <dd>200g</dd> </dl> </article> </aside> <aside class="col-sm-3"> <div class="row"> <dl class="param param-inline"> <dt>Quantity: </dt> <dd> <select class="form-control form-control-sm" style="width:70px;"> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> <option> 6 </option> <option> 7 </option> <option> 8 </option> <option> 9 </option> <option> 10 </option> </select> </dd> </dl> </div> <div class="row "> <button class="btn btn-lg color-box-waanbii" type="button"> <i class="fa fa-shopping-cart"></i> Ajouter au panier </button> </div> <div class="row mb-4 mt-4"> <button class="btn btn-lg color-box-waanbii" type="button"> <i class="fa fa-credit-card"></i> Passer la commande </button> </div> <div class="row mb-4 mt-4"> <button class="btn btn-lg btn-success" type="button"><i class="fa fa-heart fa-beat"></i></button> </div> <hr class="m-0 p-0"> <div class="row mb-4 mt-4"> Il reste 3 exemplaires du produits. </div> </aside> </div> </div> </div> <!--container.//-->

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .gallery-wrap .img-big-wrap img { height: 400px; width: 400px; /* width: auto;*/ display: inline-block; cursor: zoom-in; } .gallery-wrap .img-small-wrap .item-gallery { width: 70px; height: auto; margin: 7px 2px; display: inline-block; overflow: hidden; } .gallery-wrap .img-small-wrap { text-align: center; } .gallery-wrap .img-small-wrap img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 4px; /*cursor: zoom-in;*/ } .price-title{ font-weight: 700; } .price{ font-size: 24px; line-height: 31px; text-transform: uppercase; max-height: 66px; overflow: hidden; font-family: 'Open Sans',Arial,sans-serif; font-weight: 700; width: 100%; padding: 0; float: none; } .color-price-waanbii{ color: #FA3A11; } .color-box-waanbii{ background: #FD6342; color:white; } .fa-beat { animation:fa-beat 5s ease infinite; } @keyframes fa-beat { 0% { transform:scale(1); } 5% { transform:scale(1.25); } 20% { transform:scale(1); } 30% { transform:scale(1); } 35% { transform:scale(1.25); } 50% { transform:scale(1); } 55% { transform:scale(1.25); } 70% { transform:scale(1); } }