Open In App

How to Create Pricing Table using HTML and CSS ?

Last Updated : 05 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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> &#8377 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>&#8377 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>&#8377 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;
}

Output:


Next Article
How to Create Pricing Table using HTML and CSS ?

A
akshaybotre203
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox