Bootstrap price card with css property-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstarp_practice_1.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- ####################################################### 3rd Three card################################################ -->
<!-- CARDS WITH CSS PROPERTY -->
<section class="pricing" id="pricingdiv">
<div class="container text-center headings ">
<h1 class="text-center font-weight-bolder text-white font-italic">Our Best Pricing</h1>
<br>
<br>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-12">
<div class="card text-center">
<div class="card-header">
BASIC
</div>
<div class="card-body list-unstyled">
<li>$<span class="money">20</span>Website</li>
<li>Domain Name Free</li>
<li>Mobile Friendly</li>
<li>Webmail Support</li>
<li>Customer Support 24/7</li>
</div>
<div class="card-footer">
<a href="#">purchase</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 card-second" >
<div class="card text-center">
<div class="card-header">
STANDERD
</div>
<div class="card-body list-unstyled">
<li>$<span class="money">40</span>Website</li>
<li>Domain Name Free</li>
<li>Mobile Friendly</li>
<li>Webmail Support</li>
<li>Customer Support 24/7</li>
</div>
<div class="card-footer">
<a href="#">purchase</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card text-center">
<div class="card-header">
PREMIUM
</div>
<div class="card-body list-unstyled">
<li>$<span class="money">60</span>Website</li>
<li>Domain Name Free</li>
<li>Mobile Friendly</li>
<li>Webmail Support</li>
<li>Customer Support 24/7</li>
</div>
<div class="card-footer">
<a href="#">purchase</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
/* ################################# 3RD three class css property################################ */
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.pricing{
width: 100%;
height: 100vh;
padding: 50px;
position: relative;
}
.pricing:before{
content:"";
position: absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
z-index: -1;
background: linear-gradient(160deg, #16c9f6 55% , #fff 0%);
/* change the background degree property to see the moja masti */
}
.money{
font-size: 40px;
/* line besy dure chole gale line height use koro */
line-height: 1;
color:#606060;
}
.card-header{
margin: 0px 60px;
font-size: 1.4rem;
font-weight: bold;
background:white !important;
}
.card-body{
padding: 10px 0px 20px 0px !important;
}
.card-body li{
margin: 8px 0px ;
font-weight:400;
font-size: 15px;
line-height: 1.6;
color: #606060;
}
.card-footer{
margin: 0px 30px;
background: white!important;
padding: 30px 0px!important;
}
/* Advance part like animation*/
.card{
margin: 0px 20px;
transition: 0.4s ease;
}
.card-footer a{
border: 1px solid #50d1c0;
border-radius: 100px;
margin: 0 5px;
padding: 6px 28px 10px 28px;
outline: none;
color:#50d1c0;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
text-align: center;
}
/* {hover ar .card er majhe space joruri} */
/* Bairer property te hover kore vetorer onno ar aktar property manupulatr korte nicher line */
.card:hover .card-footer a{
color: white;
background: #50d1c0;
text-decoration: none;
box-shadow: 0 0 20px 0 rgba(0,0,0, 0.3);
}
.card:hover{
transform: translateY(-20px);
/* Y means axix..you can try without y and x */
box-shadow: 0 0 20px 0 rgba(0,0,0, 0.3);
}
.card:hover .card-header, .card:hover .money{
color: rgb(0, 255, 42);
}
.card-second{
transform: translateY(-20px);
}
Comments
Post a Comment