Responsive Pricing Plan with Ribbon

A pricing table or price plan is a special section of a website that displays different levels of services or products, usually with a comparison of features and prices. Let's say you're buying a gym membership or a subscription to a streaming service. When you visit those company websites, you'll see some rectangular-shaped elements that list different packages — like Basic, Premium, or VIP. Each of these packages has its own benefits and prices. You can select the one that suits you best. Through a price list, a potential customer can quickly understand what they're getting for their money. This eliminates confusion and potential disappointment for the customer and allows them to continue shopping with confidence. Today, we're going to share with you the source code for a responsive pricing table or price plan design with a ribbon effect. Before that, take a look at the video tutorial below.

Video Tutorial:

We hope you have watched the above tutorial on responsive pricing table with ribbon. A pricing table or price plan displays the package or service tiers side by side, highlighting the most popular or best-priced option to guide users toward it. In today’s fast-paced digital world, a well-designed pricing table is essential to grab users’ attention. It can be a powerful tool to help them make an informed decision. It can also increase conversion rates, convert visitors into customers, etc. Websites that offer tiered services or subscription-based products use this pricing table or price plan UI. Many famous websites in the world use this particular element. Some of them are Dropbox, Netflix, Spotify, Coursera, Udemy, etc.

Our pricing table or price plan snippet has three tiers or packages. These are standard, premium, and ultimate. These package names have been placed diagonally in each pricing table like a ribbon. Then the price per month is mentioned. The features of each tier are mentioned one below the other. Based on the price, which benefits a user will get and which will not be available are indicated with right and cross signs. In today's digital age, we use mobile phones more than computers. Therefore, a user visits websites more from mobile phones or small devices than computers. So, it is very important for the website to be fully responsive. Keeping in mind the importance of responsive web design, our snippet has been designed to be mobile-friendly.

You May Also Like:

Responsive Pricing Plan with Ribbon [ Source Code ]:

To create this responsive web design snippet, you need to create an HTML and then a CSS file. Then copy the code from the code box below and paste it into your files. Save the code and test it in your favorite browser. If the snippet works fine then it is fine but if it is not working properly then you can download the source from the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive pricing table</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="pricing-container"> 
    <!-- Price Box 1 -->
    <div class="pricing-box">
      <div class="ribbon">STANDARD</div>
      <div class="price">$9.99<span>/mon</span></div>
      <ul class="features">
        <li><span class="check">✓</span> 50 GB Bandwidth</li>
        <li><span class="check">✓</span> Financial Analyzing</li>
        <li><span class="cross">✕</span> 24-hour Support</li>
        <li><span class="cross">✕</span> Customer Management</li>
      </ul>
      <button class="btn">Select Plan</button>
    </div>

    <!-- Price Box 2 -->
    <div class="pricing-box">
      <div class="ribbon">PREMIUM</div>
      <div class="price">$29.99<span>/mon</span></div>
      <ul class="features">
        <li><span class="check">✓</span> 100 GB Bandwidth</li>
        <li><span class="check">✓</span> Advanced Analytics</li>
        <li><span class="check">✓</span> 24-hour Support</li>
        <li><span class="cross">✕</span> Customer Management</li>
      </ul>
      <button class="btn">Select Plan</button>
    </div>

    <!-- Price Box 3 -->
    <div class="pricing-box">
      <div class="ribbon">ULTIMATE</div>
      <div class="price">$49.99<span>/mon</span></div>
      <ul class="features">
        <li><span class="check">✓</span> Unlimited Bandwidth</li>
        <li><span class="check">✓</span> Advanced Tools</li>
        <li><span class="check">✓</span> 24-hour Support</li>
        <li><span class="check">✓</span> Dedicated Account Manager</li>
      </ul>
      <button class="btn">Select Plan</button>
    </div>
  </div>
</body>
</html>

ADD CSS:

body {
	background: #5046b9;
	font-family: "Montserrat", serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}
.pricing-container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	width: 90%;
}
.pricing-box {
	position: relative;
	width: 300px;
	padding: 20px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	text-align: center;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
}
.pricing-box:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.ribbon {
	position: absolute;
	top: 20px;
	left: -40px;
	background: linear-gradient(90deg, #ff0080, #ff8c00);
	color: #fff;
	padding: 10px 40px;
	font-size: 14px;
	font-weight: bold;
	transform: rotate(-45deg);
	z-index: 2;
}
.price {
	font-size: 2rem;
	font-weight: bold;
	color: #333;
	margin: 20px 0;
}
.price span {
	font-size: 1rem;
	color: #888;
}
.features {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}
.features li {
	margin: 45px 0;
	font-size: 1rem;
	color: #333;
}
.features li .check {
	color: #28a745;
	font-weight: bold;
	margin-right: 5px;
}
.features li .cross {
	color: #dc3545;
	font-weight: bold;
	margin-right: 5px;
}
.btn {
	padding: 10px 20px;
	background: linear-gradient(90deg, #6a11cb, #2575fc);
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
}
.btn:hover {
	background: linear-gradient(90deg, #2575fc, #6a11cb);
}
/* Responsive Design */

@media (max-width: 768px) {
	body {
		height: auto;
	}
	.pricing-box {
		width: 100%;
	}
}
@media (max-width: 480px) {
	body {
		height: auto;
	}
	.price {
		font-size: 1.8rem;
	}
	.features li {
		font-size: 0.9rem;
	}
	.btn {
		font-size: 0.9rem;
	}
}

In today’s competitive business world, a pricing table is more than just a feature. There is no substitute for a pricing table or price plan to present a company’s offerings in a clear, attractive way. Pricing tables play a very important role in significantly enhancing the functionality of a website and making decision-making easier for users. Hope you have collected today’s responsive web design snippets. To get more such snippets, click on the Load More button on the homepage of our website. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Pricing Plan with Ribbon [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Pricing Plan with Ribbon

Video Tutorial:

Responsive Pricing Plan with Ribbon [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form