Learn how to create a stunning and eye-catching pricing table for your website using HTML, CSS, and Javascript. Follow this step-by-step guide with code snippets and impress your audience with your web design skills.
Table of Contents
A pricing table is an essential element of any website that offers products or services for sale. It provides a clear and concise comparison of the different options available to the customer, allowing them to make an informed decision about which option best suits their needs.
Having an eye-catching pricing table is important because it can have a big impact on the overall look and feel of your website. A stylish pricing table can make your website stand out from the crowd and give a professional and polished look to your online presence.
Let's start making an amazing responsive pricing table using HTML, CSS and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before you start creating your eye-catching pricing table, you need to have a basic understanding of HTML, CSS, and JavaScript. HTML is used to structure the content on a web page, CSS is used to style the content, and JavaScript is used to add functionality.
You will also need a code editor, such as Visual Studio Code or Sublime Text, to write your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our pricing table.
The code starts with a declaration of the document type and the language (English). Then, it defines the meta information about the document in the head section.
In the head section, the following are included:
- A character encoding declaration (UTF-8)
- A meta tag to specify compatibility with different browsers
- A meta tag to set the viewport
- A link tag to import the Font Awesome library for icons
- A link tag to import a stylesheet file
- A title for the document
In the body section, the pricing table is defined using HTML elements such as div, h3, h4, ul, and a. The Font Awesome library is used to display icons in the table.
The pricing table contains three cards, each card represents a pricing plan. Each card includes the name of the plan, its price, a list of features, and a button to order it. The features are listed using an unordered list (ul) element, and each feature is represented by a list item (li) element. A green check mark icon is used to indicate that a feature is included, and a red "X" icon is used to indicate that it is not included.
Finally, a script file is imported at the end of the code to provide interactivity to the pricing table.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our pricing table using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the pricing table is in place, the next step is to add styling to the pricing table using CSS. CSS allows us to control the visual appearance of the pricing table, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our pricing table. We will set the default font to "Poppins" and sets a dark background color.
This will give our pricing table an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #232427;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1200px;
padding: 100px 0 50px;
}
.card {
position: relative;
min-width: 320px;
height: 500px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1),
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin: 30px;
}
.card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #2a2b2f;
border-radius: 15px;
border: 2px solid #1e1f23;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.4s, box-shadow 0.4s;
}
.card:hover .box {
transform: translateY(-50px);
box-shadow: 0 40px 70px rgba(0, 0, 0, 0.5);
}
.content {
padding: 20px;
text-align: center;
}
.icon {
position: relative;
width: 80px;
height: 80px;
background: #f00;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-bottom: 10px;
}
.icon .fa {
color: #fff;
font-size: 2em;
}
.content h3 {
font-size: 1.8em;
color: #fff;
font-weight: 300;
}
.content h4 {
color: #fff;
font-size: 3em;
font-weight: 700;
}
.content h4 sup {
font-size: 0.75em;
font-weight: 300;
}
.content ul {
position: relative;
}
.content ul li {
list-style: none;
color: #fff;
margin: 5px 0;
}
.fa-check {
color: #0f0;
margin-right: 10px;
}
.fa-times {
color: #f00;
margin-right: 10px;
}
.content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #f00;
margin-top: 15px;
border-radius: 20px;
text-decoration: none;
color: #fff;
font-weight: 400;
}
.card:nth-child(1) .content a,
.card:nth-child(1) .content .icon {
background: #2196f3;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.card:nth-child(2) .content a,
.card:nth-child(2) .content .icon {
background: #e91e63;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.card:nth-child(3) .content a,
.card:nth-child(3) .content .icon {
background: #97dc47;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.toggle {
position: absolute;
top: 20px;
left: calc(50% - 30px);
width: 60px;
height: 60px;
background: #fff;
cursor: pointer;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
.toggle::before {
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 24px;
content: "\f185";
}
body.light .toggle {
background: #232427;
color: #fff;
}
body.light .toggle::before {
content: "\f186";
}
body.light {
background: #ebf5fc;
}
body.light .container .card {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03),
inset -10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 10px rgba(0, 0, 0, 0.03),
-10px -10px 15px rgba(255, 255, 255, 0.5);
}
body.light .container .card .box {
background: #ebf5fc;
border: none;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
body.light .container .card:hover .box {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
body.light .container .card .box .content h3,
body.light .container .card .box .content h4,
body.light .container .card .box .content ul li {
color: #32a3b1;
} Step 3 (JavaScript Code):
The final step in creating a pricing table using HTML, CSS, and JavaScript is to add interactivity to the website using JavaScript. JavaScript allows us to create dynamic and interactive elements on the website, such as dark mode, modals, and image sliders.
By adding interactivity to the website with JavaScript, we are providing an engaging and interactive experience for users, making the website more usable and enjoyable. This step is essential in creating a website that encourages user engagement and ultimately drives more business to the website.
Finally, we need to create a toggle switch that changes the style of the page from light to dark mode and vice versa. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const body = document.querySelector('body');
const toggle = document.querySelector('.toggle');
toggle.addEventListener('click', () => {
body.classList.toggle('light');
});Final Output:
Conclusion:
In conclusion, creating an eye-catching pricing table with HTML, CSS, and Javascript is not as difficult as it may seem. By following the steps outlined in this article, you should now have a clear understanding of how to create your own pricing table from scratch. Whether you are a web designer or developer, having a good understanding of HTML, CSS, and Javascript is essential in today's digital landscape. By incorporating these skills into your workflow, you can create a wide range of dynamic and engaging web content that will help you stand out from the crowd.
In the end, it's all about finding the right balance between form and function. A pricing table should not only look good but also provide all the information a potential customer needs to make an informed decision. With this in mind, always keep the user experience at the forefront of your mind as you work on your pricing table.
We hope that this article has helped you learn something new and has given you the confidence to create your own pricing table. If you have any questions or comments, please feel free to reach out. Good luck, and happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
