price card table html css

Create a Responsive Pricing Table With Price Tag Html CSS

by

Create a Responsive Pricing Table With Price Tag Html CSS

In this article, we create a price card and the pricing card table is completely responsive. We use Html And Css code to create our price card table and also use Css for responsiveness.

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

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>

We create a boilerplate code for our project. We use font awesome icon in our price card table so we include font awesome CDN. Then we start creating a price card structure.

We create many div so we can style pricing card details attractive. So we create 3 pricing card table sections with a different styles.

50+ Frontend Project With Code

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

price card table html css

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.

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

price card table html css

price card table html css

price card table html 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💝.

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

Share on:

Leave a Comment