Pricing Card Design Using HTML and CSS || Coding Power

byCoding Power •
2

 



Hello everyone, you can learn how to create a Pricing Card using HTML and CSS in this blog. So if you want to learn then follow all the steps carefully.  

Watch Full Tutorial on YouTube


Source Code Of Pricing Card

Step 1: Create Index.html File

Create one file with the name index.html and paste the below code in this file. 

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Pricing - Coding Power</title>
</head>
<body>
    
   <div class="container">
       <div class="card">
           <div class="card-title">
               <h2>Basic</h2>
               <p><i class="fa fa-rupee"></i><Span>99</Span>/month</p>
           </div>
           <div class="card-content">
               <ul>
                   <li><i class="fa fa-check-circle"></i>1 Website</li>
                   <li><i class="fa fa-check-circle"></i>5 Gb Storage</li>
                   <li><i class="fa fa-check-circle"></i>1 Database</li>
                   <li><i class="fa fa-times-circle"></i>Free Domain</li>
                   <li><i class="fa fa-times-circle"></i>Professional Email</li>
                   <li><i class="fa fa-times-circle"></i>24/7 Support</li>
               </ul>
               <button><a href="#">Buy Now</a></button>
           </div>
       </div>
       <div class="card">
           <div class="card-title">
               <h2>Standard</h2>
               <p><i class="fa fa-rupee"></i><Span>199</Span>/month</p>
           </div>
           <div class="card-content">
               <ul>
                   <li><i class="fa fa-check-circle"></i>10 Website</li>
                   <li><i class="fa fa-check-circle"></i>25 Gb Storage</li>
                   <li><i class="fa fa-check-circle"></i>10 Database</li>
                   <li><i class="fa fa-times-circle"></i>Free Domain</li>
                   <li><i class="fa fa-check-circle"></i>Professional Email</li>
                   <li><i class="fa fa-check-circle"></i>24/7 Support</li>
               </ul>
               <button><a href="#">Buy Now</a></button>
           </div>
       </div>
       <div class="card">
           <div class="card-title">
               <h2>Premium</h2>
               <p><i class="fa fa-rupee"></i><Span>299</Span>/month</p>
           </div>
           <div class="card-content">
               <ul>
                   <li><i class="fa fa-check-circle"></i>Unlimited Website</li>
                   <li><i class="fa fa-check-circle"></i>5 Gb Storage</li>
                   <li><i class="fa fa-check-circle"></i>Unlimited Database</li>
                   <li><i class="fa fa-check-circle"></i>Free Domain</li>
                   <li><i class="fa fa-check-circle"></i>Professional Email</li>
                   <li><i class="fa fa-check-circle"></i>24/7 Support</li>
               </ul>
               <button><a href="#">Buy Now</a></button>
           </div>
       </div>
   </div>

</body>
</html>


Step 2: Create style.css File

Create one file with the name style.css and paste the below code in this file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    width: 100%;
    height: 100vh;
}

.container{
    width: 1100px;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
}

.container .card{
    width: 300px;
    height: auto;
    padding: 10px 0;
    text-align: center;
    background: linear-gradient(135deg, #ee20d6 0%, #0a2fb6 100%);
    border-radius: 15px;
    box-shadow: 2px 5px 15px black;
    transition: transform 0.3s;
}

.container .card:hover{
    transform: scale(1.050);
}

.container .card .card-title{
    padding: 30px 20px;
    border-bottom: 2px solid gray;
}

.container .card .card-title h2{
    font-size: 35px;
    padding-bottom: 15px;
    color: yellow;
}

.container .card .card-title p span{
    font-size: 40px;
    padding: 0 5px;
}

.container .card .card-content ul{
    padding: 10px 30px;
    padding-bottom: 20px;
}

.container .card .card-content ul li{
    list-style: none;
    padding: 10px 0;
}

.container .card .card-content ul li i{
    margin-right: 4px;
}

.container .card .card-content button{
    width: 120px;
    padding: 10px 20px;
    background: white;
    border-radius: 20px;
    margin-bottom: 10px;
    outline: none;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.container .card .card-content button:hover{
    background: #17ead9;
    letter-spacing: 1.2px;
}

.container .card .card-content button a{
    text-decoration: none;
    color: black;
    font-size: 15px;
}


That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.

For Download Code You have to wait 30 seconds.


Tags:

2 Comments

Previous Post Next Post