Card Bootstrap4 E commerce 01

<!DOCTYPE html>
<html>
<head>
  <title>Card Bootstrap4 Ecommerce 01 | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="card-section">
        <div class="container">
            <div class="row">

                <div class="col-md-4">
                    <div class="card">
                        <img src="https://happyaddons.com/wp-content/uploads/2019/05/card-image8.jpg" class="card-img-top" alt="...">
                        <a href="#" class="btn btn-primary first-bt cart-btn">$24.00</a>
                        <div class="card-body">
                            <h5 class="card-title">This is card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary"><i class="fas fa-cart-plus"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-two">
                        <img src="https://happyaddons.com/wp-content/uploads/2019/05/card-image8.jpg" class="card-img-top" alt="...">
                        <a href="#" class="btn btn-primary second-bt cart-btn">$99.00</a>
                        <div class="card-body">
                            <h5 class="card-title">This is card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary"><i class="fas fa-cart-plus"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-three">
                        <img src="https://happyaddons.com/wp-content/uploads/2019/05/card-image8.jpg" class="card-img-top" alt="...">
                        <a href="#" class="btn btn-primary third-bt cart-btn">$66.00</a>
                        <div class="card-body">
                            <h5 class="card-title">This is card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary"><i class="fas fa-cart-plus"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>
</html>
.card-section{
    padding: 80px 0 80px ;
}

 .card{
     padding: 15px;
   margin-bottom:15px;
     border:none!important;
     background-image: linear-gradient(315deg, #6e72fc 0%, #ad1deb 74%);
}
 .card-two{
    background-image: linear-gradient(315deg, #fc6e6e 0%, #ad1deb 74%);
}
 .card-three{
    background-image: linear-gradient(315deg, #007cc6 0%, #d24aeb 74%);
}
 .card-title{
    color: #fff;
    font-size: 24px;
}
 .card-text{
    color: #ddd;
    padding-bottom: 15px;
}
 .btn-primary{
     background-color: transparent!important;
     border:2px solid #fff!important;
     border-radius: inherit!important;
}
 .cart-btn{
     background-color: #edeef2 !important;
     color: #000 !important;
     width: 96px;
     border-radius: 30px !important;
     margin: 0 auto;
     margin-top: -21px;
     margin-right: 16px 
}
 .first-bt{border: 4px solid #933ff1 !important;}
 .second-bt{border: 4px solid #d748a8 !important;}
 .third-bt{border: 4px solid #6365d8 !important;}
 
 .fa-cart-plus{
     padding-right: 10px;
}

                                    
Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Image hover 06

Image hover 06

Image hover Flip Flap Style

Image hover Flip Flap Style

Input file style01

Input file style01

Input range slider HTML style04

Input range slider HTML style04

Loading style book loader

Loading style book loader

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Pagination with Jquery

Pagination with Jquery

Responsive image grid

Responsive image grid

toggle switch style02

toggle switch style02