How to Create Pricing Table using HTML and CSS ?
Last Updated :
05 Aug, 2024
Nowadays, every website contains pricing tables, such as e-commerce, e-tech, and even tourism websites also have pricing tables as they contain their plans, cost of plans, and information about plans to buy new facilities. So the pricing table is one of the most important parts of websites that sell something. In this article, we are creating a beautiful pricing table with the help of pure HTML and CSS coding.
Here is the preview image of the pricing table we are going to make:
.jpg)
Prerequisite:
Project Structure:
--index.html
--style.css
Approach:
To create this feature, first we will create two files index.html and style.css. Inside the index.html file we will create a container and add the cards table using the grid layout. Heading and Description is displayed first then the card is rendered. In the style.css file we will create animations such as shadow and scaling on hover of the card. The button color also changes on hover. Unique CSS is given to the most selling course which is the standard program.
Example: In this example, we will use the above-explained approach.
HTML
<html>
<head>
<title>
Pricing Table using HTML and CSS
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Select Your Plan</h2>
<h3>
C Programming Course: Beginner to Advance
</h3>
<div class="price-row">
<div class="price-col">
<p>Basic</p>
<hr>
<h3> ₹ 500/<span>month</span></h3>
<ul>
<li>Live Online Classes</li>
<li>Hands on Project</li>
<li>Live Doubt Session</li>
<li>Certificate on Completion</li>
</ul>
<button>Buy Now</button>
</div>
<div class="price-col" id="best">
<p id="prem">Standard*</p>
<hr>
<h3>₹ 1000/<span>month</span></h3>
<ul>
<li>All Basic Features</li>
<li>Data Structure & Algorithms</li>
<li>Memory Management in C</li>
<li>Limit upto 2 users</li>
</ul>
<button>Buy Now</button>
</div>
<div class="price-col">
<p>Premium</p>
<hr>
<h3>₹ 1600/<span>month</span></h3>
<ul>
<li>All standard Features</li>
<li>Recorded Lectures</li>
<li>Placement Assistance</li>
<li>Limit upto 4 users</li>
</ul>
<button>Buy Now</button>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
background: #fffaee;
}
.container h2 {
color: #1d2d3f;
font-size: 32px;
padding: 15px 0 20px 0;
text-align: left;
margin-left: 10%;
}
.container h3 {
margin: 0% 0 2% 10%;
font-size: 24px;
color: #0C356A;
}
.price-row {
width: 81%;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 30px;
}
.price-col {
transition: box-shadow .5s;
transition: transform;
background: #61677A;
padding: 10% 10%;
border-radius: 10px;
color: #D8D9DA;
text-align: center;
}
hr {
padding: -10% !important;
}
.price-col:hover {
box-shadow: 0 0 20px rgba(9, 157, 194, 0.2);
transform: scale(1.04);
}
.price-col p {
font-size: 22px;
}
.price-col h3 {
color: whitesmoke;
font-size: 44px;
margin: 15px 0 20px;
font-weight: 500;
}
.price-col h3 span {
font-size: 25px;
}
.price-col ul {
text-align: left;
margin: 10px 0;
color: #0C356A;
list-style: none;
}
.price-col ul li {
border-bottom: 2px solid #feffff;
font-size: 20px;
color: #ffffff;
padding: 8px;
text-align: left;
}
.price-col button {
background-color: #EEE0C9;
border: 1px solid white;
border-radius: 5px;
margin: 20px 0 0 0;
color: #001c38;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
.price-col button:hover {
background: #091c23;
color: white;
}
#best {
background: #272829 !important;
}
p {
font-size: 24px !important;
margin-bottom: 10px;
margin-top: -10px;
}
#prem {
color: gold !important;
text-shadow: 1px 1px gold;
}
Output:
Similar Reads
How to create a table row using HTML? Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody
1 min read
How to make a Animated Table using HTML and CSS ? Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In this article, we are going to create a Table with animation over its columns. We are going to implement it using HTML and CSS. Approa
3 min read
How to Create Section Counter using HTML and CSS ? Section counter is like a card and is useful for webpage footer. It contains details about the company. In this article, we will introduce some predicted data about some companies. We divide this article into two sections, in the first section we will create the normal structure then we will work on
3 min read
How to create table cell using HTML5 ? In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head>
1 min read
How to create a Portfolio Gallery using HTML and CSS ? The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript a
4 min read