xxxxxxxxxx
1
<!-- Section: Pricing v.1 -->
2
<section class="my-5">
3
4
<!-- Section heading -->
5
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
6
<!-- Section description -->
7
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
8
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
9
eum porro a pariatur veniam.</p>
10
11
<!-- Grid row -->
12
<div class="row">
13
14
<!-- Grid column -->
15
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
16
17
<!-- Pricing card -->
18
<div class="card pricing-card">
19
20
<!-- Price -->
21
<div class="price header white-text blue rounded-top">
22
<h2 class="number">10</h2>
23
<div class="version">
24
<h5 class="mb-0">Basic</h5>
25
</div>
26
</div>
27
28
<!-- Features -->
29
<div class="card-body striped mb-1">
30
31
<ul>
32
<li>
33
<p class="mt-2"><i class="fa fa-check green-text pr-2"></i>20 GB Of Storage</p>
34
</li>
35
<li>
36
<p><i class="fa fa-check green-text pr-2"></i>2 Email Accounts</p>
37
</li>
38
<li>
39
<p><i class="fa fa-times red-text pr-2"></i>24h Tech Support</p>
40
</li>
41
<li>
42
<p><i class="fa fa-times red-text pr-2"></i>300 GB Bandwidth</p>
43
</li>
44
<li>
45
<p><i class="fa fa-times red-text pr-2"></i>User Management </p>
46
</li>
47
</ul>
48
<button class="btn btn-blue">Buy now</button>
49
50
</div>
51
<!-- Features -->
52
53
</div>
54
<!-- Pricing card -->
55
56
</div>
57
<!-- Grid column -->
58
59
<!-- Grid column -->
60
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
61
62
<!-- Pricing card -->
63
<div class="card pricing-card">
64
65
<!-- Price -->
66
<div class="price header white-text indigo rounded-top">
67
<h2 class="number">20</h2>
68
<div class="version">
69
<h5 class="mb-0">Pro</h5>
70
</div>
71
</div>
72
73
<!-- Features -->
74
<div class="card-body striped mb-1">
75
76
<ul>
77
<li>
78
<p class="mt-2"><i class="fa fa-check green-text pr-2"></i>20 GB Of Storage</p>
79
</li>
80
<li>
81
<p><i class="fa fa-check green-text pr-2"></i>4 Email Accounts</p>
82
</li>
83
<li>
84
<p><i class="fa fa-check green-text pr-2"></i>24h Tech Support</p>
85
</li>
86
<li>
87
<p><i class="fa fa-times red-text pr-2"></i>300 GB Bandwidth</p>
88
</li>
89
<li>
90
<p><i class="fa fa-times red-text pr-2"></i>User Management</p>
91
</li>
92
</ul>
93
<button class="btn btn-indigo">Buy now</button>
94
95
</div>
96
<!-- Features -->
97
98
</div>
99
<!-- Pricing card -->
100
101
</div>
102
<!-- Grid column -->
103
104
<!-- Grid column -->
105
<div class="col-lg-4 col-md-6">
106
107
<!-- Pricing card -->
108
<div class="card pricing-card">
109
110
<!-- Price -->
111
<div class="price header white-text deep-purple rounded-top">
112
<h2 class="number">30</h2>
113
<div class="version">
114
<h5 class="mb-0">Enterprise</h5>
115
</div>
116
</div>
117
118
<!-- Features -->
119
<div class="card-body striped mb-1">
120
121
<ul>
122
<li>
123
<p class="mt-2"><i class="fa fa-check green-text pr-2"></i>30 GB Of Storage</p>
124
</li>
125
<li>
126
<p><i class="fa fa-check green-text pr-2"></i>5 Email Accounts</p>
127
</li>
128
<li>
129
<p><i class="fa fa-check green-text pr-2"></i>24h Tech Support</p>
130
</li>
131
<li>
132
<p><i class="fa fa-check green-text pr-2"></i>300 GB Bandwidth</p>
133
</li>
134
<li>
135
<p><i class="fa fa-check green-text pr-2"></i>User Management</p>
136
</li>
137
</ul>
138
<button class="btn btn-deep-purple">Buy now</button>
139
140
</div>
141
<!-- Features -->
142
143
</div>
144
<!-- Pricing card -->
145
146
</div>
147
<!-- Grid column -->
148
149
</div>
150
<!-- Grid row -->
151
152
</section>
153
<!-- Section: Pricing v.1 -->
xxxxxxxxxx
1
.pricing-card .price .number:after {
2
content: "/mes";
3
}
1
1
Console errors: 0