Hi dear welcome to Ascode Blog . In this post we are going to learn how to makeing css product pricing card design using html and css . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
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 design by ascode</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Trial Package</h1>
<ul>
<li><i class="fas fa-check-circle"></i> 30gb hosting</li>
<li><i class="fas fa-check-circle"></i> 1 domain support</li>
<li><i class="fas fa-check-circle"></i> ddos-protection</li>
<li><i class="fas fa-check-circle"></i> support 24/7</li>
<li><i class="fas fa-check-circle"></i> 99% uptime</li>
</ul>
<div class="price">Price: $20</div>
<a href="#">Buy Now</a>
</div>
<div class="container">
<h1>Premium Package</h1>
<ul>
<li><i class="fas fa-check-circle"></i> 50gb hosting</li>
<li><i class="fas fa-check-circle"></i> 5 domain support</li>
<li><i class="fas fa-check-circle"></i> ddos-protection</li>
<li><i class="fas fa-check-circle"></i> support 24/7</li>
<li><i class="fas fa-check-circle"></i> 99% uptime</li>
</ul>
<div class="price">Price: $50</div>
<a href="#">Buy Now</a>
</div>
<div class="container">
<h1>Vip Package</h1>
<ul>
<li><i class="fas fa-check-circle"></i> 70gb hosting</li>
<li><i class="fas fa-check-circle"></i> unlimited domain</li>
<li><i class="fas fa-check-circle"></i> ddos-protection</li>
<li><i class="fas fa-check-circle"></i> support 24/7</li>
<li><i class="fas fa-check-circle"></i> 99% uptime</li>
</ul>
<div class="price">Price: $100</div>
<a href="#">Buy Now</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(242, 242, 250);
}
.container {
position: relative;
margin: 20px 10px;
width: 200px;
height: 300px;
border: 2px solid #30284e;
border-radius: 10px;
box-shadow: 0 5px 0 0 #30284e;
transition: 0.2s ease-out;
}
.container::before {
position: absolute;
content: "";
width: 94%;
height: 50px;
background: #30284e;
top: -1px;
left: -1px;
border-radius: 10px 0 100% 0;
z-index: -1;
}
.container h1 {
font-size: 15px;
margin: 8px 10px;
color: #fff;
text-transform: uppercase;
}
.container ul {
position: relative;
display: block;
top: 10px;
border-bottom: 2px solid #30284e;
margin: 0 10px;
padding: 10px 0;
}
.container ul li {
list-style: none;
font-size: 15px;
color: #30284e;
border-bottom: 1px dashed #ccc;
padding: 5px 0;
}
.container .price {
position: relative;
font-size: 20px ;
color: #30284e;
font-weight: 600;
text-align: center;
text-transform: uppercase;
margin: 10px 0;
display: block;
top: 10px;
border-bottom: 1px solid #30284e;
}
.container a {
position: relative;
color: #fff;
background: #30284e;
padding: 5px 10px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
border-radius: 5px;
top: 20px;
left: 25%;
}
.container a:hover {
background: linear-gradient(45deg,#30284e,#f09);
animation: color 1s linear infinite;
}
.container:hover::before {
background: linear-gradient(45deg,#30284e,#f09);
animation: color 1s linear infinite;
}
.container:hover {
border: 3px solid #909;
box-shadow: 0 7px 0 0 #909;
width: 210px;
height:310px ;
animation: color 1s linear infinite;
}
@keyframes color {
0%{
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@media screen and (max-width:700px) {
body {
display: block;
}
.container {
width: 95%;
}
.container:hover{
width: 95%;
}
}
0 Comments