Introduction of Responsive Pricing Table HTML
Hello! Everyone, we are again here to provide you with our new and latest project. Today’s is a Responsive Pricing Table HTML that was made with the help of HTML and CSS. In this card, there will be three cards the first is for the basic price, the second is for the the basic price, the second is for the moderate price, and the last is for the high price, and services will be provided according to price. When the user hovers on one particular card, the border of the card will show. Their scale will also increase by hovering. Here we are providing services for web developers and businessmen’s to experience better service according to their plan.
Let’s start making this project using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). This project is going to be so useful, as you can use it to provide your services. Sell your product by providing different rates for different quality of products. This will not be very complicated, as we have used here the basic concepts of HTML and CSS. Everyone can understand it without any doubt, and if you have any doubt. You can contact us through the details given in the footer of the page.
HTML (Hypertext Markup Language)
First, we will make the structure of the page with the help of HTML. (the Hyper markup language used to make the structure of any web page on a website). In this, we will first give the title of the project in the title tag. (which is used to write the title of the project). Then we will move toward the main body of code. In this parent div, we will make three child divs for holding the card data or information that can be used by the user.
In this child div, we will write the level of the card in the h3 tag (used to write the heading). Some information about the plan in the p tag (used to write the paragraph). At the end, we will make a button in the button tag. (which is used to make a button for any action performed by the user), and in the button, we will write select.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="pricing-plans">
<div class="pricing-card basic">
<div class="heading">
<h4>BASIC</h4>
<p>for small websites or blogs</p>
</div>
<p class="price">
$2
<sub>/month</sub>
</p>
<ul class="features">
<li>
<i class="fa-solid fa-check"></i>
<strong>1 domain</strong> name
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>10 GB</strong> of disk space
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>100GB </strong>of bandwidth
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>1 MySQL</strong> database
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>5 email</strong> accounts
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>cPanel</strong> control panel
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>Free SSL</strong> certificate
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>24/7</strong> support
</li>
</ul>
<button class="cta-btn">SELECT</button>
</div>
<div class="pricing-card standard">
<div class="heading">
<h4>STANDARD</h4>
<p>for medium-sized businesses</p>
</div>
<p class="price">
$5
<sub>/month</sub>
</p>
<ul class="features">
<li>
<i class="fa-solid fa-check"></i>
<strong>Unlimited</strong> domain name
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>50 GB</strong> of disk space
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>500GB </strong>of bandwidth
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>10 MySQL</strong> database
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>50 email</strong> accounts
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>cPanel</strong> control panel
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>Free SSL</strong> certificate
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>24/7</strong> support
</li>
</ul>
<button class="cta-btn">SELECT</button>
</div>
<div class="pricing-card premium">
<div class="heading">
<h4>PREMIUM</h4>
<p>for small businesses</p>
</div>
<p class="price">
$10
<sub>/month</sub>
</p>
<ul class="features">
<li>
<i class="fa-solid fa-check"></i>
<strong>Unlimited</strong> domain name
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>100 GB</strong> of disk space
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>1TB </strong>of bandwidth
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>Unlimited MySQL</strong> database
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>Unlimited email</strong> accounts
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>cPanel</strong> control panel
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>Free SSL</strong> certificate
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>24/7 priority</strong> support
</li>
<li>
<i class="fa-solid fa-check"></i>
<strong>Advanced</strong> security features
</li>
</ul>
<button class="cta-btn">SELECT</button>
</div>
</section>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of the project, we will now make it designing and responsive using CSS. In this, we will make the background black and take the parent div to the center of the screen. We will also take all the cards in one row using the display flex property.
Now in the card, we will give the size and position to the card. We will apply style to the elements of the card, like the heading paragraph and button, like color, size, font size, and gap between the elements. We will make the card curve by giving the border radius property and also using the hovering effect. When the user hovers on that particular card, the border of the card will be visible. Its size will increase by using the scale property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: "Open Sans", sans-serif;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background-color: #171717;
}
.pricing-plans {
gap: 32px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
width: 100%;
padding: 64px;
}
.pricing-card {
--col: #e4e4e7;
position: relative;
min-width: 360px;
padding: 32px;
padding-bottom: 96px;
border-radius: 4px;
border: 1px solid #262626;
background-color: #26262620;
box-shadow: 0 0 32px transparent;
text-align: center;
}
.pricing-card.basic {
--col: #0891b2;
}
.pricing-card.standard {
--col: #059669;
}
.pricing-card.premium {
--col: #c026d3;
}
.pricing-card:hover {
border-color: var(--col);
background-color: #26262680;
box-shadow: 0 0 32px #171717;
transform: translateY(-16px) scale(1.02);
transition: all 0.5s ease;
}
.pricing-card > *:not(:last-child) {
margin-bottom: 32px;
}
.pricing-card .heading h4 {
padding-bottom: 12px;
color: var(--col);
font-size: 24px;
font-weight: normal;
}
.pricing-card .heading p {
color: #a3a3a3;
font-size: 14px;
font-weight: lighter;
}
.pricing-card .price {
position: relative;
color: var(--col);
font-size: 60px;
font-weight: bold;
}
.pricing-card .price sub {
position: absolute;
bottom: 14px;
color: #a3a3a3;
font-size: 14px;
font-weight: lighter;
}
.pricing-card .features li {
padding-bottom: 16px;
color: #a3a3a3;
font-size: 16px;
font-weight: lighter;
text-align: left;
}
.pricing-card .features li i,
.pricing-card .features li strong {
color: #e4e4e7;
font-size: 16px;
text-align: left;
}
.pricing-card .features li strong {
padding-left: 24px;
}
.pricing-card .cta-btn {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
width: 200px;
padding: 12px;
border-radius: 4px;
border: 1px solid var(--col);
background-color: var(--col);
color: #e4e4e7;
font-size: 20px;
font-weight: bold;
}
.pricing-card .cta-btn:active {
background-color: transparent;
color: var(--col);
transition: all 0.3s ease;
}
Output of Responsive Pricing Table HTML
Now, finally, we have made this Responsive Pricing Table HTML with the help of the simple and easy code of HTML and CSS by following their code step by step without any problem. I hope this project is going to be so helpful for everyone. You can make such a project by taking ideas from there to increase your knowledge about coding. If you want the source code, then click on the button given below.
For more explanation, click on the link to watch the full video.
You can also check:
