-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresponsive-bootstrap-5-service-pricing-table-block.html
More file actions
212 lines (211 loc) · 13.5 KB
/
Copy pathresponsive-bootstrap-5-service-pricing-table-block.html
File metadata and controls
212 lines (211 loc) · 13.5 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Bootstrap 5 Service Pricing Table Block</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Pricing Table</span>
<h2 class="display-5 fw-bold">Our Pricing</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-rocket" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z"></path>
<path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z"></path>
<path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z"></path></svg>
</div>
<h5 class="fw-bold">Standard</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$19
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">1 Domain</li>
<li class="mb-3">1,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-magic" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"></path></svg>
</div>
<h5 class="fw-bold">Plus</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$26
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">10 Domains</li>
<li class="mb-3">10,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body bg-light py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-buildings" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022ZM6 8.694 1 10.36V15h5V8.694ZM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15Z"></path>
<path d="M2 11h1v1H2v-1Zm2 0h1v1H4v-1Zm-2 2h1v1H2v-1Zm2 0h1v1H4v-1Zm4-4h1v1H8V9Zm2 0h1v1h-1V9Zm-2 2h1v1H8v-1Zm2 0h1v1h-1v-1Zm2-2h1v1h-1V9Zm0 2h1v1h-1v-1ZM8 7h1v1H8V7Zm2 0h1v1h-1V7Zm2 0h1v1h-1V7ZM8 5h1v1H8V5Zm2 0h1v1h-1V5Zm2 0h1v1h-1V5Zm0-2h1v1h-1V3Z"></path></svg>
</div>
<h5 class="fw-bold">Pro</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$34
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">Unlimited Domains</li>
<li class="mb-3">Unlimited Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-graph-up-arrow" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" fill-rule="evenodd"></path></svg>
</div>
<h5 class="fw-bold">Ultimate</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$49
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">Unmetered Domains</li>
<li class="mb-3">Unmetered Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Pricing Table</span>
<h2 class="display-5 fw-bold">Our Pricing</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-body bg-light text-center py-4">
<div class="row align-items-center">
<div class="col-md-3">
<h5 class="fw-bold mb-0">Basic</h5>
<div class="display-3 fw-bold mt-1">
$19
</div>
<div>
Monthly
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-4 mt-md-3">
<li class="mb-3">1 Domain</li>
<li class="mb-3">1,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-3">
<li class="mb-3">Free Control Panel</li>
<li class="mb-3">Free 1-Click Installs</li>
<li class="mb-3">Free Let's Encrypt</li>
</ul>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="">Get Started</a>
</div>
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-body bg-light text-center py-4">
<div class="row align-items-center">
<div class="col-md-3">
<h5 class="fw-bold mb-0">Standard</h5>
<div class="display-3 fw-bold mt-1 text-primary">
$26
</div>
<div>
Monthly
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-4 mt-md-3">
<li class="mb-3">10 Domains</li>
<li class="mb-3">10,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-3">
<li class="mb-3">Free Control Panel</li>
<li class="mb-3">Free 1-Click Installs</li>
<li class="mb-3">Free Let's Encrypt</li>
</ul>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="">Get Started</a>
</div>
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-body bg-light text-center py-4">
<div class="row align-items-center">
<div class="col-md-3">
<h5 class="fw-bold mb-0">Pro</h5>
<div class="display-3 fw-bold mt-1">
$34
</div>
<div>
Monthly
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-4 mt-md-3">
<li class="mb-3">Unlimited Domains</li>
<li class="mb-3">Unlimited Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-3">
<li class="mb-3">Free Control Panel</li>
<li class="mb-3">Free 1-Click Installs</li>
<li class="mb-3">Free Let's Encrypt</li>
</ul>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>