Hello readers, Today In this article I am going to show you how to create Responsive Pricing Card Tables Using HTML, CSS & JavaScript. This type of Responsive Pricing Card Tables is used on the websites for Pricing Table.
You easily create Responsive Pricing Tables Using HTML, CSS and JavaScript then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and JavaScript, then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Responsive Pricing Card Tables
In this Pricing Card Tables, there are three cards as you can see in the preview image above. In this card, there is a total of 6 packages, and you can view each package with the help of a toggle tab which is placed to the top. When you click on the toggle button, the particular package will appear with animation, making this card pretty cool.
Watch the video tutorial to create Responsive Pricing Card Tables
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Responsive Pricing Card Tables step by step completely beautifully. So you can learn how to make these Responsive Pricing Card Tables. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Pricing Card Tables Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Neumorphism Analog Clock Using HTML, CSS & JS
- 30 Free CSS Login Forms For Your Website 2021
- How To Make Portfolio Website Using HTML & CSS
Pricing Card Tables | Source Codes
You have to create HTML, CSS & JS File For this Pricing Card. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pricing Card Tables</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Our Pricing</h1>
<div class="toggle">
<label>Annually </label>
<div class="toggle-btn">
<input type="checkbox" class="checkbox" id="checkbox" />
<label class="sub" id="sub" for="checkbox">
<div class="circle"></div>
</label>
</div>
<label> Monthly</label>
</div>
</header>
<div class="cards">
<div class="card shadow">
<ul>
<li class="pack">Basic</li>
<li id="basic" class="price bottom-bar">$199.99</li>
<li class="bottom-bar">500 GB Storage</li>
<li class="bottom-bar">2 Users Allowed</li>
<li class="bottom-bar">Send up to 3 GB</li>
<li><button class="btn">Learn More</button></li>
</ul>
</div>
<div class="card active">
<ul>
<li class="pack">Professional</li>
<li id="professional" class="price bottom-bar">$249.99</li>
<li class="bottom-bar">1 TB Storage</li>
<li class="bottom-bar">5 Users Allowed</li>
<li class="bottom-bar">Send up to 10 GB</li>
<li><button class="btn active-btn">Learn More</button></li>
</ul>
</div>
<div class="card shadow">
<ul>
<li class="pack">Master</li>
<li id="master" class="price bottom-bar">$399.99</li>
<li class="bottom-bar">2 TB Storage</li>
<li class="bottom-bar">10 Users Allowed</li>
<li class="bottom-bar">Send up to 20 GB</li>
<li><button class="btn">Learn More</button></li>
</ul>
</div>
</div>
<!---JS CDN Link--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!---Custom CDN Link--->
<script src="js.js"></script>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 15px;
}
body {
background: #f7f7ff;
font-family: "Montserrat", sans-serif;
width: 80%;
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
header {
color: hsl(233, 13%, 49%);
margin: 3.3rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.toggle {
margin-top: 2rem;
color: hsl(234, 14%, 74%);
display: flex;
align-items: center;
}
.toggle-btn {
margin: 0 1rem;
}
.checkbox {
display: none;
}
.sub {
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
display: flex;
justify-content: flex-start;
align-items: center;
/* height: 25px;
width: 50px; */
height: 1.6rem;
width: 3.3rem;
border-radius: 1.6rem;
padding: 0.3rem;
}
.circle {
background-color: #fff;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
}
.checkbox:checked + .sub {
justify-content: flex-end;
}
.cards {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.card {
background: #fff;
color: hsl(233, 13%, 49%);
border-radius: 0.8rem;
}
.cards .card.active {
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
color: #fff;
display: flex;
align-items: center;
transform: scale(1.1);
z-index: 1;
}
ul {
margin: 2.6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
ul li {
list-style-type: none;
display: flex;
justify-content: center;
width: 100%;
padding: 1rem 0;
}
ul li.price {
font-size: 3rem;
color: hsl(232, 13%, 33%);
padding-bottom: 2rem;
}
.shadow {
box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}
.card.active .price {
color: #fff;
}
.btn {
margin-top: 1rem;
height: 2.6rem;
width: 13.3rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
color: #fff;
outline: none;
border: 0;
font-weight: bold;
}
.active-btn {
background: #fff;
color: hsl(237, 63%, 64%);
}
.bottom-bar {
border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
.card.active .bottom-bar {
border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
.pack {
font-size: 1.1rem;
}
@media (max-width: 280px) {
ul {
margin: 1rem;
}
h1 {
font-size: 1.2rem;
}
.toggle {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 80px;
}
.cards {
margin: 0;
display: flex;
flex-direction: column;
}
.card {
transform: scale(0.8);
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(0.8);
}
}
@media (min-width: 280px) and (max-width: 320px) {
ul {
margin: 20px;
}
.cards {
display: flex;
flex-direction: column;
}
.card {
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 320px) and (max-width: 414px) {
.cards {
display: flex;
flex-direction: column;
}
.card {
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 414px) and (max-width: 768px) {
.card {
margin-bottom: 1rem;
margin-right: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 768px) and (max-width: 1046px) {
.cards {
display: flex;
}
.card {
margin-bottom: 1rem;
margin-right: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
const checkbox = document.getElementById("checkbox");
const professional = document.getElementById("professional");
const master = document.getElementById("master");
const basic = document.getElementById("basic");
checkbox.addEventListener("click", () => {
basic.textContent = basic.textContent === "$199.99" ? "$19.99" : "$199.99";
professional.textContent =
professional.textContent === "$249.99" ? "$24.99 " : "$249.99";
master.textContent = master.textContent === "$399.99" ? "$39.99" : "$399.99";
});
now you’ve successfully created this Responsive Pricing Card Tables Using HTML, CSS & JavaScript . If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
