In this blog post, I would like to give you a chance to download free source code of Simple Pricing Table with 3 Cards, made in HTML and CSS.

Simple Pricing Table with 3 Cards Using HTML and CSS (Free Source Code)

Byjvcodes

Do you need a simple and elegant pricing table that allows you to add it to your site easily? In this blog post, I would like to give you a chance to download free source code of Simple Pricing Table with 3 Cards, made in HTML and CSS.

That is a clean and minimalist design, which is also touch-friendly, providing an easy way to present your pricing tables.

GitHub Source: Simple Pricing Table with 3 Cards

Features

  • Easy to Customize: They can easily change the color, font and layout to suit the rest of the look of the website.
  • Responsive Design: Adapts well to any screen resolution making it suitable for use with a desktop, tablet or even mobile phones.
  • Cross-Browser Compatibility: Compatibility with browser environments such as Chrome, Firefox, and Safari is replicated effortlessly.
  • Clean Code: Clean code, good variable names, good commenting and indentation and therefore very easy to read and understand.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Pricing Table

  • Create Project Folder: The first step is to make a folder for your project’s files.
  • Create index.html: Create an HTML file for layout of pricing table
  • Create style.css: Place here CSS styles to design your pricing table used in this file.
  • Copy & Paste the Code: Free source code which will help you saving much time is given below.

HTML

Here is the HTML code for your 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>Simple Pricing Table with 3 Cards</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="pricing-plans">
        <div class="pricing-card basic">
          <div class="heading">
            <h4>STELLAR</h4>
            <p>Save 78% with coupon</p>
          </div>
          <p class="price">
            $2
            <sub>/month</sub>
          </p>
          <ul class="features">
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>3 domain name</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>15 GB of disk space</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>100GB of bandwidth</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>1 MySQL database</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>5 email accounts</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>cPanel control panel</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Free SSL certificate</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>24/7 support</strong>
            </li>
          </ul>
          <button class="cta-btn">SELECT</button>
        </div>
        <div class="pricing-card standard">
          <div class="heading">
            <h4>STELLAR PLUS</h4>
            <p>Save 77% with coupon</p>
          </div>
          <p class="price">
            $5
            <sub>/month</sub>
          </p>
          <ul class="features">
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Unlimited domain name</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>50 GB of disk space</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>500GB of bandwidth</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>10 MySQL database</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>50 email accounts</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>cPanel control panel</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Free SSL certificate</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>24/7 support</strong>
            </li>
          </ul>
          <button class="cta-btn">SELECT</button>
        </div>
        <div class="pricing-card premium">
          <div class="heading">
            <h4>STELLAR BUSINESS</h4>
            <p>Save 69% with coupon</p>
          </div>
          <p class="price">
            $10
            <sub>/month</sub>
          </p>
          <ul class="features">
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Unlimited domain name</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>100 GB of disk space</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>1TB of bandwidth</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Unlimited MySQL database</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Unlimited email accounts</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>cPanel control panel</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Free SSL certificate</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>24/7 priority support</strong>
            </li>
            <li>
              <i class="fa-solid fa-check"></i>
              <strong>Advanced security features</strong>
            </li>
          </ul>
          <button class="cta-btn">SELECT</button>
        </div>
      </section>
</body>
</html>

CSS

Here is the complete code for style.css file to style the pricing table:

* {
    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: 2px solid #585858;
    background-color: #26262620;
    box-shadow: 0 0 32px transparent;
    text-align: center;
    transform: translateY(0) scale(1);
    transition: transform 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  }
  
  .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: #ffbb00;
    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: #ffffff;
    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;
    cursor: pointer;
  }
  
  .pricing-card .cta-btn:active {
    background-color: transparent;
    color: var(--col);
    transition: all 0.3s ease;
  }

Download Source Code

Here is the Simple Pricing Table with 3 Cards Using HTML and CSS, feel free to download it from the following button. The code is open-source and may be used, modified and distributed without any regard to copyright laws. You can use it in your projects anytime!

Download Source Code

Conclusion

This Simple Pricing Table with 3 Cards will be helpful and works great, it’s professional and very user friendly.

You can use this code in your website for free, However, we require that you link back to JV Source Codes. The link back will also help get us a backlink.

If you need any kind of help or guidance regarding this pricing table code, feel free to put your queries in the comments; I shall get back to you. Additionally, do not forget to subscribe to our Channel for more useful tutorial videos.

Download JV Source Codes

Similar Posts

Here I will give you a Free Source Code for Responsive Sidebar Menu with Active Link Using HTML CSS.
| | |

Responsive Sidebar Menu with Active Link Using HTML and CSS

How to create a responsive sidebar menu with an active link effect to fit into today’s web designs? A sidebar menu enables users to explore other parts of a site without removing the main content out of sight. Being responsive, this sidebar suits any screen size, and it is therefore easily navigable on both desktop…

Sidebar Menu with Sliding Submenu
| | |

Sidebar Menu with Sliding Submenu Using HTML, CSS and JavaScript

If you are developing a web project where navigation can be divided into several sections a sidebar menu with sliding submenu is perfect. Such a menu makes a way to develop proper structure of the site, and the users will be able to find what they want. Sliding submenus enable you to hide extra features…

In this post, I will give a free source code for developing an AI Chatbot Using HTML, CSS, and JavaScript, which can be easily drawn into a project.
| | |

Responsive Ai Chatbot Using HTML, CSS and JavaScript (Free Source Code)

Artificial intelligence chatbots have become a necessity in the current websites as they assist users, give immediate response, produce conversational interactions or even make the website interactive. Developing an AI chatbot might look very complicated, but with HTML, CSS, and JavaScript, you can develop one easily. That is why, in this post, I will give…

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript
| | |

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript

A responsive side navigation bar not only helps to improve the navigation of your website but also address the issue of neatly placing links that enhance the experience of users. By using tooltips, it is possible to make the users aware of functions of each link, including when the design is compact. In this tutorial,…

Leave a Reply

Your email address will not be published. Required fields are marked *