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

                                    
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Card 4 Product Style01

Card 4 Product Style01

Compteur avec b4

Compteur avec b4

Convertir une div en image

Convertir une div en image

Image hover 05

Image hover 05

Menu aside style01 slide out

Menu aside style01 slide out

Table Responsive with css 01

Table Responsive with css 01

Titre section avec une bande style01

Titre section avec une bande style01

Triangle Background css 01

Triangle Background css 01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

page scroll progress bar

page scroll progress bar

toggle switch style02

toggle switch style02