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