Creating a pricing plan card using HTML and CSS can be a useful way to present different options to users on a website or application. It allows you to clearly display the features and benefits of each plan, as well as the cost, in a visually appealing and easy-to-understand format.
To create a pricing plan card using HTML and CSS, you will need to use a combination of semantic HTML tags and styles defined in a CSS file or within a style element in the HTML document.
First, you will need to decide on the layout and design of your pricing plan card. This may include choosing the number of columns to use, the overall width and height of the card, and any background colors or images you want to use.
Next, you will need to create the HTML structure for the card. This may include using header tags to define the name of each plan, list tags to present the features and benefits of each plan, and semantic tags such as article or section to group related content.
Once you have the basic HTML structure in place, you can use CSS to style the card. This may include defining font sizes and colors, setting widths and heights for different elements, and using CSS3 features such as rounded corners and box shadows to create a polished, modern look. It’s important to keep in mind that good web design practices, such as using semantic HTML tags and keeping your CSS organized and easy to understand, will make it easier to maintain and update your pricing plan card in the future.
Video Tutorial of How To Create Pricing Plan Card Using HTML and CSS
To create this program (pricing plan card). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css" />
<title>Pricing Card</title>
</head>
<body>
<div class="container">
<div class="cards">
<div class="card">
<div class="top">
<div class="price-title">
<h2>Basic Plan</h2>
</div>
<div class="price-tag">
<h2>
<sup class="fs-22">$</sup>09<sup class="fs-16">/month</sup>
</h2>
</div>
</div>
<div class="bottom">
<ul class="list">
<li><i>✅</i>2 App and project</li>
<li><i>✅</i>400 Gb Storage</li>
<li><i>✅</i>Free cusotm domain</li>
<li><i>✅</i>Chat Support</li>
<li><i>❌</i>No transaction fee</li>
<li><i>❌</i>Unlimited Storage</li>
</ul>
<div class="button">
<a href="#">Choose Plan</a>
</div>
</div>
</div>
<div class="card">
<div class="top change-border">
<div class="price-title">
<h2>Basic Plan</h2>
</div>
<div class="price-tag">
<h2>
<sup class="fs-22">$</sup>09<sup class="fs-16">/month</sup>
</h2>
</div>
</div>
<div class="bottom change-border">
<ul class="list">
<li><i>✅</i>2 App and project</li>
<li><i>✅</i>400 Gb Storage</li>
<li><i>✅</i>Free cusotm domain</li>
<li><i>✅</i>Chat Support</li>
<li><i>❌</i>No transaction fee</li>
<li><i>❌</i>Unlimited Storage</li>
</ul>
<div class="button">
<a href="#" class="secondary-btn">Choose Plan</a>
</div>
</div>
</div>
<div class="card">
<div class="top">
<div class="price-title">
<h2>Basic Plan</h2>
</div>
<div class="price-tag">
<h2>
<sup class="fs-22">$</sup>09<sup class="fs-16">/month</sup>
</h2>
</div>
</div>
<div class="bottom">
<ul class="list">
<li><i>✅lt;/i>2 App and project</li>
<li><i>✅lt;/i>400 Gb Storage</li>
<li><i>✅lt;/i>Free cusotm domain</li>
<li><i>✅lt;/i>Chat Support</li>
<li><i>❌</i>No transaction fee</li>
<li><i>❌</i>Unlimited Storage</li>
</ul>
<div class="button">
<a href="#">Choose Plan</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
*,::before,::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
.fs-16{
font-size: 16px;
}
.fs-22{
font-size: 22px;
}
.container{
min-height: 100vh;
display: grid;
align-items: center;
/* max-width: 1140px; */
margin: auto;
}
.container .cards{
display: flex;
flex-wrap: wrap;
}
.container .card{
flex-shrink: 0;
width: 100%;
max-width: 100%;
transition: all .5s ease-in-out;
margin-top: 20px;
padding: 0 0.7rem;
}
.container .card .top{
border: 2px solid;
border-radius: 0 30px 0 30px;
border-bottom: 2px dashed;
border-color: #97979770;
padding: 1.5rem;
color: #1c2f50;
transition: all .5s ease-in-out;
}
.container .card .top .price-title h2{
font-size: 28px;
font-weight: 700;
}
.container .card .top .price-tag h2{
font-size: 34px;
font-weight: 700;
}
.container .card .top .price-tag h2 sup{
vertical-align: baseline;
top: -0.5em;
position: relative;
}
.container .card .bottom{
border: 2px solid;
border-radius: 0 0px 0 30px;
border-top: none;
border-color: #97979770;
padding: 1.5rem;
color: #1c2f50;
}
.card .bottom ul{
list-style: none;
}
.card .bottom ul li{
font-size: 16px;
line-height: 2rem;
}
.card .bottom ul li i{
margin-right: 0.5rem;
}
.card .button a{
width: 100%;
text-align: center;
background: #1c2f50;
color: #fff;
display: inline-block;
text-decoration: none;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
transition: 0.3s all ease-in-out;
}
.card .button a:hover{
background: #182741;
}
.card .button .secondary-btn{
background: #2fb4ae;
}
.card .button .secondary-btn:hover{
background: #2fa59f;
}
.card:hover .top{
background: #2fb4ae;
}
.change-border{
animation: change-border 2s linear infinite;
}
@keyframes change-border{
0%,100%{
border-color: #2fb4ae;
}
50%{
border-color: #1c2f50;
}
}
@media (min-width: 992px) {
.card {
flex: 0 0 auto;
width: 33.33333333% !important;
}
}
Click on the following download button to download all source code files.
