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 by	Sanket Bodake
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	Yes
Responsive	Yes

Pricing Table Table

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

50+ HTML, CSS & JavaScript Projects With Source Code

Table of Contents

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.

Html Output

Let’s Write Css Code.

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

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:

See the Pen <a href="https://codepen.io/sanketbodke/pen/zYwLpNG" target="_blank" rel="noopener"> Responsive Pricing Table</a> by Sanket Bodake (<a href="https://codepen.io/sanketbodke" target="_blank" rel="noopener">@sanketbodke</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

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.

CodeWithRandom

Create a Responsive Pricing Table Using HTML and CSS Code

Create a Responsive Pricing Table Using HTML and CSS Code

Html Code

Css Code

Final Output Of Responsive Pricing Table

Video Output Pricing Table Using HTML and CSS:

Codepen Preview:

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

What are pricing cards?

How to add responsiveness to the pricing cards?

Leave a Reply Cancel reply

Navigate

Subscribe Now

Create a Responsive Pricing Table Using HTML and CSS Code

Html Code

Css Code

Final Output Of Responsive Pricing Table

Video Output Pricing Table Using HTML and CSS:

Codepen Preview:

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

What are pricing cards?

How to add responsiveness to the pricing cards?

You Might Also Like

Detect Key Pressed – Javascript onkeypress keycode

Drag and Drop File Upload With Preview Using JavaScript

Create Image Slider Using HTML, CSS And JavaScript Code

Leave a Reply Cancel reply

Navigate

Subscribe Now