-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathpricing.html
162 lines (122 loc) · 6.74 KB
/
pricing.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
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
---
title: Pricing
order: 1
---
<div class="py-4 bg-dark text-white">
<div class="container">
<h1 class="font-weight-light text-center mt-5">Headline about pricing</h1>
<div class="row mt-3 mb-md-5 mb-sm-3">
<div class="col-md-6 col-centered lead text-center font-weight-light">
Highlight some of the common features, attributes, and benefits common across all plans.
</div>
</div>
<div class="my-md-5 my-sm-3 p-3">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-12 my-5">
<div class="card text-dark">
<h2 class="font-weight-light text-primary text-center my-5 text-uppercase text-spaced">Small</h2>
<h1 class="display-4 text-center font-weight-bold">$10 <small class="font-weight-light text-gray h3">per month</small></h1>
<hr class="mx-4">
<ul class="text-muted star-bullets px-5 mx-auto">
<li class="p-2">Feature one</li>
<li class="p-2">Feature two here</li>
<li class="p-2">Feature the third</li>
<li class="p-2">Feature the fourth</li>
<li class="p-2">Feature number five</li>
</ul>
<hr class="mx-4 mb-5">
<a class="btn btn-primary text-white font-weight-light mx-auto border-overlap" href="#">Sign me up</a>
</div>
</div>
<div class="col-lg-4 col-md-12 my-5">
<div class="card text-dark">
<div class="btn btn-primary text-uppercase font-weight-bold text-white py-3" id="most-popular">Most Popular</div>
<h2 class="font-weight-light text-primary text-center my-5 text-uppercase text-spaced">Medium</h2>
<h1 class="display-4 text-center font-weight-bold">$20 <small class="font-weight-light text-gray h3">per month</small></h1>
<hr class="mx-4">
<ul class="text-muted star-bullets px-5 mx-auto">
<li class="p-2">Feature one</li>
<li class="p-2">Feature two here</li>
<li class="p-2">Feature the third</li>
<li class="p-2">Feature the fourth</li>
<li class="p-2">Feature number five</li>
</ul>
<hr class="mx-4 mb-5">
<a class="btn btn-primary text-white font-weight-light mx-auto border-overlap" href="#">Sign me up</a>
</div>
</div>
<div class="col-lg-4 col-md-12 my-md-5 my-sm-2 mb-sm-3">
<div class="card text-dark">
<h2 class="font-weight-light text-primary text-center my-5 text-uppercase text-spaced">Enterprise</h2>
<h1 class="display-4 text-center font-weight-bold">99+ <small class="font-weight-light text-gray h3">employees</small></h1>
<hr class="mx-4">
<ul class="text-muted star-bullets px-3 mx-auto">
<li class="p-2">Feature one</li>
<li class="p-2">Feature two here</li>
<li class="p-2">Feature the third</li>
<li class="p-2">Feature the fourth</li>
<li class="p-2">Feature number five</li>
</ul>
<hr class="mx-4 mb-5">
<a class="btn btn-primary text-white font-weight-light mx-auto border-overlap" href="#">Contact us</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 bg-white">
<div class="container">
<h1 class="font-weight-light text-center px-4 mb-5 mt-md-5 mt-sm-3">Common questions</h1>
<div class="row my-md-5 my-sm-3">
<div class="col-md col-sm-12 px-5">
<h4 class="text-primary">Do you offer yearly plans?</h4>
<p class="lead">If you pay for a year upfront (optional) you are eligible for a 10% discount.</p>
</div>
<div class="col-md col-sm-12 px-5 mt-sm-3 mt-md-0">
<h4 class="text-primary">Do you have a setup cost?</h4>
<p class="lead">Absolutely not. All plans are month to month with no contracts, no setup fees, and no hidden gimmicks. Cancel anytime.</p>
</div>
</div>
<div class="row my-md-5 my-sm-3">
<div class="col-md col-sm-12 px-5">
<h4 class="text-primary">Do you restrict features with a free trial?</h4>
<p class="lead">While trials are more limited than paid accounts, you will be able to try most of our features.</p>
</div>
<div class="col-md col-sm-12 px-5 mt-sm-3 mt-md-0">
<h4 class="text-primary">What is a contact?</h4>
<p class="lead">A contact is a single person you have recorded in your account. Think of 1 email address being 1 contact.</p>
</div>
</div>
<div class="row my-md-5 my-sm-3">
<div class="col-md col-sm-12 px-5">
<h4 class="text-primary">What payment methods do you accept?</h4>
<p class="lead">Visa, MasterCard, and American Express. For annual plans we also accept Paypal, checks, and wire transfers.</p>
</div>
<div class="col-md col-sm-12 px-5 mt-sm-3 mt-md-0">
<h4 class="text-primary">Anything special for non-profits?</h4>
<p class="lead">Yes! We offer a 15% discount for non-profits. Simply contact us with proof of non-profit status.</p>
</div>
</div>
</div>
</div>
<div class="py-4 bg-primary text-white">
<div class="container mb-4">
<div class="row pt-3">
<div class="col-md-2 text-center">
<img class="img-fluid" src="img/[email protected]">
</div>
<div class="col-md-8 px-5 pt-lg-3 mt-sm-5 mt-md-0">
<h2 class="font-weight-light">Beacon Lead Magnet</h2>
<p class="lead">
A great cta is persuasive, creates a sense of urgency, and is action oriented.
</p>
<form class="form-inline">
<input type="text" class="form-control font-weight-light mr-lg-2 mb-2 border col-lg-4 col-sm-12" placeholder="First Name">
<input type="text" class="form-control font-weight-light mr-lg-2 mb-2 border col-lg-5 col-sm-12" placeholder="Email">
<button type="submit" class="btn btn-secondary text-white font-weight-light mb-sm-2 col">Download</button>
</form>
</div>
</div>
</div>
</div>