Here, I have Made Responsive Pricing Card Using Only HTML and CSS. This Pricing Card is Used by various Online Store and Hosting Company to Show Their Plans to the Customer
HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<!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>HTML CSS Card Design</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</title>
</head>
<body>
<div class="wrapper">
<header>
<label for="tab-1" class="tab-1">Basic</label>
</header>
<div class="card-area">
<div class="cards">
<div class="row">
<div class="price-details">
<span class="price">50</span>
<p>For Medium-Bussiness</p>
</div>
<ul class="features">
<li><i class="fas fa-check"><span>20GB Bandwidth</span></i></li>
<li><i class="fas fa-check"><span>10GB Hard-Disk Space</span></i></li>
<li><i class="fas fa-check"><span>2GB RAM</span></i></li>
<li><i class="fas fa-check"><span>100 Websites</span></i></li>
<li><i class="fas fa-check"><span>Free SSL ($11.95 value)</span></i></li>
<li><i class="fas fa-check"><span>Free Domain ($8.99 value) </span></i></li>
<li><i class="fas fa-check"><span>Unlimited Databases</span></i></li>
<li><i class="fas fa-check"><span>30 Days Money Back Guarantee</span></i></li>
</ul>
</div>
</div>
</div>
<button>Choose Plan</button>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 | <!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>HTML CSS Card Design</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</title>
</head>
<body>
<div class="wrapper">
<header>
<label for="tab-1" class="tab-1">Basic</label>
</header>
<div class="card-area">
<div class="cards">
<div class="row">
<div class="price-details">
<span class="price">50</span>
<p>For Medium-Bussiness</p>
</div>
<ul class="features">
<li><i class="fas fa-check"><span>20GB Bandwidth</span></i></li>
<li><i class="fas fa-check"><span>10GB Hard-Disk Space</span></i></li>
<li><i class="fas fa-check"><span>2GB RAM</span></i></li>
<li><i class="fas fa-check"><span>100 Websites</span></i></li>
<li><i class="fas fa-check"><span>Free SSL ($11.95 value)</span></i></li>
<li><i class="fas fa-check"><span>Free Domain ($8.99 value) </span></i></li>
<li><i class="fas fa-check"><span>Unlimited Databases</span></i></li>
<li><i class="fas fa-check"><span>30 Days Money Back Guarantee</span></i></li>
</ul>
</div>
</div>
</div>
<button>Choose Plan</button>
</div>
</body>
</html>
|
CSS Source Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family:Georgia, 'Times New Roman', Times, serif
}
body{
display: flex;
align-items: center;
justify-content: center;
background:rgb(0, 0, 0);
min-height: 100vh;
}
.wrapper{
width: 350px;
background:#fff;
border-radius:13px;
padding: 22px;
box-shadow: 10px 10px 15px rgb(115, 119, 105);
}
.wrapper header{
font-size: 25px;
text-shadow: gold;
font-weight: bold;
color: #004edf;
text-align: center;
margin-bottom: 10px;
border-bottom: ridge;
overflow: hidden;
}
.card-area .cards{
display: flex;
width: 500%;
}
.cards .row{
width: 33%;
}
.row .price-details{
margin-right: 200px;
text-align: center;
padding-bottom:20px ;
border-bottom:2px ridge #0a0a0a ;
}
.price-details .price{
font-size: 50px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.price-details .price::before{
content: "$";
left: -13px;
top: 17px;
font-size: 25px;
align-content: center;
}
.price-details .price::after{
content: "/mon";
font-weight: bold
;
right: -50px;
bottom: 17px;
font-size: 15px;
}
.price-details p{
font-weight: bold;
margin-top: 4px;
}
.row .features li{
margin-top: 20px;
display: flex;
font-size: 15px;
list-style:none;
margin-bottom: 10px;
align-items: center;
}
.features li i{
background: linear-gradient(#c0109a 0%, #004edf 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.features li span{
margin-left: 10px;
}
.wrapper button{
width: 100%;
border-radius: 35px;
border-color: #004edf;
cursor: pointer;
padding: 4px;
font-size: 18px;
color: #ffffff;
margin-top: 20px;
background:#004edf;
}
.wrapper button:hover{
border-color: #0a20e9;
font-weight: bold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123 | *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family:Georgia, 'Times New Roman', Times, serif
}
body{
display: flex;
align-items: center;
justify-content: center;
background:rgb(0, 0, 0);
min-height: 100vh;
}
.wrapper{
width: 350px;
background:#fff;
border-radius:13px;
padding: 22px;
box-shadow: 10px 10px 15px rgb(115, 119, 105);
}
.wrapper header{
font-size: 25px;
text-shadow: gold;
font-weight: bold;
color: #004edf;
text-align: center;
margin-bottom: 10px;
border-bottom: ridge;
overflow: hidden;
}
.card-area .cards{
display: flex;
width: 500%;
}
.cards .row{
width: 33%;
}
.row .price-details{
margin-right: 200px;
text-align: center;
padding-bottom:20px ;
border-bottom:2px ridge #0a0a0a ;
}
.price-details .price{
font-size: 50px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.price-details .price::before{
content: "$";
left: -13px;
top: 17px;
font-size: 25px;
align-content: center;
}
.price-details .price::after{
content: "/mon";
font-weight: bold
;
right: -50px;
bottom: 17px;
font-size: 15px;
}
.price-details p{
font-weight: bold;
margin-top: 4px;
}
.row .features li{
margin-top: 20px;
display: flex;
font-size: 15px;
list-style:none;
margin-bottom: 10px;
align-items: center;
}
.features li i{
background: linear-gradient(#c0109a 0%, #004edf 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.features li span{
margin-left: 10px;
}
.wrapper button{
width: 100%;
border-radius: 35px;
border-color: #004edf;
cursor: pointer;
padding: 4px;
font-size: 18px;
color: #ffffff;
margin-top: 20px;
background:#004edf;
}
.wrapper button:hover{
border-color: #0a20e9;
font-weight: bold;
}
|
Tags:
html