Pricing Card Design Only
HTML & CSS
A price card provides a way to apply common pricing for a group of sellable items without repeating the same pricing definition in each.
Video Tutorial of Pricing Card Design
Pricing Card Design [Source Codes]
To Createa Pricing Card with HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Pricing Cards</title>
- <link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
- </head>
- <body>
- <div class="wrapper">
- <input type="radio" name="slider" id="tab-1">
- <input type="radio" name="slider" id="tab-2" checked>
- <input type="radio" name="slider" id="tab-3">
- <header>
- <label for="tab-1" class="tab-1">Basic</label>
- <label for="tab-2" class="tab-2">Premium</label>
- <label for="tab-3" class="tab-3">Cloud Startup</label>
- <div class="slider"></div>
- </header>
- <div class="card-area">
- <div class="cards">
- <div class="row row-1">
- <div class="price-details">
- <span class="price">3.47</span>
- <p>For beginner use</p>
- </div>
- <ul class="features">
- <li><i class="fas fa-check"></i><span>100 GB Premium Bandwidth</span></li>
- <li><i class="fas fa-check"></i><span>FREE 50+ Installation Scripts WordPress Supported</span></li>
- <li><i class="fas fa-check"></i><span>One FREE Domain Registration .com and .np extensions only</span></li>
- <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
- </ul>
- </div>
- <div class="row">
- <div class="price-details">
- <span class="price">4.33</span>
- <p>Everything you need to create your website</p>
- </div>
- <ul class="features">
- <li><i class="fas fa-check"></i><span>Unlimited GB Premium Bandwidth</span></li>
- <li><i class="fas fa-check"></i><span>FREE 200+ Installation Scripts WordPress Supported</span></li>
- <li><i class="fas fa-check"></i><span>Five FREE Domain Registration .com and .np extensions only</span></li>
- <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
- </ul>
- </div>
- <div class="row">
- <div class="price-details">
- <span class="price">5.34</span>
- <p>Enjoy optimized performance & dedicated resources</p>
- </div>
- <ul class="features">
- <li><i class="fas fa-check"></i><span>200 GB Premium Bandwidth</span></li>
- <li><i class="fas fa-check"></i><span>FREE 100+ Installation Scripts WordPress Supported</span></li>
- <li><i class="fas fa-check"></i><span>Two FREE Domain Registration .com and .np extensions only</span></li>
- <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
- </ul>
- </div>
- </div>
- </div>
- <button>Choose plan</button>
- </div>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Poppins", sans-serif;
- }
- body{
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background: #282A35;
- }
- .wrapper{
- width: 600px;
- background: #f2f2f2;
- border-radius: 16px;
- padding: 30px;
- box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
- }
- .wrapper header{
- height: 55px;
- display: flex;
- align-items: center;
- border: 1px solid #ccc;
- border-radius: 30px;
- position: relative;
- }
- header label{
- height: 100%;
- z-index: 2;
- width: 30%;
- display: flex;
- cursor: pointer;
- font-size: 18px;
- position: relative;
- align-items: center;
- justify-content: center;
- transition: color 0.3s ease;
- }
- #tab-1:checked ~ header .tab-1,
- #tab-2:checked ~ header .tab-2,
- #tab-3:checked ~ header .tab-3{
- color: #fff;
- }
- header label:nth-child(2){
- width: 40%;
- }
- header .slider{
- position: absolute;
- height: 85%;
- border-radius: inherit;
- background: linear-gradient(145deg, #785BF8 0%, #1EA7EF 100%);
- transition: all 0.3s ease;
- }
- #tab-1:checked ~ header .slider{
- left: 0%;
- width: 140px;
- transform: translateX(5%);
- }
- #tab-2:checked ~ header .slider{
- left: 50%;
- width: 150px;
- transform: translateX(-50%);
- }
- #tab-3:checked ~ header .slider{
- left: 100%;
- width: 150px;
- transform: translateX(-105%);
- }
- .wrapper input[type="radio"]{
- display: none;
- }
- .card-area{
- overflow: hidden;
- }
- .card-area .cards{
- display: flex;
- width: 300%;
- }
- .cards .row{
- width: 33.4%;
- }
- .cards .row-1{
- transition: all 0.3s ease;
- }
- #tab-1:checked ~ .card-area .cards .row-1{
- margin-left: 0%;
- }
- #tab-2:checked ~ .card-area .cards .row-1{
- margin-left: -33.4%;
- }
- #tab-3:checked ~ .card-area .cards .row-1{
- margin-left: -66.8%;
- }
- .row .price-details{
- margin: 20px 0;
- text-align: center;
- padding-bottom: 25px;
- border-bottom: 1px solid #e6e6e6;
- }
- .price-details .price{
- font-size: 65px;
- font-weight: 600;
- position: relative;
- font-family: 'Noto Sans', sans-serif;
- }
- .price-details .price::before,
- .price-details .price::after{
- position: absolute;
- font-weight: 400;
- font-family: "Poppins", sans-serif;
- }
- .price-details .price::before{
- content: "$";
- left: -13px;
- top: 17px;
- font-size: 20px;
- }
- .price-details .price::after{
- content: "/mon";
- right: -33px;
- bottom: 17px;
- font-size: 13px;
- }
- .price-details p{
- font-size: 18px;
- margin-top: 5px;
- }
- .row .features li{
- display: flex;
- font-size: 15px;
- list-style: none;
- margin-bottom: 10px;
- align-items: center;
- }
- .features li i{
- background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- .features li span{
- margin-left: 10px;
- }
- .wrapper button{
- width: 100%;
- border-radius: 25px;
- border: none;
- outline: none;
- height: 50px;
- font-size: 22px;
- color: #fff;
- cursor: pointer;
- margin-top: 20px;
- background: linear-gradient(145deg, #785BF8 0%, #1EA7EF 100%);
- transition: transform 0.3s ease;
- }
- .wrapper button:hover{
- transform: scale(0.98);
- }
-
If you face any difficulties while creating your Pricing Card or your code is not working as expected, you can download the source code files by clicking on the download button.