How to Create a Pricing Card in HTML and CSS Easily
Hi all, in this we are going to tell you about how to create a simple pricing card in HTML and CSS easily in just few minutes.
If you loved this, do follow our website and other social media platforms for more posts.
It is essential that beginners in web development build up the skills necessary to create and organize basic components. One of these elements is a pricing card, which is frequently used on websites to show various pricing options or subscription plans.
We'll use fundamental CSS features and often used HTML components like div, h2, h1, and button to make this pricing card. Since this project is easy enough for a beginner, you should have no problem following along.
How to Make an HTML and CSS Price Card
The below are the detailed steps to create a simple pricing card in HTML and CSS
- Create a folder. After creating the required files within, you can give this folder any name you choose.
- Make a file named index.html. The file must have the extension .html and the name index.
- Make a file named style.css. Style and its extension must be included in the file name .CSS.
Adding HTML Code:
- First of all open index.html file.
- This below code includes This code includes HTML components like div, h2, h1, and button to make this pricing card.
- Copy below provided code and paste it inside 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>Pricing Card HTML and CSS | Tial Wizards</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2 class="title">Unlock Exclusive <br> Content</h2>
<h3 class="price">$29<span>/month</span></h3>
<p class="description">Gain exclusive access to our premium content library. Explore and enjoy high-quality videos on your preferred devices.</p>
<b class="offer">Act fast! Offer ends on September 20, 2023.</b>
<a class="subscribe-button" href="#">Subscribe Now</a>
<div class="ribbon-wrap">
<div class="ribbon">Special Offer!</div>
</div>
</div>
</body>
</html>
Adding CSS code:
- First of all open style.cssfile.
- To add visual styling to the pricing card, such as color, font, border, background, etc. use the CSS file. After adding, you can view your freshly formatted pricing card by loading the webpage in your browser.
- Copy below provided code and paste it inside style.css file.
/* Importing Google font -Open+Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
width: 100%;
height: 100vh;
background: #fff6f6;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 460px;
padding: 40px;
background: #ffffff;
text-align: center;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
position: relative;
}
.container .title {
font-size: 2rem;
color: #333;
}
.container .price {
color: #FF6B6B;
font-weight: 700;
font-size: 2.2rem;
margin: 15px 0;
}
.container span {
font-size: 1.2rem;
}
.container .description {
color: #3b3b3b;
font-size: 1.1rem;
margin: 20px 0 20px;
}
.container .offer {
display: block;
color: #555;
font-size: 1rem;
margin-top: 25px;
}
.subscribe-button {
display: inline-block;
padding: 15px 0;
background-color: #FF6B6B;
color: #fff;
text-decoration: none;
border-radius: 30px;
font-size: 1.2rem;
margin-top: 40px;
width: 100%;
font-weight: 500;
transition: 0.2s ease;
}
.subscribe-button:hover {
background: #ff4d4d;
}
.ribbon-wrap {
width: 150px;
height: 150px;
position: absolute;
top: -10px;
left: -10px;
pointer-events: none;
}
.ribbon {
width: 230px;
font-size: 0.918rem;
text-align: center;
padding: 8px 0;
background: #FF6B6B;
color: #fff;
position: absolute;
transform: rotate(-45deg);
right: -17px;
top: 29%;
}
Demo:
Unlock Exclusive
Services
$16/month
You want need services, for digital marketing, chatbot development, RPA Ui Path, Financial services etc... please click on below subscribe now button
Act fast! Offer ends on . Book AppointmentConclusion:
Making your own pricing card using HTML and CSS might be a nice project to get started with if you're new to web development.
This blog post will walk you through creating an eye-catching pricing card using easy codes and techniques.
Try recreating some of the other awesome CSS cards on this website to improve your HTML and CSS skills.
If you have any doubts, please mail us or write a message by using our contact page.