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;
}

                                    
Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Card Profile Style01

Card Profile Style01

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Geocoded Locations

Geocoded Locations

Google Style Login

Google Style Login

Planète animée style01

Planète animée style01

SwiperJS style01

SwiperJS style01

Texte Block Posts Style01

Texte Block Posts Style01

Timeline style03

Timeline style03

Timeline style04

Timeline style04