Responsive 3 cards – transparent pricing table using only html and css is an attractive design solution that improves the navigation.

3 Cards Responsive Transparent Pricing Table Using HTML and CSS (Free Source Code)

Byjvcodes

To develop an attractive and efficient professional pricing table is crucial while marketing services or products. Responsive 3 cards – transparent pricing table using only html and css is an attractive design solution that improves the navigation.

Here in this tutorial, I will offer you the free source code that you can use to create this elegant pricing table.

GitHub Source: Transparent Pricing Table

Features

Here are the standout features of this pricing table:

  • Easy to Customize: You can easily edit the texts, colors or layout in order to suit your design purpose.
  • Responsive: Adjusts to the size of the screen automatically hence being able to display content well from a device to another.
  • Transparent Cards: I was able to assign features of transparent cards that provide the look of a modern glass to the graphic interface.
  • Compatibility: Seamless compatibility with multiple browsers, including, Chrome, Firefox, and Edge.
  • Clean Code: Integration with other systems is flexible due to the use of clean, organized, and easy to understand coding style.

Technologies Used

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

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Responsive Pricing Table

Follow these simple steps to create your own 3 Cards Transparent Pricing Table:

  • Create Project Folder: Create a folder where you will be keeping and storing all your project documents.
  • Create index.html: Include an HTML file to create the structure of the pricing table.
  • Create style.css: Include a CSS file and apply it on your pricing table to apply transparency.
  • Copy & Paste the Code Given Below: With the help of the provided code, it is very easy to implement the pricing table.

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>Transparent Pricing Table</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="grid">
            <div class="card">
                <h2 class="card_title">Student</h2>
                <p class="pricing">20$<span class="small">/per month</span></p>
                <p>Save $9</p>
                <hr>
                <ul class="features">
                    <li>One account</li>
                    <li>Unlimited songs</li>
                    <li>Customized playlist</li>
                </ul>
                <a href="#" class="cta_btn">Buy Now</a>
            </div>
            <div class="card">
                <h2 class="card_title">Personal</h2>
                <p class="pricing">39$<span class="small">/per month</span></p>
                <p>Save $15</p>
                <hr>
                <ul class="features">
                    <li>One account</li>
                    <li>Unlimited songs</li>
                    <li>Customized playlist</li>
                </ul>
                 <a href="#" class="cta_btn">Buy Now</a>
            </div>
            <div class="card">
                <h2 class="card_title">Family</h2>
                <p class="pricing">60$<span class="small">/per month</span></p>
                <p>Save $25</p>
                <hr>
                <ul class="features">
                    <li>Six account</li>
                    <li>Unlimited songs</li>
                    <li>Customized playlist</li>
                </ul>
                 <a href="#" class="cta_btn">Buy Now</a>
            </div>
        </div>
    </div>
</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;
}

body {
    min-height: 100vh;
    background: url("https://static.vecteezy.com/system/resources/previews/032/302/289/large_2x/a-beautiful-house-with-lush-green-lawn-and-trees-ai-generated-free-photo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-family: Roboto;
    font-size: 16px;
}

.container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4%;
    padding: 12% 0;
}

.card {
    padding: 20px;
    background: rgba(11, 42, 128, 0.2);
    border: 1px solid rgba(1, 13, 121, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(153, 49, 49, 0.3);
}

.card_title {
    font-weight: normal;
    font-size: 36px;
    margin-bottom: 20px;
}

.pricing {
    font-weight: normal;
    font-size: 96px;
}

.pricing .small {
    font-size: 16px;
}

hr {
    margin-top: 70px;
}

.features {
    margin: 40px 0;
    list-style-position: inside;
}

.features li {
    padding-bottom: 10px;
}

a.cta_btn {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: rgba(21, 23, 24, 0.7);
    border-radius: 29px;
    padding: 20px 0;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    transition: background .3s ease;
}

a.cta_btn:hover {
    background: #ff4800;
}
.link {
    position: fixed;
    background-color: #D12322;
    padding: 23px 40px;
    right: -99px;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    transform: rotate(-90deg);
    font-size: 18px;
    font-weight: 500;
    color: #FFF;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .1s ease-in-out;
}

.link i {
    padding-left: 7px;
}

.link:hover {
    text-decoration: underline;
    background-color: black;
}
@media only screen and (max-width: 1024px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 2%;

    }
}

@media only screen and (max-width: 425px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 2%;
        padding-bottom: 25%;
    }

    .container {
        padding: 0 1rem;
    }

    body {
        font-size: 14px;
    }

    .card {
        padding: 30px;
    }

    .card_title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .pricing {
        font-size: 52px;
    }

    hr {
        margin-top: 50px;
    }

    a.cta_btn {
        font-size: 11px;
    }
}

Download Source Code

Here, you will find the complete source code of the 3 Cards Responsive Transparent Pricing Table Using HTML and CSS along with the copyright-free download links. Just click the button below and start creating your pricing table right now!

Download Source Code

Conclusion

Make your website new and fascinating by using this 3 Cards Responsive Transparent Pricing Table. Please remember to give credit by linking back for the support of more free information at JV Source Codes.

If you face any problem with it, do not hesitate to post your comment below. I will perform my best to answer your questions as soon as I am able. So, do not forget to subscribe to our channel for other interesting videos.

Download JV Source Codes

Similar Posts

Simple Responsive Navigation Menu Bar
| | |

Simple Responsive Navigation Menu Bar in HTML and CSS

Welcome to this tutorial if you are searching the quick and effective method to understanding how to design a responsive navigation bar on a website. In this article, I’m going to give you a Simple Responsive Navigation Menu Bar in HTML, CSS, for your portfolio project. GitHub Source: Simple Responsive Navigation Menu Bar This is…

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

Full screen Overlay Navigation Menu Bar
| | |

Full screen Overlay Navigation Menu Bar in HTML and CSS

A full-screen overlay navigation menu is one of the trendy and effective methods to improve the usability of your site. It covers the entire area of the screen and has a smooth scroll indicating different sections of a page. Here in this article, I will give you the source code for free to add a…

Leave a Reply

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