This code snippet helps you to create price cards using HTML and CSS. It defines four variables, “checkbox”, “professional”, “master”, and “basic”. An event listener is then added to the “checkbox” element, which triggers a function when the element is clicked.
When the “checkbox” is clicked, the text content of “basic”, “professional”, and “master” elements is updated based on a ternary condition. If the text content is equal to a specific dollar amount, it is changed to a different dollar amount. If the text content is already the changed dollar amount, it is changed back to the original dollar amount. This code likely represents a pricing scheme that changes based on a user’s decision to purchase a feature or upgrade.
How to Create CSS Price Cards
Create the HTML structure for the price cards as follows:
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet" />
<title>Pricing component</title>
</head>
<body>
<header>
<h1>Our Pricing</h1>
<div class="toggle">
<label>Annually </label>
<div class="toggle-btn">
<input type="checkbox" class="checkbox" id="checkbox" />
<label class="sub" id="sub" for="checkbox">
<div class="circle"></div>
</label>
</div>
<label> Monthly</label>
</div>
</header>
<div class="cards">
<div class="card shadow">
<ul>
<li class="pack">Basic</li>
<li id="basic" class="price bottom-bar">$199.99</li>
<li class="bottom-bar">500 GB Storage</li>
<li class="bottom-bar">2 Users Allowed</li>
<li class="bottom-bar">Send up to 3 GB</li>
<li><button class="btn">Learn More</button></li>
</ul>
</div>
<div class="card active">
<ul>
<li class="pack">Professional</li>
<li id="professional" class="price bottom-bar">$249.99</li>
<li class="bottom-bar">1 TB Storage</li>
<li class="bottom-bar">5 Users Allowed</li>
<li class="bottom-bar">Send up to 10 GB</li>
<li><button class="btn active-btn">Learn More</button></li>
</ul>
</div>
<div class="card shadow">
<ul>
<li class="pack">Master</li>
<li id="master" class="price bottom-bar">$399.99</li>
<li class="bottom-bar">2 TB Storage</li>
<li class="bottom-bar">10 Users Allowed</li>
<li class="bottom-bar">Send up to 20 GB</li>
<li><button class="btn">Learn More</button></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
Now, style the price cards using the following CSS styles:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 15px;
}
body {
background: #f7f7ff;
font-family: "Montserrat", sans-serif;
width: 80%;
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
.cd__main{
display: block !important;
}
header {
color: hsl(233, 13%, 49%);
margin: 3.3rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.toggle {
margin-top: 2rem;
color: hsl(234, 14%, 74%);
display: flex;
align-items: center;
}
.toggle-btn {
margin: 0 1rem;
}
.checkbox {
display: none;
}
.sub {
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
display: flex;
justify-content: flex-start;
align-items: center;
/* height: 25px;
width: 50px; */
height: 1.6rem;
width: 3.3rem;
border-radius: 1.6rem;
padding: 0.3rem;
}
.circle {
background-color: #fff;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
}
.checkbox:checked + .sub {
justify-content: flex-end;
}
.cards {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.card {
background: #fff;
color: hsl(233, 13%, 49%);
border-radius: 0.8rem;
}
.cards .card.active {
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
color: #fff;
display: flex;
align-items: center;
transform: scale(1.1);
z-index: 1;
}
ul {
margin: 2.6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
ul li {
list-style-type: none;
display: flex;
justify-content: center;
width: 100%;
padding: 1rem 0;
}
ul li.price {
font-size: 3rem;
color: hsl(232, 13%, 33%);
padding-bottom: 2rem;
}
.shadow {
box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}
.card.active .price {
color: #fff;
}
.btn {
margin-top: 1rem;
height: 2.6rem;
width: 13.3rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
background: linear-gradient(
135deg,
rgba(163, 168, 240, 1) 0%,
rgba(105, 111, 221, 1) 100%
);
color: #fff;
outline: none;
border: 0;
font-weight: bold;
}
.active-btn {
background: #fff;
color: hsl(237, 63%, 64%);
}
.bottom-bar {
border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
.card.active .bottom-bar {
border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
.pack {
font-size: 1.1rem;
}
@media (max-width: 280px) {
ul {
margin: 1rem;
}
h1 {
font-size: 1.2rem;
}
.toggle {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 80px;
}
.cards {
margin: 0;
display: flex;
flex-direction: column;
}
.card {
transform: scale(0.8);
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(0.8);
}
}
@media (min-width: 280px) and (max-width: 320px) {
ul {
margin: 20px;
}
.cards {
display: flex;
flex-direction: column;
}
.card {
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 320px) and (max-width: 414px) {
.cards {
display: flex;
flex-direction: column;
}
.card {
margin-bottom: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 414px) and (max-width: 768px) {
.card {
margin-bottom: 1rem;
margin-right: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
@media (min-width: 768px) and (max-width: 1046px) {
.cards {
display: flex;
}
.card {
margin-bottom: 1rem;
margin-right: 1rem;
}
.cards .card.active {
transform: scale(1);
}
}
Finally, add the following JavaScript function for its functionality:
const checkbox = document.getElementById("checkbox");
const professional = document.getElementById("professional");
const master = document.getElementById("master");
const basic = document.getElementById("basic");
checkbox.addEventListener("click", () => {
basic.textContent = basic.textContent === "$199.99" ? "$19.99" : "$199.99";
professional.textContent =
professional.textContent === "$249.99" ? "$24.99 " : "$249.99";
master.textContent = master.textContent === "$399.99" ? "$39.99" : "$399.99";
});
That’s all! hopefully, you have successfully created our project. If you have any questions or suggestions, feel free to comment below.
