How to Create Pricing Table using HTML and CSS ?

Last Updated : 22 Aug, 2023

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:

gfg-(4)

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>

CSS

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