 |
| Pricing Table Project using html and css |
In this Article, we will learn to create Pricing Table using html and css with source code. Creating Pricing Table Project using html and css becomes simple with the given tutorial, which provides a simple step-by-step process to design Pricing Table Project using html and css. So, let's go and follow the steps carefully.
Steps to create Pricing Table using html and css
Here are the Steps to create Pricing Table using html and css as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a new folder and add html and css file.
2) Adding HTML :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Choose your plan</h2>
<div class="price-row">
<div class="price-col">
<p>Starter</p>
<h3>$19 <span>/month</span></h3>
<ul>
<li>1 Website</li>
<li>10GB Disk Space</li>
<li>Free Email Address</li>
<li>Basic Web Builder</li>
<li>No SSL Certificate</li>
<li>Limited Support</li>
</ul>
<button>Get Started</button>
</div>
<div class="price-col">
<p>Advanced</p>
<h3>$49 <span>/month</span></h3>
<ul>
<li>5 Websites</li>
<li>50GB Disk Space</li>
<li>Free Email Address</li>
<li>Basic Web Builder</li>
<li>No SSL Certificate</li>
<li>24/7 Chat Support</li>
</ul>
<button>Get Started</button>
</div>
<div class="price-col">
<p>Premium</p>
<h3>$99 <span>/month</span></h3>
<ul>
<li>50 Websites</li>
<li>100GB Disk Space</li>
<li>Free Email Address</li>
<li>Basic Web Builder</li>
<li>Free SSL Certificate</li>
<li>24/7 Chat Support</li>
</ul>
<button>Get Started</button>
</div>
</div>
</div>
</body>
</html>
4) Adding CSS :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
min-height: 100vh;
background: #0471ff;
}
.container h2{
color: #fff;
font-size: 32px;
padding: 50px 0;
text-align: center;
}
.price-row{
width: 90%;
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 25px;
}
.price-col{
background: #001d2b;
padding: 10% 15%;
border-radius: 15px;
color: #fff;
text-align: center;
}
.price-col p{
font-size: 22px;
}
.price-col h3{
font-size: 34px;
margin: 20px 0 40px;
font-weight: 500;
}
.price-col h3 span{
font-size: 16px;
}
.price-col ul{
text-align: left;
margin: 20px 0;
color: #fcfcfc;
list-style: none;
}
.price-col ul li{
margin: 15px 0;
}
.price-col ul li::before{
content: '\2022';
color: #ffffff;
font-weight: bold;
margin-right: 8px;
}
.price-col button{
width: 100%;
padding: 14px 0;
background: transparent;
color: #fff;
font-size: 15px;
border: 1px solid #ffffff;
border-radius: 8px;
margin-top: 10px;
cursor: pointer;
transition: background 0.5s;
}
.price-col button:hover{
background: #0051ff;
}
6) Check the Output :
After adding source code to the files, check the output of the project.
Here is the output of Pricing Table :
About the code -
In this code, we used html to create a structure of the Pricing Table Project using html and css using html and css to design its structure. we've created a pricing table which includes the blocks, information and value with responsive design.
About the project -
In this project, we've created the Pricing Table using html and css. Pricing Table design is very useful to add on website where you want to sell any services or products, so use the given source code to add Pricing Table using html and css.
Hope this tutorial will help you to create Pricing Table using html and css easily with source code. if you have any confusion then you can contact with us on our coding community.
Also, checkout our website for more information and join our coding community on telegram to get more knowledge about coding.
Tags:
projects