Here is a tutorial on how to create Responsive Pricing table Using Only HTML & CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800&display=swap"
rel="stylesheet"
/>
<title>Responsive Pricing table Using Only HTML & CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2 class="heading-primary">our Pricing</h2>
<div class="plan-section">
<div class="plan basic">
<h2 class="plan-heading">Basic</h2>
<h3 class="plan-price"><span class="dollar">$</span>99</h3>
<ul class="plan-features">
<li class="plan-item">100 GB Storage</li>
<li class="plan-item">2 Users Allowed</li>
<li class="plan-item">Send up to 3GB</li>
<li class="plan-item">Support</li>
</ul>
<a href="#" class="btn buy-now">Buy Now</a>
</div>
<div class="plan pro">
<h2 class="plan-heading">Professional</h2>
<h3 class="plan-price"><span class="dollar">$</span>199</h3>
<ul class="plan-features">
<li class="plan-item">300 GB Storage</li>
<li class="plan-item">3 Users Allowed</li>
<li class="plan-item">Send up to 6 GB</li>
<li class="plan-item">Support</li>
</ul>
<a href="#" class="btn btn-blue">Buy Now</a>
</div>
<div class="plan master">
<h2 class="plan-heading">Master</h2>
<h3 class="plan-price"><span class="dollar">$</span>299</h3>
<ul class="plan-features">
<li class="plan-item">600 GB Storage</li>
<li class="plan-item">9 Users Allowed</li>
<li class="plan-item">Send up to 9GB</li>
<li class="plan-item">Master Support</li>
</ul>
<a href="#" class="btn buy-now">Buy Now</a>
</div>
</div>
</body>
</html>
CSS
/* #6d708d
#494c5f
#b3b5c6
#f6f6fe
#696fdd
*/
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body{
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
color:#494c5f ;
/* background-color:#6d708d ; */
}
.heading-primary{
font-size: 2rem;
text-align: center;
margin: 50px 0;
}
.plan-section{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.plan-section .plan{
width: 300px;
height: 370px;
text-align: center;
padding: 30px 20px;
margin-right: 10px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 0.6rem 1.6rem #b3b5c6;
}
.plan-section .plan .plan-price{
font-size: 4rem;
}
.plan-section .plan .dollar{
font-size: 2rem;
font-weight: 400;
vertical-align: middle;
}
.plan-section .plan .plan-features .plan-item{
padding: 15px 0;
border-bottom: 1px solid #b3b5c6;
}
.plan-section .plan .btn{
display: block;
background-color: #696fdd;
padding: 10px;
margin-top: 20px;
color: #f6f6fe;
border-radius: 5px;
}
.plan-section .plan .btn:hover{
background-color: #f6f6fe;
color: #494c5f;
border: 1px solid #696fdd;
font-weight: 900;
}
.plan-section .plan .btn-blue{
background-color: #f6f6fe;
color: #696fdd;
}
.plan-section .plan .btn-blue:hover{
background-color: #696fdd;
color: #f6f6fe;
border: 1px solid #f6f6fe;
}
.plan-section .basic{
background-color: #f6f6f6;
}
.plan-section .pro{
background-color: #696fdd;
color: #f6f6fe;
height: 400px;
}
.plan-section .master{
background-color: #f6f6f6;
}
(Visited 1,734 times, 1 visits today)
