Master Frontend to Backend eBook Banner
price card table html css

Create a Responsive Pricing Table Using HTML and CSS Code

Create a Responsive Pricing Table Using HTML and CSS Code

In this article, we build a price card with a fully Responsive Pricing Card Table. Our Price Card Table is made using HTML and CSS code, and CSS is also used to make the table adaptable.

Responsive Pricing Table Using HTML and CSS Code

Pricing cards on commercial websites are made to make it simple to evaluate the costs of each subscription. We have a comparison or illustration of online hosting in this design. To show available features like price comparisons, features, pricing plans, subscriptions, etc., things are listed down in pricing tables on a website.

Code bySanket Bodake
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYes
Pricing Table Table

So let’s start writing Html code for the pricing card table.

50+ HTML, CSS & JavaScript Projects With Source Code

Html Code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing</title>
    <link rel="stylesheet" href="./pricing.css">
    <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></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">
                         &#8377;
                       </span>
                       <span class="price">00</span>
                   </div>
               </div>
           </div>
           <div class="package-name">
    
           </div>
           <div class="features">
               <li>
                   <span class="list-name">One Selected Template</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">100% Responsive Design</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">Credit Remove Permission</span>
                   <span class="icon cross"><i class="far fa-times-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">Lifetime Template Updates</span>
                   <span class="icon cross"><i class="far fa-times-circle"></i></span>
               </li>
               <div class="btn"><button>Purchase</button></div>
           </div>
       </div>
       <div class="table Premium">
           <div class="price-section">
               <div class="price-area">
                   <div class="inner-area">
                       <span class="text">
                         &#8377;
                       </span>
                       <span class="price">49</span>
                   </div>
               </div>
           </div>
           <div class="package-name">
            
           </div>
           <div class="features">
               <li>
                   <span class="list-name">Five Existing Template</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">100% Responsive Design</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">Credit Remove Permission</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">Lifetime Template Updates</span>
                   <span class="icon cross"><i class="far fa-times-circle"></i></span>
               </li>
               <div class="btn"><button>Purchase</button></div>
           </div>
       </div>
       <div class="table Ultimate">
           <div class="price-section">
               <div class="price-area">
                   <div class="inner-area">
                       <span class="text">
                          &#8377;
                       </span>
                       <span class="price">99</span>
                   </div>
               </div>
           </div>
           <div class="package-name">
               
           </div>
           <div class="features">
               <li>
                   <span class="list-name">All Existing Template</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">100% Responsive Design</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">Credit Remove Permission</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <li>
                   <span class="list-name">Lifetime Template Updates</span>
                   <span class="icon check"><i class="fas fa-check-circle"></i></span>
               </li>
               <div class="btn"><button>Purchase</button></div>
           </div>
       </div>
   </div>
</body>
</html>

Portfolio Website using HTML and CSS (Source Code)

We write boilerplate code for our endeavour. We include font awesome CDN because we use font awesome symbol in our price card table. Then we begin building a price card system.

The primary container for the price card is created by adding structure using the div tag and class wrapper.

We will put together a pricing chart.

Using the list item property, we will create various sections for the different text inside the pricing card and add the necessary information.

In order to style the pricing card details attractively, we make a lot of div. As a result, we design three distinct areas for the pricing card table.

Restaurant Website Using HTML and CSS

So we did our Html Code for the pricing card.

Now you can see below 👇Output with Only Html Coding Then we write Css for our pricing card table.

ADVERTISEMENT

Html Output

ADVERTISEMENT

ADVERTISEMENT

Responsive Pricing Table Using HTML and CSS Code

ADVERTISEMENT

Let’s Write Css Code.

ADVERTISEMENT

Css Code 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #647df9;
    padding: 20px;
}

.wrapper{
    max-width: 1090px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    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);
}

@media (max-width: 1020px){
    .wrapper .table{
        width: calc(50% - 20px);
        margin-bottom: 40px;
    }
}

@media (max-width: 698px){
    .wrapper .table{
        width: 100%;
    }
}

.table .price-section{
   display: flex;
   justify-content: center;
}

.price-section .price-area{
    height: 120px;
    width: 120px;
    background: #ffd861;
    border-radius: 50%;
    padding: 2px;
}

.price-section .price-area .inner-area{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    color: #fff;
    line-height: 117px;
    text-align: center;
    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: 55px;
    font-weight: 500;
}

.table .package-name{
    width: 100%;
    height: 2px;
    background: #ffecb3;
    margin: 35px 0;
    position: relative;
}

.table .package-name::before{
    position: absolute;
    content: "Basic";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    font-size: 25px;
    padding: 0 10px;
    font-weight: bolder;
}

.table .features li{
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.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{
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.table .btn button{
    width: 80%;
    height: 50px;
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    border: none;
    outline: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.basic .price-area,
.basic .inner-area{
    background: #ffd861;
}

.basic .btn button{
    background: #fff;
    color: #ffd861;
    border: 2px solid #ffd861;
}

.basic .btn button:hover{
    border-radius: 6px;
    background: #ffd861;
    color: #fff;
}

.Premium .price-area,
.Premium .inner-area{
    background: #a26bfa;
}

.Premium .btn button{
    background: #fff;
    color: #a26bfa;
    border: 2px solid #a26bfa;
}

.Premium .btn button:hover{
    border-radius: 6px;
    background: #a26bfa;
    color: #fff;
}

.Ultimate .price-area,
.Ultimate .inner-area{
    background: #43ef8b;
}

.Ultimate .btn button{
    background: #fff;
    color: #43ef8b;
    border: 2px solid #43ef8b;
}

.Ultimate .btn button:hover{
    border-radius: 6px;
    background: #43ef8b;
    color: #fff;
}

.basic .package-name{
    background: #ffecb3;
}

.Premium .package-name{
    background: #a26bfa;
}

.Ultimate .package-name{
    background: #43ef8b;
}

.basic .package-name::before{
    content: "Basic";
}

.Premium .package-name::before{
    content: "Premium";
}

.Ultimate .package-name::before{
    content: "Ultimate";
}

.basic ::selection,
.basic .price-area,
.basic .inner-area{
    background: #ffd861;
}

.Premium ::selection,
.Premium .price-area,
.Premium .inner-area{
    background: #a26bfa;
}

.Ultimate ::selection,
.Ultimate .price-area,
.Ultimate .inner-area{
    background: #43ef8b;
}

This is our whole code of Css for the pricing card table. We style the body and give background color and all basic styling. Then we style our main div, in this div all 3 card content.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

We use display flex for easier to create responsive pricing card table. And we style the mobile version also together with the help of media queries. Then we use the before pseudo selector to style the heading of our pricing tag.

We style all li items with help of Css and give background to for right tic icon and cross❌ Icon. that’s it all code for the responsive pricing card table.

You can below some screenshots of our project and a video preview too.

Final Output Of Responsive Pricing Table

price card table html css

price card table html css

Video Output Pricing Table Using HTML and CSS:

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Codepen Preview:

 

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Sanket Bodake

written by – Codewithrandom

Which code editor do you use for this Pricing Table coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What are pricing cards?

Pricing tables are the flat card layouts of a specific product with goods of various values and offers for the consumers. Mobile phones, television, hosting, and other goods can all be included in the pricing table.

How to add responsiveness to the pricing cards?

We need to use some fundamental CSS principles and the media query attribute to give the pricing card responsiveness.



Tags: ,

Leave a Reply