As a beginner in web development, it is essential to learn how to design and structure basic components. One of these components is a pricing card, commonly used on websites to display different subscription plans or pricing options.
In this blog post, I will provide a step-by-step guide on how to create a simple pricing card using HTML and CSS. This guide is tailored towards beginners, as it is easy to follow and understand. Throughout the post, you will learn about various HTML tags and CSS properties that will help you create a visually appealing pricing card.
To create this pricing card, we will use commonly used HTML elements like div, h2, h1, and button, as well as basic CSS properties. This project is beginner-friendly, so you should have no trouble following along.
Steps To Create Pricing Card in HTML and CSS
To create a pricing card using HTML and CSS, follow these simple steps:
- Create a folder. You can name this folder whatever you like, and then create the necessary files inside it.
- Create anÂ
index.htmlfile. The file name must be index and its extension .html. - Create aÂ
style.cssfile. The file name must be style and its extension .css.
To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with different elements like h1, h2, div, p, etc. to create a pricing card.
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<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 | CodingNepal</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>
Next, add the following CSS codes to your style.css file to apply visual styling to the pricing card like color, font, border, background, etc. Once added, you can load the web page in your browser to view your newly styled pricing card.
/* 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%;
}
Conclusion and Final words
If you’re a beginner in web development, creating your own pricing card with HTML and CSS can be a great project to get started with. This blog post provides simple steps and codes to help you create an attractive pricing card.
To enhance your skills in HTML and CSS, you can try to recreate other cool CSS cards available on this website. In case you encounter any difficulties, feel free to download the source code files for this project for free by clicking the Download button. A zip file will be downloaded to your device.
