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

                                    
page scroll progress bar

page scroll progress bar

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style05

Timeline style05

Table bootstrap with Datatable

Table bootstrap with Datatable

Menu aside style01 slide out

Menu aside style01 slide out

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Image hover style border top

Image hover style border top

Form login et créer un compte style01

Form login et créer un compte style01

Card Profile Style01

Card Profile Style01

Bloc resizable with jquery

Bloc resizable with jquery

Background div gradient

Background div gradient

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table