Skip to content
Related Articles

Related Articles

How to Create Pricing Table using HTML and CSS ?

Improve Article
Save Article
  • Last Updated : 08 Jun, 2022
Improve Article
Save Article

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 which sell something. In this article, we are creating a beautiful pricing table with the help of pure HTML and CSS coding. This coding includes two files, one for HTML code saved with the extension .html and the other for CSS code saved with the extension .css.

Approach: First we will create basic structure of pricing table using HTML tags and then apply some CSS properties on it to make it more attractive.

HTML Code:

HTML




<!DOCTYPE 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>
        <div class="price-row">
            <div class="price-col">
                <p>Basic</p>
                <h3>500 Rs <span>/month</span></h3>
                <ul>
                    <li>C programming basic</li>
                    <li>Variables in c</li>
                    <li>Function in c</li>
                    <li>Basic programs in c</li>
                </ul>
                <button>Buy Now</button>
            </div>
            <div class="price-col">
                <p>Standard</p>
                <h3>1000 Rs <span>/month</span></h3>
                <ul>
                    <li>Algorithms in c</li>
                    <li>Data structures in c</li>
                    <li>Medium+hard level programs</li>
                    <li>High quality study material</li>
                </ul>
                <button>Buy Now</button>
            </div>
            <div class="price-col">
                <p>Premium</p>
                <h3>1200 Rs <span>/month</span></h3>
                <ul>
                    <li>C programming basic</li>
                    <li>Algorithms in c</li>
                    <li>Data structures in c</li>
                    <li>All level programs</li>
                </ul>
                <button>Buy Now</button>
            </div>
        </div>
    </div>
</body>
  
</html>


CSS Code:

style.css




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
.container{
    width: 100%;
    min-height: 100vh;
    background: #90EE90;
}
.container h2{
    color: #000000;
    font-size:32px;
    padding:50px 0;
    text-align: center;
}
.price-row{
    width: 90%;
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 25px;
}
.price-col{
    background: #006400;
    padding: 10% 15%;
    border-radius: 10px;
    color: #fff;
    text-align: center;
}
.price-col p{
    font-size: 22px;
}
.price-col h3{
    font-size: 44px;
    margin: 20px 0 40px;
    font-weight: 500;
}
.price-col h3 span{
    font-size: 16px;
}
.price-col ul{
    text-align: left;
    margin: 20px 0;
    color: #ddd;
}
.price-col ul li{
    margin: 15px 0;
    size: 20px;
}
.price-col button{
    width: 100%;
    padding: 14px 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    border: 1px solid #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.5s;
}
.price-col button:hover{
    background: #008000;
}


Output:

 

  


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!