-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
412 lines (371 loc) · 20.3 KB
/
index.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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="css/index.css" rel="stylesheet">
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
<header>
<div class="content">
<div class="logo">
<a href="">
<img alt="" src="assets/logo.svg">
</a>
</div>
<div class="navigation">
<a href="">Features</a>
<a href="">About</a>
<a href="">Pricing</a>
<a href="">Reviews</a>
<a href="">Contact</a>
</div>
</div>
</header>
<main>
<div class="darkfilter">
<div class="restriction">
<section class="info">
<img alt="" src="assets/logo.svg">
<h3>MODERN AXURE TEMPLATE <br> FOR BEAUTIFUL <br> PROTOTYPES</h3>
<hr>
<p>Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit.</p>
<button>Download</button>
</section>
<section class="getcontact">
<div class="form">
<h6>TRY YOUR
FREE
TRIAL TODAY
</h6>
<input placeholder="Name" type="text">
<input placeholder="Email" type="email">
<input placeholder="Password" type="password">
<button>
Get Started
</button>
</div>
</section>
</div>
</div>
</main>
<div class="socials">
<div class="restriction">
<div class="blocktxt">
<h4>
Social Media
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias architecto minima nam
pariatur</p>
</div>
<div class="links">
<div class="block">
<a href=""><img alt="" src="assets/github_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/twitter_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/rss_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/pinterest_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/instagram_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/linkedin_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/facebook_icon.png"></a>
</div>
</div>
</div>
</div>
<div class="screen2">
<div class="restriction">
<div class="tabs">
<div class="opentab tab">
Tab 1
</div>
<div class="closetab tab">
Tab 2
</div>
<div class="closetab tab">
Tab 3
</div>
</div>
<div class="filling">
<div class="text">
<h3>Tabs with soft transitioning effect.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad deleniti incidunt necessitatibus
veritatis. Ab accusamus at corporis, dignissimos ipsa laudantium sequi similique? Alias aliquam
beatae commodi consectetur consequuntur deserunt doloremque eligendi, eos esse ex hic id itaque
maxime nisi nobis nulla omnis optio quae sint soluta ut velit voluptatibus. Repellat!</p>
<button>Download</button>
</div>
<div class="img">
<img height='383' src="assets/tab_photo.png" width='398'>
</div>
</div>
</div>
</div>
<div class="screen3">
<div class="restriction">
<div class="forbefore">
<div class="text-h2">
<h2>WHY THIS IS AWESOME</h2>
</div>
</div>
<div class="subtitle-div">
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="plaques">
<div class="plaque">
<svg fill="none" height="170" viewBox="0 0 170 170" width="170" xmlns="http://www.w3.org/2000/svg">
<path d="M76.5232 103.136H93.4733H76.5232ZM85 52.3549V55.9821V52.3549ZM108.084 61.9163L105.519 64.4807L108.084 61.9163ZM117.645 85H114.018H117.645ZM55.9821 85H52.3549H55.9821ZM64.4807 64.4807L61.9163 61.9163L64.4807 64.4807ZM72.1741 97.8259C69.6382 95.2894 67.9114 92.0578 67.212 88.5398C66.5126 85.0219 66.872 81.3756 68.2448 78.0619C69.6176 74.7482 71.9422 71.916 74.9246 69.9234C77.907 67.9307 81.4132 66.8672 85 66.8672C88.5868 66.8672 92.0931 67.9307 95.0755 69.9234C98.0578 71.916 100.382 74.7482 101.755 78.0619C103.128 81.3756 103.487 85.0219 102.788 88.5398C102.089 92.0578 100.362 95.2894 97.8259 97.8259L95.8382 99.81C94.7018 100.947 93.8005 102.296 93.1856 103.781C92.5707 105.266 92.2543 106.857 92.2545 108.465V110.391C92.2545 112.315 91.4902 114.16 90.1297 115.52C88.7692 116.881 86.924 117.645 85 117.645C83.076 117.645 81.2308 116.881 79.8703 115.52C78.5099 114.16 77.7455 112.315 77.7455 110.391V108.465C77.7455 105.218 76.4542 102.102 74.1618 99.81L72.1741 97.8259Z"
stroke="#EC7979" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.83333"/>
<circle cx="85" cy="85" r="45.5" stroke="#EC7979"/>
</svg>
<h4>Unique Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cupiditate dolore earum eum
laudantium rerum, sunt unde velit voluptatum.</p>
</div>
<div class="plaque">
<svg fill="none" height="170" viewBox="0 0 170 170" width="170" xmlns="http://www.w3.org/2000/svg">
<path d="M110.573 62C112.543 62 114.432 62.7786 115.825 64.1645C117.218 65.5505 118 67.4302 118 69.3902V100.61C118 102.57 117.218 104.45 115.825 105.835C114.432 107.221 112.543 108 110.573 108H59.427C58.4517 108 57.4859 107.809 56.5848 107.437C55.6838 107.066 54.865 106.522 54.1754 105.835C53.4858 105.149 52.9387 104.335 52.5655 103.438C52.1922 102.541 52.0001 101.58 52.0001 100.61V69.3902C52.0001 67.4302 52.7826 65.5505 54.1754 64.1645C55.5682 62.7786 57.4573 62 59.427 62H110.573ZM110.573 66.9268H59.427C58.7704 66.9268 58.1407 67.1863 57.6765 67.6483C57.2122 68.1103 56.9514 68.7369 56.9514 69.3902V100.61C56.9514 101.97 58.0604 103.073 59.427 103.073H110.573C111.23 103.073 111.86 102.814 112.324 102.352C112.788 101.89 113.049 101.263 113.049 100.61V69.3902C113.049 68.7369 112.788 68.1103 112.324 67.6483C111.86 67.1863 111.23 66.9268 110.573 66.9268ZM67.679 93.2031H102.338C102.965 93.2033 103.569 93.4404 104.027 93.8665C104.485 94.2926 104.764 94.876 104.807 95.4986C104.85 96.1213 104.653 96.737 104.257 97.2211C103.862 97.7053 103.296 98.0219 102.674 98.107L102.338 98.13H67.679C67.0518 98.1298 66.448 97.8927 65.9897 97.4666C65.5314 97.0405 65.2527 96.4571 65.2099 95.8345C65.1672 95.2118 65.3636 94.5961 65.7594 94.112C66.1552 93.6278 66.721 93.3112 67.3424 93.2261L67.679 93.2031H102.338H67.679ZM99.8621 81.7072C100.738 81.7072 101.577 82.0533 102.196 82.6693C102.815 83.2852 103.163 84.1207 103.163 84.9918C103.163 85.8629 102.815 86.6983 102.196 87.3143C101.577 87.9303 100.738 88.2763 99.8621 88.2763C98.9867 88.2763 98.1471 87.9303 97.528 87.3143C96.909 86.6983 96.5613 85.8629 96.5613 84.9918C96.5613 84.1207 96.909 83.2852 97.528 82.6693C98.1471 82.0533 98.9867 81.7072 99.8621 81.7072ZM80.0736 81.7072C80.9491 81.7072 81.7887 82.0533 82.4077 82.6693C83.0267 83.2852 83.3745 84.1207 83.3745 84.9918C83.3745 85.8629 83.0267 86.6983 82.4077 87.3143C81.7887 87.9303 80.9491 88.2763 80.0736 88.2763C79.1982 88.2763 78.3586 87.9303 77.7396 87.3143C77.1206 86.6983 76.7728 85.8629 76.7728 84.9918C76.7728 84.1207 77.1206 83.2852 77.7396 82.6693C78.3586 82.0533 79.1982 81.7072 80.0736 81.7072ZM70.1712 81.7072C71.0466 81.7072 71.8862 82.0533 72.5052 82.6693C73.1242 83.2852 73.472 84.1207 73.472 84.9918C73.472 85.8629 73.1242 86.6983 72.5052 87.3143C71.8862 87.9303 71.0466 88.2763 70.1712 88.2763C69.2957 88.2763 68.4562 87.9303 67.8371 87.3143C67.2181 86.6983 66.8703 85.8629 66.8703 84.9918C66.8703 84.1207 67.2181 83.2852 67.8371 82.6693C68.4562 82.0533 69.2957 81.7072 70.1712 81.7072ZM89.9761 81.7072C90.8515 81.7072 91.6911 82.0533 92.3102 82.6693C92.9292 83.2852 93.2769 84.1207 93.2769 84.9918C93.2769 85.8629 92.9292 86.6983 92.3102 87.3143C91.6911 87.9303 90.8515 88.2763 89.9761 88.2763C89.1007 88.2763 88.2611 87.9303 87.6421 87.3143C87.0231 86.6983 86.6753 85.8629 86.6753 84.9918C86.6753 84.1207 87.0231 83.2852 87.6421 82.6693C88.2611 82.0533 89.1007 81.7072 89.9761 81.7072ZM65.2034 71.8536C66.0789 71.8536 66.9184 72.1997 67.5375 72.8156C68.1565 73.4316 68.5042 74.2671 68.5042 75.1382C68.5042 76.0093 68.1565 76.8447 67.5375 77.4607C66.9184 78.0767 66.0789 78.4227 65.2034 78.4227C64.328 78.4227 63.4884 78.0767 62.8694 77.4607C62.2504 76.8447 61.9026 76.0093 61.9026 75.1382C61.9026 74.2671 62.2504 73.4316 62.8694 72.8156C63.4884 72.1997 64.328 71.8536 65.2034 71.8536ZM75.0894 71.8536C75.9648 71.8536 76.8044 72.1997 77.4234 72.8156C78.0425 73.4316 78.3902 74.2671 78.3902 75.1382C78.3902 76.0093 78.0425 76.8447 77.4234 77.4607C76.8044 78.0767 75.9648 78.4227 75.0894 78.4227C74.214 78.4227 73.3744 78.0767 72.7554 77.4607C72.1363 76.8447 71.7886 76.0093 71.7886 75.1382C71.7886 74.2671 72.1363 73.4316 72.7554 72.8156C73.3744 72.1997 74.214 71.8536 75.0894 71.8536ZM84.9919 71.8536C85.8673 71.8536 86.7069 72.1997 87.3259 72.8156C87.9449 73.4316 88.2927 74.2671 88.2927 75.1382C88.2927 76.0093 87.9449 76.8447 87.3259 77.4607C86.7069 78.0767 85.8673 78.4227 84.9919 78.4227C84.1164 78.4227 83.2769 78.0767 82.6578 77.4607C82.0388 76.8447 81.691 76.0093 81.691 75.1382C81.691 74.2671 82.0388 73.4316 82.6578 72.8156C83.2769 72.1997 84.1164 71.8536 84.9919 71.8536ZM94.8943 71.8536C95.7698 71.8536 96.6094 72.1997 97.2284 72.8156C97.8474 73.4316 98.1952 74.2671 98.1952 75.1382C98.1952 76.0093 97.8474 76.8447 97.2284 77.4607C96.6094 78.0767 95.7698 78.4227 94.8943 78.4227C94.0189 78.4227 93.1793 78.0767 92.5603 77.4607C91.9413 76.8447 91.5935 76.0093 91.5935 75.1382C91.5935 74.2671 91.9413 73.4316 92.5603 72.8156C93.1793 72.1997 94.0189 71.8536 94.8943 71.8536ZM104.797 71.8536C105.672 71.8536 106.512 72.1997 107.131 72.8156C107.75 73.4316 108.098 74.2671 108.098 75.1382C108.098 76.0093 107.75 76.8447 107.131 77.4607C106.512 78.0767 105.672 78.4227 104.797 78.4227C103.921 78.4227 103.082 78.0767 102.463 77.4607C101.844 76.8447 101.496 76.0093 101.496 75.1382C101.496 74.2671 101.844 73.4316 102.463 72.8156C103.082 72.1997 103.921 71.8536 104.797 71.8536Z"
fill="#EC7979"/>
<circle cx="85.0001" cy="85" r="45.5" stroke="#EC7979"/>
</svg>
<h4>Unique Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cupiditate dolore earum eum
laudantium rerum, sunt unde velit voluptatum.</p>
</div>
<div class="plaque">
<svg fill="none" height="170" viewBox="0 0 170 170" width="170" xmlns="http://www.w3.org/2000/svg">
<path d="M75.7308 117.811C75.2572 117.608 74.8637 117.249 74.6123 116.793C74.3608 116.336 74.2659 115.807 74.3423 115.289L78.5542 87.3575H67.3765C67.0221 87.3672 66.6703 87.2939 66.3482 87.1432C66.026 86.9925 65.7422 86.7684 65.5186 86.4882C65.2949 86.2081 65.1375 85.8793 65.0584 85.5274C64.9793 85.1754 64.9806 84.8096 65.0622 84.4583L72.0049 53.8158C72.1271 53.2885 72.4239 52.8201 72.8454 52.4895C73.2669 52.1589 73.7874 51.9864 74.3192 52.0008H97.4615C97.8072 51.9996 98.1488 52.0774 98.4612 52.2283C98.7735 52.3792 99.0488 52.5995 99.2666 52.873C99.4875 53.1495 99.6439 53.4735 99.724 53.8206C99.8042 54.1676 99.806 54.5287 99.7294 54.8765L95.7258 73.2149H106.718C107.152 73.214 107.577 73.3373 107.946 73.5706C108.314 73.804 108.61 74.1381 108.801 74.5348C108.967 74.9156 109.031 75.3343 108.986 75.7484C108.941 76.1624 108.79 76.557 108.547 76.892L78.4616 116.963C78.2583 117.27 77.9868 117.524 77.6692 117.704C77.3515 117.884 76.9967 117.986 76.6334 118C76.3237 117.994 76.0178 117.93 75.7308 117.811ZM89.9402 77.9291L94.5687 56.7151H76.1705L70.2924 82.6433H83.9695L80.2899 106.874L102.09 77.9291H89.9402Z"
fill="#EC7979"/>
<circle cx="85" cy="85" r="45.5" stroke="#EC7979"/>
</svg>
<h4>Unique Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cupiditate dolore earum eum
laudantium rerum, sunt unde velit voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="screen4">
<div class="restriction">
<div class="forbefore">
<div class="text-h2">
<h2>PRICING OPTIONS</h2>
</div>
</div>
<div class="subtitle-div">
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="tariffs">
<div class="tariff">
<div class="plan information">
<h3>Basic</h3>
</div>
<div class="price information">
<h4>$10</h4>
</div>
<div class="usagetime information">
<h5>Free for life</h5>
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
</div>
<div class="tariff">
<div class="plan information">
<h3>Optima</h3>
</div>
<div class="price information">
<h4>$20</h4>
</div>
<div class="usagetime information">
<h5>Free for life</h5>
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
</div>
<div class="tariff">
<div class="plan information">
<h3>Pro</h3>
</div>
<div class="price information">
<h4>$30</h4>
</div>
<div class="usagetime information">
<h5>Free for life</h5>
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
<div class="ability">
1 Gb of Space
</div>
</div>
</div>
</div>
</div>
<div class="screen5">
<div class="text-h2">
<h2>what our customers are saying</h2>
</div>
<div class="subtitle-div">
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="reviews">
<div class="review">
<div class="bubble">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloribus
accusamus expedita repellat similique
odio aspernatur ex, architecto eaque
quo suscipit.</p>
</div>
<div class="container">
<div class="img-avatar"><img src="assets/Rectangle%20119.png" width="70px" height="70px" alt=""></div>
<div class="Name">Davis Rhiel Madsen</div>
<div class="job">Manager</div>
</div>
</div>
<div class="review">
<div class="bubble">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloribus
accusamus expedita repellat similique
odio aspernatur ex, architecto eaque
quo suscipit.</p>
</div>
<div class="container">
<div class="img-avatar"><img src="assets/Rectangle%20119.png" width="70px" height="70px" alt=""></div>
<div class="Name">Davis Rhiel Madsen</div>
<div class="job">Manager</div>
</div>
</div>
<div class="review">
<div class="bubble">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloribus
accusamus expedita repellat similique
odio aspernatur ex, architecto eaque
quo suscipit.</p>
</div>
<div class="container">
<div class="img-avatar"><img src="assets/Rectangle%20119.png" width="70px" height="70px" alt=""></div>
<div class="Name">Davis Rhiel Madsen</div>
<div class="job">Manager</div>
</div>
</div>
</div>
</div>
<div class="screen6">
<div class="brightness">
<div class="text-h2">
<h2>stylish axure design</h2>
</div>
<div class="subtitle-div">
<p class="subtitle">Use the sections you need, remove the ones you don't. Create gorgeous prototypes faster than ever!</p>
</div>
<button>Download</button>
</div>
</div>
<div class="screen7">
<div class="forbefore">
<div class="text-h2">
<h2>CONTACT US</h2>
</div>
</div>
<div class="restriction">
<div class="subtitle-div">
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="inputs">
<form action="" method="post">
<div class="fullform">
<div class="small">
<input type="text" name="" id="small__item" placeholder="Name">
<input type="email" name="" id="small__item" placeholder="Email">
<input type="password" name="" id="small__item" placeholder="Password">
</div>
<div class="big">
<textarea name="" id="big__item" placeholder="Message"></textarea>
</div>
</div>
<button type="submit" id="btn">Send</button>
</form>
</div>
</div>
</div>
<footer>
<div class="socials-footer">
<div class="block">
<a href=""><img alt="" src="assets/github_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/twitter_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/rss_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/pinterest_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/instagram_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/linkedin_icon.png"></a>
</div>
<div class="block">
<a href=""><img alt="" src="assets/facebook_icon.png"></a>
</div>
</div>
<p>© 2015 Axure Themes</p>
</footer>
</body>
</html>