Responsive Pricing Tables
Responsive Pricing Tables Using Only HTML & CSS
Outline: Responsive Pricing Tables
Charging for web design can be controversial. Many feel that charging for a web design is unethical and exploitative. On the other hand, charging for web design is a necessary step in achieving higher standards of quality and excellence. Pricing responsive websites are also challenging since there are no standard pricing ranges for this type of work. Using HTML and CSS, it’s possible to create responsive websites that look beautiful on any device. In this chapter, we will explore pricing tables using only HTML and CSS.
Pricing tables using only HTML and CSS is an easy way to create clear information regarding limits, fees, costs, rates, charges, etc… This information will help both designers and clients plan ahead before starting any new projects involving web design services. Charging for web design may seem unethical at first glance, but it’s necessary if designers wish to gain sufficient income to purchase software licenses and other materials required by their jobs.
HTML Code: Responsive Pricing Tables
This tutorial will show you how to create pricing tables using only HTML and CSS. Pricing tables are a common web design element used to display various pricing plans, subscriptions, or price comparisons. In this program, there are three pricing tables with different prices and features. The best part of this table is that it is fully responsive to any device. With different colors is in the card looks attractive and unique. If you want to see this card and how it is created.
To create responsive pricing tables, you will need to create two files; one HTML file and one CSS file. After creating these files, simply paste the following code into your files. You can also download the source code files by clicking the download button below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Responsive Pricing Tables | DuraScripts</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<div class="table basic">
<div class="price-section">
<div class="price-area">
<div class="inner-area">
<span class="text">$</span>
<span class="price">29</span>
</div>
</div>
</div>
<div class="package-name"></div>
<ul class="features">
<li>
<span class="list-name">One Selected Template</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">100% Responsive Design</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Credit Remove Permission</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
<li>
<span class="list-name">Lifetime Template Updates</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
</ul>
<div class="btn"><button>Purchase</button></div>
</div>
<div class="table premium">
<div class="ribbon"><span>Recommend</span></div>
<div class="price-section">
<div class="price-area">
<div class="inner-area">
<span class="text">$</span>
<span class="price">59</span>
</div>
</div>
</div>
<div class="package-name"></div>
<ul class="features">
<li>
<span class="list-name">Five Existing Templates</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">100% Responsive Design</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Credit Remove Permission</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Lifetime Template Updates</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
</ul>
<div class="btn"><button>Purchase</button></div>
</div>
<div class="table ultimate">
<div class="price-section">
<div class="price-area">
<div class="inner-area">
<span class="text">$</span>
<span class="price">99</span>
</div>
</div>
</div>
<div class="package-name"></div>
<ul class="features">
<li>
<span class="list-name">All Existing Templates</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">100% Responsive Design</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Credit Remove Permission</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Lifetime Template Updates</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
</ul>
<div class="btn"><button>Purchase</button></div>
</div>
</div>
</body>
</html>
CSS CODE: Responsive Pricing Tables
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: #647df9;
}
.wrapper{
max-width: 1090px;
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wrapper .table{
background: #fff;
width: calc(33% - 20px);
padding: 30px 30px;
position: relative;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.table .price-section{
display: flex;
justify-content: center;
}
.table .price-area{
height: 120px;
width: 120px;
border-radius: 50%;
padding: 2px;
}
.price-area .inner-area{
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid #fff;
line-height: 117px;
text-align: center;
color: #fff;
position: relative;
}
.price-area .inner-area .text{
font-size: 25px;
font-weight: 400;
position: absolute;
top: -10px;
left: 17px;
}
.price-area .inner-area .price{
font-size: 45px;
font-weight: 500;
margin-left: 16px;
}
.table .package-name{
width: 100%;
height: 2px;
margin: 35px 0;
position: relative;
}
.table .package-name::before{
position: absolute;
top: 50%;
left: 50%;
font-size: 25px;
font-weight: 500;
background: #fff;
padding: 0 15px;
transform: translate(-50%, -50%);
}
.table .features li{
margin-bottom: 15px;
list-style: none;
display: flex;
justify-content: space-between;
}
.features li .list-name{
font-size: 17px;
font-weight: 400;
}
.features li .icon{
font-size: 15px;
}
.features li .icon.check{
color: #2db94d;
}
.features li .icon.cross{
color: #cd3241;
}
.table .btn{
width: 100%;
display: flex;
margin-top: 35px;
justify-content: center;
}
.table .btn button{
width: 80%;
height: 50px;
color: #fff;
font-size: 20px;
font-weight: 500;
border: none;
outline: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.table .btn button:hover{
border-radius: 5px;
}
.basic .features li::selection{
background: #ffd861;
}
.basic ::selection,
.basic .price-area,
.basic .inner-area{
background: #ffd861;
}
.basic .btn button{
border: 2px solid #ffd861;
background: #fff;
color: #ffd861;
}
.basic .btn button:hover{
background: #ffd861;
color: #fff;
}
.premium ::selection,
.premium .price-area,
.premium .inner-area,
.premium .btn button{
background: #a26bfa;
}
.premium .btn button:hover{
background: #833af8;
}
.ultimate ::selection,
.ultimate .price-area,
.ultimate .inner-area{
background: #43ef8b;
}
.ultimate .btn button{
border: 2px solid #43ef8b;
color: #43ef8b;
background: #fff;
}
.ultimate .btn button:hover{
background: #43ef8b;
color: #fff;
}
.basic .package-name{
background: #ffecb3;
}
.premium .package-name{
background: #d0b3ff;
}
.ultimate .package-name{
background: #baf8d4;
}
.basic .package-name::before{
content: "Basic";
}
.premium .package-name::before{
content: "Premium";
font-size: 24px;
}
.ultimate .package-name::before{
content: "Ultimate";
font-size: 24px;
}
@media (max-width: 1020px) {
.wrapper .table{
width: calc(50% - 20px);
margin-bottom: 40px;
}
}
@media (max-width: 698px) {
.wrapper .table{
width: 100%;
}
}
::selection{
color: #fff;
}
.table .ribbon{
width: 150px;
height: 150px;
position: absolute;
top: -10px;
left: -10px;
overflow: hidden;
}
.table .ribbon::before,
.table .ribbon::after{
position: absolute;
content: "";
z-index: -1;
display: block;
border: 7px solid #4606ac;
border-top-color: transparent;
border-left-color: transparent;
}
.table .ribbon::before{
top: 0px;
right: 15px;
}
.table .ribbon::after{
bottom: 15px;
left: 0px;
}
.table .ribbon span{
position: absolute;
top: 30px;
right: 0;
transform: rotate(-45deg);
width: 200px;
background: #a26bfa;
padding: 10px 0;
color: #fff;
text-align: center;
font-size: 17px;
text-transform: uppercase;
box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}
Recommended: Responsive Chat Box UI Design using HTML and CSS
