-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathgallery-pricing.html
155 lines (133 loc) · 4.87 KB
/
gallery-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
<!doctype html>
<html lang="en">
<head>
<!-- Create title for browser tabs & Favorites -->
<title>Price comparison template | Spectre.css</title>
<!-- This site is responsive. Use full screen width. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Ensure use of most common Unicode characters -->
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<style>
/* Add whitespace to emphasize explanatory text. */
.explanation { margin-left: 25%; margin-right: 25%; }
/* Dropshadow effect for navbar. */
.navshadow { box-shadow: 2px 2px 2px lightgrey; }
</style>
</head>
<body>
<!-- Construct top navbar -->
<header class="navbar navshadow" style="padding: 1rem;" >
<!-- Logo on the left -->
<div class="navbar-primary">
<a href="#" class="navbar-brand"><span class="text-large">YourSite</span></a>
</div>
<!-- Supporting links on on the right -->
<div class="navbar-section">
<a href="#" class="btn btn-link">FAQ</a>
<a href="#" class="btn btn-link">Support</a>
<a href="#" class="btn btn-link">About</a>
<a href="#" class="btn btn-success">Sign Up</a>
</div>
</header>
<div class="container centered">
<h1 class="text-center" style="margin-top: 5%;">Pricing</h1>
<p class="text-center text-large explanation">It's usually good to offer 3 options for pricing. It's also a good practice to provide
visual clarification for the best deal.</p>
<div class="columns" style="margin-left: 15%; margin-right: 15%;">
<div class="column col-4 text-center">
<!-- mt-2 style pushes down left & right columns -->
<div class="card mt-2">
<div class="card-header bg-gray">
<div class="card-title">
<h2>Starter</h2>
</div><!-- .card-title -->
</div><!--- .card-header -->
<div class="card-body">
<p class="h3">Free <span class="bg-gray h5">$0/month</span></p>
<p>One account</p>
<p>Up to 1G text storage</p>
<p>No image storage</p>
<button class="btn btn-default">Order</button>
</div><!-- .card-body -->
</div><!-- .card -->
</div><!-- .column .col-4 -->
<div class="column col-4 text-center">
<!-- Without mt-2 style this "pushes up" the center column -->
<div class="card navshadow">
<div class="card-header bg-primary">
<div class="card-title">
<h2>Small Business</h2>
</div><!-- .card-title -->
</div><!--- .card-header -->
<div class="card-body">
<p class="h3">$59/mo <span class="bg-gray h5">$300/quarter</span></p>
<p>Up to 5 accounts</p>
<p>Up to 2G text storage</p>
<p>Up to 10G image storage</p>
<p><span class="text-bold text-large text-success"> BEST VALUE </span></p>
<button class="btn btn-primary">Order</button>
</div><!-- .card-body -->
</div><!-- .card -->
</div><!-- .column .col-4 -->
<div class="column col-4 text-center">
<!-- mt-2 style pushes down left & right columns -->
<div class="card mt-2">
<div class="card-header bg-gray">
<div class="card-title">
<h2>Enterprise</h2>
</div><!-- .card-title -->
</div><!--- .card-header -->
<div class="card-body">
<p class="h3">$199/mo <span class="bg-gray h5">$999/quarter</span></p>
<p>Unlimited accounts</p>
<p>Up to 5TB text storage</p>
<p>Up to 25TB image storage</p>
<button class="btn btn-default">Order</button>
</div><!-- .card-body -->
</div><!-- .card -->
</div>
</div><!-- .columns -->
</div><!-- .container -->
<footer>
<div class="columns" style="margin-top: 5%; margin-left: 10%; margin-right: 10%";>
<div class="column col-3">
<ul>
<h5>About</h5>
<li><a href="#">Server status</a></li>
<li><a href="#">News</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Privacy poliscy</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Team</a></li>
</ul>
</div><!-- .column .col-3 -->
<div class="column col-3">
<ul>
<h5>Mobile</h5>
<li><a href="#">iPhone</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Amazon</a></li>
</ul>
</div><!-- .column .col-3 -->
<div class="column col-3">
<ul>
<h5>Help</h5>
<li><a href="#">How it works</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Command reference</a></li>
<li><a href="#">API reference</a></li>
</ul>
</div><!-- .column .col-3 -->
<div class="column col-3">
<ul>
<h5>Making money</h5>
<li><a href="#">Affiliate program</a></li>
<li><a href="#">Getting started</a></li>
<li><a href="#">Approval process</a></li>
</ul>
</div><!-- .column .col-3 -->
</div><!-- columns -->
</footer><!-- footer-->
</body>