forked from zzseba78/Kick-Off
-
Notifications
You must be signed in to change notification settings - Fork 0
/
price.html
279 lines (268 loc) · 12.5 KB
/
price.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
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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Price - UIkit 3 KickOff</title>
<link rel="icon" href="img/favicon.ico">
<!-- CSS FILES -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css">
<style>
.uk-container-small {
max-width: 1020px;
}
</style>
</head>
<body>
<div class="uk-offcanvas-content">
<!--HEADER-->
<header class="uk-box-shadow-small" style="background-color: white">
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" id="navbar" data-uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible@m">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="uk-navbar-item">
<a class="uk-navbar-toggle uk-hidden@s" data-uk-toggle data-uk-navbar-toggle-icon href="#offcanvas-nav"></a>
<a href="#" class="uk-button uk-button-secondary uk-visible@m"><span data-uk-icon="sign-in"></span>SIGN UP</a>
</div>
</div>
</nav>
</div>
</header>
<!--/HEADER-->
<!--AUTHOR-->
<section class="uk-section uk-section-muted uk-padding-remove-bottom">
<div class="uk-container uk-container-small">
<header class="uk-text-center">
<h1 class="uk-heading-primary">Price</h1>
<p class="uk-width-3-5 uk-margin-auto">
Our Product is the easiest way for teams to track their works progress. Our advance plans give you more tools to get the job done.
</p>
</header>
<div class="uk-grid uk-grid-small uk-child-width-1-3@m uk-margin-medium-top uk-grid-match" data-uk-scrollspy="cls: uk-animation-slide-bottom-small; target: > div > .uk-card; delay: 200" data-uk-grid>
<!-- price -->
<div>
<div class="uk-card uk-card-default uk-card-hover uk-flex uk-flex-column" data-uk-scrollspy-class="uk-animation-slide-left-small">
<div class="uk-card-header uk-text-center">
<h4 class="uk-text-bold">PERSONAL</h4>
</div>
<div class="uk-card-body uk-flex-1">
<div class="uk-flex uk-flex-middle uk-flex-center">
<span style="font-size: 4rem; font-weight: 200; line-height: 1em">
<span style="font-size: 0.5em">$</span>9<small>.99</small>
</span>
</div>
<div class="uk-text-small uk-text-center uk-text-muted">Per member billed annually</div>
<ul>
<li>2 users included</li>
<li>1 GB of storage</li>
<li>A beer jar</li>
</ul>
</div>
<div class="uk-card-footer">
<a href="#" class="uk-button uk-button-primary uk-width-1-1">BUY NOW</a>
</div>
</div>
</div>
<!-- /price -->
<!-- price -->
<div>
<div class="uk-card uk-card-default uk-card-hover uk-flex uk-flex-column">
<div class="uk-card-header uk-text-center">
<h4 class="uk-text-bold">PROFESSIONAL</h4>
</div>
<div class="uk-card-body uk-flex-1">
<div class="uk-flex uk-flex-middle uk-flex-center">
<span style="font-size: 4rem; font-weight: 200; line-height: 1em">
<span style="font-size: 0.5em">$</span>89<small>.99</small>
</span>
</div>
<div class="uk-text-small uk-text-center uk-text-muted">Per member billed annually</div>
<ul>
<li>10 users included</li>
<li>5 GB of storage</li>
<li>Email support</li>
<li>A beer jar with beer inside!</li>
</ul>
</div>
<div class="uk-card-footer">
<a href="" class="uk-button uk-button-primary uk-width-1-1">BUY NOW</a>
</div>
</div>
</div>
<!-- /price -->
<!-- price -->
<div>
<div class="uk-card uk-card-default uk-flex uk-card-hover uk-flex-column" data-uk-scrollspy-class="uk-animation-slide-right-small">
<div class="uk-card-header uk-text-center">
<h4 class="uk-text-bold">CORPORATE</h4>
</div>
<div class="uk-card-body uk-flex-1">
<div class="uk-flex uk-flex-middle uk-flex-center">
<span style="font-size: 4rem; font-weight: 200; line-height: 1em">
<span style="font-size: 0.5em">$</span>299
</span>
</div>
<div class="uk-text-small uk-text-center uk-text-muted">Per member billed annually</div>
<ul>
<li>Unlimited users</li>
<li>Unlimited storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
</div>
<div class="uk-card-footer">
<a href="" class="uk-button uk-button-primary uk-width-1-1">BUY NOW</a>
</div>
</div>
</div>
<!-- /price -->
</div>
<div class="uk-text-center uk-text-small uk-text-muted uk-section uk-section-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<a href="#more" title="More about Plans" data-uk-icon="arrow-down" data-uk-scroll="duration: 400" class="uk-button uk-button-secondary uk-margin-medium-top uk-button-large">MORE ABOUT PLANS</a>
</div>
</div>
</section>
<section id="more" class="uk-section uk-section-default">
<div class="uk-container">
<h3 class="uk-text-bold">More Features</h3>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-middle uk-table-divider uk-table-large uk-table-justify" data-uk-scrollspy="cls:uk-animation-fade;">
<thead>
<tr>
<th>Features</th>
<th>Personal</th>
<th class="uk-background-muted">Professional</th>
<th>Corporate</th>
</tr>
</thead>
<tbody>
<tr>
<td class="uk-width-2-5">Incididunt ut labore</td>
<td class="uk-width-1-5"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
<td class="uk-width-1-5 uk-background-muted"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
<td class="uk-width-1-5"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
</tr>
<tr>
<td class="uk-width-2-5">Incididunt ut labore</td>
<td class="uk-width-1-5"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5 uk-background-muted"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
<td class="uk-width-1-5"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
</tr>
<tr>
<td class="uk-width-2-5">Labore et dolore magna aliqua</td>
<td class="uk-width-1-5"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5 uk-background-muted"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
</tr>
<tr>
<td class="uk-width-2-5">Consectetur adipisicing elit, sed do eiusmod incididunt</td>
<td class="uk-width-1-5"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5 uk-background-muted"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
</tr>
<tr>
<td class="uk-width-2-5">Labore et dolore magna aliqua</td>
<td class="uk-width-1-5"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5 uk-background-muted"><span class="uk-text-danger" data-uk-icon="icon:close; ratio:2.5"></span></td>
<td class="uk-width-1-5"><span class="uk-text-success" data-uk-icon="icon:check; ratio:2.5"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!--FOOTER-->
<footer class="uk-section-secondary">
<div class="uk-container uk-section">
<div class="uk-grid uk-child-width-1-3@l" data-uk-grid>
<div>
<h4>Our Company</h4>
<ul class="uk-list uk-list-bullet">
<li><a href="#" title="Laboris nisi ut aliquip">Laboris nisi ut aliquip</a></li>
<li><a href="#" title="Excepteur sint occaecat">Excepteur sint occaecat</a></li>
<li><a href="#" title="Culpa qui officia">Culpa qui officia</a></li>
<li><a href="#" title="Duis aute irure dolor">Duis aute irure dolor</a></li>
<li><a href="#" title="Consectetur adipisicing">Consectetur adipisicing</a></li>
</ul>
</div>
<div>
<h4>Our Offices</h4>
<ul class="uk-list uk-list-bullet">
<li><a href="#" title="Laboris nisi ut aliquip">Laboris nisi ut aliquip</a></li>
<li><a href="#" title="Excepteur sint occaecat">Excepteur sint occaecat</a></li>
<li><a href="#" title="Culpa qui officia">Culpa qui officia</a></li>
<li><a href="#" title="Duis aute irure dolor">Duis aute irure dolor</a></li>
<li><a href="#" title="Consectetur adipisicing">Consectetur adipisicing</a></li>
</ul>
</div>
<div>
<h4>Subscribe</h4>
<form class="uk-grid uk-grid-collapse" action="price.html" data-uk-grid>
<div class="uk-width-expand">
<input class="uk-input" type="email" required name="email" placeholder="Your E-mail">
</div>
<div class="uk-width-auto">
<button class="uk-button uk-button-primary" data-uk-icon="check"></button>
</div>
</form>
<h4>Social Media</h4>
<a href="" class="uk-icon-button uk-margin-small-right" data-uk-icon="facebook"></a>
<a href="" class="uk-icon-button uk-margin-small-right" data-uk-icon="twitter"></a>
<a href="" class="uk-icon-button" data-uk-icon="instagram"></a>
</div>
</div>
</div>
<div class="uk-section uk-section-xsmall" style="background-color: rgba(0,0,0,0.15)">
<div class="uk-container">
<div class="uk-grid uk-child-width-1-2@s uk-text-center uk-text-left@s" data-uk-grid>
<div class="uk-text-small uk-text-muted">
Copyright 2018 - All rights reserved.
</div>
<div class="uk-text-small uk-text-muted uk-text-center uk-text-right@s">
<a href="https://github.com/zzseba78/Kick-Off">Created by KickOff</a> | Built with <a href="http://getuikit.com" title="Visit UIkit 3 site" target="_blank" data-uk-tooltip><span data-uk-icon="uikit"></span></a>
</div>
</div>
</div>
</div>
</footer>
<!--/FOOTER-->
<!-- OFFCANVAS -->
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close></button>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#js-options"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: trash"></span> Item</a></li>
</ul>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-- /OFFCANVAS -->
</div>
<!-- JS FILES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit-icons.min.js"></script>
</body>
</html>