Hey, developers welcome to Day 5 of our 90Days 90Projects challenge. And in Day 5 we are going to create pricing cards using HTML and CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
index.html
<!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">
<title> Pricing Card </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="price-heading"> Pricing </h2>
<div class="pricing-container">
<div class="pricing-item">
<h3 class="pricing-kit">Personal</h3>
<p class="pricing"><sup>$</sup>15 <sub>/MO</sub> </p>
<ul class="offers">
<li>2 websites</li>
<li>30GB SSD</li>
<li>1 Domain</li>
<li>1 Email</li>
<li>1x CPU & RAM</li>
</ul>
<button class="order-btn">order now</button>
</div>
<div class="pricing-item">
<h3 class="pricing-kit">Premium</h3>
<p class="pricing"><sup>$</sup>30 <sub>/MO</sub> </p>
<ul class="offers">
<li>50 websites</li>
<li>60GB SSD</li>
<li>5 Domain</li>
<li>20 Email</li>
<li>2x CPU & RAM</li>
</ul>
<button class="order-btn">order now</button>
</div>
<div class="pricing-item">
<h3 class="pricing-kit">Ultimate</h3>
<p class="pricing"><sup>$</sup>100 <sub>/MO</sub> </p>
<ul class="offers">
<li>100 websites</li>
<li>200GB SSD</li>
<li>10 Domain</li>
<li>10 Email</li>
<li>2x CPU & RAM</li>
</ul>
<button class="order-btn">order now</button>
</div>
</div>
</body>
<!-- Pricing Card design using HTML CSS by raju_webdev -->
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: darkorchid;
}
.price-heading {
text-align: center;
font-size: 3rem;
margin: 1rem 0;
color: #fff;
}
.pricing-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.pricing-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 5rem 2rem 5rem;
background-color: white;
margin: 0 1rem;
overflow: hidden;
cursor: pointer;
transition: .2s all linear;
margin-bottom: 2rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.pricing-item:hover {
transform: scale(1.01);
box-shadow: 0 1rem 1rem 0rem #753a93;
}
.pricing-item li {
list-style: none;
}
.pricing {
font-size: 1.5rem;
margin: 1rem 0;
color: skyblue;
font-weight: bold;
}
.pricing-kit {
font-size: 1.3rem;
background-color: skyblue;
padding: .7rem 1.5rem;
border-radius: 0 0 2rem 2rem;
}
.pricing-item:hover .pricing-kit {
box-shadow: 0 0 0 50rem skyblue;
}
.pricing-item:hover .order-btn {
background-color: skyblue;
color: white;
font-weight: bold;
border-color: white;
}
.pricing-item:hover .pricing {
color: black;
transition: .4s linear;
}
.offers li {
font-size: 1.2rem;
margin: 0.5rem 0;
}
.order-btn {
border: none;
border: 2px solid skyblue;
background-color: transparent;
color: skyblue;
cursor: pointer;
margin-top: 2rem;
padding: .7rem 1rem;
border-radius: 2rem;
font-weight: bold;
}
.order-btn:hover {
background-color: skyblue;
color: white;
font-weight: bold;
border-color: white;
}
