How to create pricing table using HTML and CSS
In this blog post, I will show you how to create pricing table using HTML and CSS. A pricing table is a common element in many websites that offer different plans or services for customers to choose from. A well-designed pricing table can help you showcase your features, benefits, and prices in a clear and attractive way.
To create a pricing table, we will use the following HTML structure:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS pricing Table</title>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="everything">
<div class="white-block">
<p class="dtwo">FREE</p>
<div class="texts">
<p class="price">0</p>
<p class="dollars">$</p>
<p class="permo">/mo.</p>
</div>
<p class="projects">1 PROJECT</p>
<div class="select-button">
<p>SELECT</p>
</div>
</div>
<div class="blue-block">
<h1>STARTER<h1>
<div class="texting">
<p class="pricer">15</p>
<p class="dollarz">$</p>
<p class="permonth">/mo.</p>
</div>
<p class="projectors">5 PROJECTS</p>
<div class="select">
<p>SELECT</p>
</div>
</div>
<div class="white-block one">
<p class="done">PROFESSIONAL</p>
<div class="text">
<p class="pricing">30</p>
<p class="dollar">$</p>
<p class="mo">/mo.</p>
<p class="project">UNLIMITED PROJECTS</p>
</div>
<div class="select-buttons">
<p>SELECT</p>
</div>
</div>
</div>
</body>
</html>
This HTML code creates a container with the class “pricing-table” that holds three child elements with the class “plan”. Each plan has a name, a price, a list of features, and a button to sign up. You can add or remove plans as you wish, but make sure they have the same structure and class names.
Next, we will style the pricing table using CSS. Here is the CSS code:
CSS
body{
background-color: #293847;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
.everything{
float: right;
position: relative;
}
.white-block{
width: 250px;
height: 420px;
background-color: white;
margin: auto;
float: left;
position: relative;
top: 15px;
}
.blue-block{
height: 450px;
width: 270px;
background-color:#00A9FF;
margin: auto;
float: left;
background: linear-gradient(#06D4ED 10%, #00A9FF,#116C9A 125%);
}
.select-button{
width: 150px;
height: 40px;
border: 1.7px solid #06D4ED;
border-radius: 7px;
margin: auto;
margin-top: 30px;
}
.select-button p{
text-align: center;
line-height: 15px;
color: #00A9FF;
font-size: .75em;
letter-spacing: 1.5px;
}
.white-block p{
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
.blue-block p{
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
.blue-block h1{
font-family: 'Oswald', sans-serif;
font-size: 1.9em;
color: white;
text-align: center;
position: relative;
top: 5px;
}
.dtwo{
font-size: 1.7em;
text-align: center;
color: #00A9FF;
}
.text p{
color: #99BAD2;
opacity: .5;
}
.texts p{
color: #99BAD2;
opacity: .5;
}
.price{
font-size: 6em;
text-align: center;
position: relative;
top: -50px;
}
.dollars{
font-size: 3em;
position: relative;
top: -300px;
left: 60px;
}
.permo{
font-size: 1.5em;
position: relative;
left: 150px;
top: -320px;
}
.projects{
font-size: 1em;
width: 200px;
color: #99BAD2;
opacity: .5;
text-align: center;
margin: auto;
margin-top: -300px;
}
.texting p{
color: white;
}
.pricer{
font-size: 3.7em;
position: relative;
top: -80px;
}
.dollarz{
font-size: 1.5em;
position: relative;
left: -70px;
top: -370px;
}
.permonth{
font-size:1em;
position: relative;
top: -375px;
left: 75px;
}
.projectors{
font-size: .5em;
width: 400px;
color: white;
margin: auto;
margin-top: -350px;
margin-left: -65px;
}
.select{
width: 150px;
height: 40px;
background-color: #06D4ED;
border-radius: 7px;
margin: auto;
margin-top: 30px;
border: 1.5px solid #00A9FF;
}
.select p{
font-size: .4em;
color: #00A9FF;
line-height: 15px;
letter-spacing: 1.5px;
}
.one{
float: left;
}
.done{
text-align: center;
font-size: 1.7em;
color: #00A9FF;
}
.pricing{
font-size: 6em;
position: relative;
top: -50px;
left: 70px;
}
.dollar{
font-size: 3em;
position: relative;
top: -300px;
left: 40px;
}
.mo{
font-size: 1.5em;
position: relative;
top: -320px;
left: 170px;
}
.project{
font-size: 1em;
width: 500px;
margin: auto;
margin-top: -300px;
margin-left: 60px;
}
.select-buttons{
width: 150px;
height: 40px;
border: 1.7px solid #06D4ED;
border-radius: 7px;
margin: auto;
margin-top: 30px;
}
.select-buttons p{
color: #00A9FF;
opacity: 1;
text-align: center;
line-height: 15px;
font-size: .7em;
letter-spacing: 1.5px;
}
For More Tutorials Please Click Here