Initial commit
[reisub_web.git/.git] / elements.html
1 <!DOCTYPE HTML>
2
3 <html>
4         <head>
5                 <title>Elements - Volca&#769;n</title>
6
7                 <meta charset="utf-8" />
8                 <meta name="viewport" content="width=device-width, initial-scale=1" />
9
10                 <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
11                 <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
12                 <link rel="stylesheet" href="assets/ionicons-2.0.1/css/ionicons.min.css">
13                 <link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
14                 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
15
16                 <link rel="stylesheet" type="text/css" href="assets/css/main.css">
17         </head>
18
19         <body>
20                 <section class="head">
21                         <div class="container">
22                                 <div class="row">
23                                         <div class="col-md-12">
24                                                 <header class="header">
25                                                         <div class="inner">
26                                                                 <!-- Logo -->
27                                                                 <a href="#menu" class="nav-bars">
28                                                                         <img src="images/nav_icon.svg" class="img-responsive" alt="Collapsable Navbar">
29                                                                 </a>
30                                                                 <a href="index.html" class="logo">
31                                                                         <span class="symbol"><img src="images/logo.png" alt="Title" /></span><span class="title">volca&#769;n</span>
32                                                                 </a>
33                                                         </div>
34                                                 </header>
35                                                 <!-- Menu -->
36                                                 <nav id="menu">
37                                                         <h2>Menu</h2>
38                                                         <ul>
39                                                                 <li><a href="index.html">Home</a></li>
40                                                                 <li><a href="elements.html">Elements</a></li>
41                                                         </ul>
42                                                 </nav>
43                                         </div>
44                                 </div>
45                         </div>
46                 </section>
47
48                 <div class="container">
49                         <div id="main">
50                                 <h2>Elements</h2>
51                         </div>
52                         <section class="paragraph">
53                                 <h1>Heading 1 With Paragraph</h1>
54                                         <p>Lorem Ipsum available, but the majority have suffered This alteration in some from, by injected is a humour, or randomised words which don't look even sligh is made believable. If to use and yammi passage of Lorem Ipsum, you need to be sure there isn't by pioneer designer anything embarrassing hidden in the middle of</p>
55                         </section>
56
57                         <section class="blockquote">
58                                 <h1>Blockquote</h1>
59                                         <blockquote>Injected humour, or randomised words which don’t look even sligh is made  believable If  to use and passage of Lorem Ipsum.Hello Im Secspaire.</blockquote>
60                         </section>
61
62                         <section class="unordered-list">
63                                 <h1>Unordered List</h1>
64                                         <p>Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected<br><br> is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer.</p>
65                                 <ul class="unordarlist">
66                                         <li>
67                                                 All the Lorem Ipsum generators on the Internet tend to repeat.
68                                         </li>
69                                         <li>
70                                                 Making this the first true generator on the Internet.
71                                         </li>
72                                         <li>
73                                                 The generated Lorem ipsum doler set emet.
74                                         </li>
75                                         <li>
76                                                 Always free from repetition injected.
77                                         </li>
78                                 </ul>
79                         </section>
80
81                         <section class="performatted">
82                                 <h1>Preformatted</h1>
83                                         <pre><code>i = 0;
84
85 while (!deck.isInOrder()) {
86 print 'Iteration ' + i;
87 deck.shuffle();
88 i++;
89 }
90
91 print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
92                         </section>
93
94                         <section class="alternate&icon">
95                                 <div class="col-md-12">
96                                         <div class="row">
97                                                 <div class="col-md-6">
98                                                         <h1>Alternate</h1>
99                                                         <p>All the Lorem Ipsum generators on the Internet tend to repeat.</p><hr>
100                                                         <p>Making this the first true generator on the Internet.</p><hr>
101                                                         <p>The generated Lorem ipsum doler set emet.</p><hr>
102                                                         <p>Always free from repetition injected.</p><hr>
103                                                 </div>
104                                                 <div class="col-md-6">
105                                                         <h1>Icons</h1>
106                                                         <li class="fa fa-facebook" aria-hidden="true"></li>
107                                                         <li class="fa fa-twitter" aria-hidden="true"></li>
108                                                         <li class="fa fa-google-plus" aria-hidden="true"></li>
109                                                         <li class="fa fa-pinterest" aria-hidden="true"></li>
110                                                 </div>
111                                         </div>
112                                 </div>
113                         </section>
114
115                         <section class="table">
116                                 <div class="container">
117                                         <div class="row">
118                                                 <div class="col-md-12">
119                                                         <h1>Table</h1><br>
120                                                         <h4>Default</h4>
121                                                         <div class"row">
122                                                                 <div class="table-responsive">
123                                                                         <table class="table table-hover">
124                                                                                 <thead>
125                                                                                         <tr>
126                                                                                                 <th>Name</th>
127                                                                                                 <th>Description</th>
128                                                                                                 <th>Price</th>
129                                                                                         </tr>
130                                                                                 </thead>
131                                                                                 <tbody>
132                                                                                         <tr>
133                                                                                                 <td>Item One</td>
134                                                                                                 <td>Ante turpis integer aliquet porttitor.</td>
135                                                                                                 <td>29.99</td>
136                                                                                         </tr>
137                                                                                         <tr>
138                                                                                                 <td>Item Two</td>
139                                                                                                 <td>Vis ac commodo adipiscing arcu aliquet.</td>
140                                                                                                 <td>19.99</td>
141                                                                                         </tr>
142                                                                                         <tr>
143                                                                                                 <td>Item Three</td>
144                                                                                                 <td> Morbi faucibus arcu accumsan lorem.</td>
145                                                                                                 <td>29.99</td>
146                                                                                         </tr>
147                                                                                         <tr>
148                                                                                                 <td>Item Four</td>
149                                                                                                 <td>Vitae integer tempus condimentum.</td>
150                                                                                                 <td>19.99</td>
151                                                                                         </tr>
152                                                                                         <tr>
153                                                                                                 <td>Item Five</td>
154                                                                                                 <td>Ante turpis integer aliquet porttitor.</td>
155                                                                                                 <td>29.99</td>
156                                                                                         </tr>
157                                                                                 </tbody>
158                                                                                 <tfoot>
159                                                                                         <tr>
160                                                                                                 <td></td>
161                                                                                                 <td></td>
162                                                                                                 <td>100.00</td>
163                                                                                         </tr>
164                                                                                 </tfoot>
165                                                                         </table>
166                                                                 </div>
167                                                         </div>
168                                                 </div>
169                                         </div>
170                                         <div class="row">
171                                                 <div class="col-md-12">
172                                                         <h1>Alternate</h1><br>
173                                                         <h4>Default</h4>
174                                                         <div class"row">
175                                                                 <div class="table-responsive">
176                                                                         <table class="table table-bordered">
177                                                                                 <thead>
178                                                                                         <tr>
179                                                                                                 <th>Name</th>
180                                                                                                 <th>Description</th>
181                                                                                                 <th>Price</th>
182                                                                                         </tr>
183                                                                                 </thead>
184                                                                                 <tbody>
185                                                                                         <tr>
186                                                                                                 <td>Item One</td>
187                                                                                                 <td>Ante turpis integer aliquet porttitor.</td>
188                                                                                                 <td>29.99</td>
189                                                                                         </tr>
190                                                                                         <tr>
191                                                                                                 <td>Item Two</td>
192                                                                                                 <td>Vis ac commodo adipiscing arcu aliquet.</td>
193                                                                                                 <td>19.99</td>
194                                                                                         </tr>
195                                                                                         <tr>
196                                                                                                 <td>Item Three</td>
197                                                                                                 <td> Morbi faucibus arcu accumsan lorem.</td>
198                                                                                                 <td>29.99</td>
199                                                                                         </tr>
200                                                                                         <tr>
201                                                                                                 <td>Item Four</td>
202                                                                                                 <td>Vitae integer tempus condimentum.</td>
203                                                                                                 <td>19.99</td>
204                                                                                         </tr>
205                                                                                         <tr>
206                                                                                                 <td>Item Five</td>
207                                                                                                 <td>Ante turpis integer aliquet porttitor.</td>
208                                                                                                 <td>29.99</td>
209                                                                                         </tr>
210                                                                                 </tbody>
211                                                                                 <tfoot>
212                                                                                         <tr>
213                                                                                                 <td></td>
214                                                                                                 <td></td>
215                                                                                                 <td>100.00</td>
216                                                                                         </tr>
217                                                                                 </tfoot>
218                                                                         </table>
219                                                                 </div>
220                                                         </div>
221                                                 </div>
222                                         </div>
223                                 </div>
224                         </section>
225
226                         <section class="button">
227                                 <div class="container">
228                                 <h1>Buttons</h1>
229                                         <section>
230                                                 <div class="row">
231                                                         <div class="col-md-12">
232                                                                 <p>
233                                                                         <div class="col-md-4">
234                                                                                 <div class="row">
235                                                                                         <a href="#" type="button" class="btn btn-tobais btn-defalt hover-off">DEFALT</a>
236                                                                                         <a href="#" type="button" class="btn btn-tobais btn-special">SPECIAL <span class="ion-ios-cloud-download" aria-hidden="true"></span></a>
237                                                                                 </div>
238                                                                         </div>
239                                                                         <div class="col-md-4">
240                                                                                 <div class="row">
241                                                                                         <a href="#" type="button" class="btn btn-tobais btn-big hover-off">BIG</a>
242                                                                                 <a href="#" type="button" class="btn btn-tobais btn-small hover-off">SMALL</a>
243                                                                                 </div>
244                                                                         </div>
245                                                                         <div class="col-md-4">
246                                                                                 <div class="row">
247                                                                                         <button type="button" class="btn-tobais btn-disabled" disabled>DISABLED</button>
248                                                                                 </div>
249                                                                         </div>
250                                                                 </p>
251                                                         </div>
252                                                 </div>
253                                                 <div class="row">
254                                                         <div class="col-md-12">
255                                                                 <p>
256                                                                         <div class="col-md-4">
257                                                                                 
258                                                                                 <div class="row">
259                                                                                         <a href="#" type="button" class="btn btn-tobais btn-fit hover-off">FIT</a>
260                                                                                 </div>
261                                                                         </div>
262                                                                         <div class="col-md-4">
263                                                                                 <div class="row">
264                                                                                         <a href="#" type="button" class="btn btn-tobais btn-fit-small hover-off">FIT+SMALL</a>
265                                                                                 </div>
266                                                                         </div>
267                                                                 </p>
268                                                         </div>
269                                                 </div>
270                                         </section>
271                                 </div>
272                         </section>
273
274                         <section class="contact-form">
275                                 <div class="container">
276                                 <!-- Form -->
277                                         <section>
278                                                 <div class="row">
279                                                         <div class="col-md-12">
280                                                                 <h1>From</h1>
281                                                                 <form>
282                                                                         <div class="row">
283                                                                                 <div class="col-md-6">
284                                                                                         <div class="form-group">
285                                                                                                 <input type="text" class="form-control" name="name" id="name" placeholder="Name"/>
286                                                                                         </div>
287                                                                                 </div>
288                                                                                 <div class="col-md-6">
289                                                                                         <div class="form-group">
290                                                                                                 <input type="email" class="form-control" name="email" id="email" placeholder="Email" />
291                                                                                         </div>
292                                                                                 </div>
293                                                                         </div>
294                                                                         <div class="row">
295                                                                                 <div class="col-md-12">
296                                                                                         <form>
297                                                                                                 <select class="form-control">
298                                                                                                         <option selected="selected">Select Category</option>
299                                                                                                         <option>1</option>
300                                                                                                         <option>2</option>
301                                                                                                         <option>3</option>
302                                                                                                         <option>4</option>
303                                                                                                         <option>5</option>
304                                                                                                 </select>
305                                                                                         </form>
306                                                                                 </div>
307                                                                         </div>
308                                                                         <div class="row">
309                                                                                 <div class="col-md-12">
310                                                                                         <div class="row">
311                                                                                                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left">
312                                                                                                         <label class="checkbox-inline">
313                                                                                                                 <input type="checkbox" id="inlineCheckbox1" value="option1"> Low
314                                                                                                         </label>
315                                                                                                 </div>
316                                                                                                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center">
317                                                                                                    <label class="checkbox-inline">
318                                                                                                                 <input type="checkbox" id="inlineCheckbox2" value="option2"> Normal
319                                                                                                         </label>
320                                                                                             </div>
321                                                                                             <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
322                                                                                                     <label class="checkbox-inline">
323                                                                                                                 <input type="checkbox" id="inlineCheckbox3" value="option3"> High
324                                                                                                         </label>
325                                                                                             </div>
326                                                                                         </div>
327                                                                                 </div>
328                                                                         </div>
329                                                                         <div class="row">
330                                                                                 <div class="col-md-12">
331                                                                                         <div class="row">
332                                                                                                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left">
333                                                                                                 <label class="radio-inline">
334                                                                                                                 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Apple
335                                                                                                         </label>
336                                                                                                 </div>
337                                                                                                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center">
338                                                                                                 <label class="radio-inline">
339                                                                                                                 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Mango
340                                                                                                         </label>
341                                                                                                  </div>
342                                                                                         </div>
343                                                                                 </div>
344                                                                         </div>
345                                                                         <div class="row">
346                                                                                 <div class="col-md-12">
347                                                                                         <div class="from-group">
348                                                                                                 <textarea class="form-control" rows="2" name="message" id="message" placeholder="Message..."></textarea>
349                                                                                         </div>
350                                                                                         <p>
351                                                                                           <a href="#" type="button" class="btn btn-tobais btn-send">SEND MESSAGE</a>
352                                                                                           <a href="#" type="button" class="btn btn-tobais btn-reset">RESET</a>
353                                                                                         </p>
354                                                                                 </div>
355                                                                         </div>
356                                                                 </form>
357                                                         </div>
358                                                 </div>
359                                         </section>
360                                 </div>
361                         </section>
362
363                         <section class ="fit-image">
364                                 <div class="container">
365                                 <h1>IMAGE</h1><br>
366                                         <h4>FIT</h4>
367                                                 <div class="row">
368                                                 
369                                                 <div class="col-md-12">
370                                                         <img src="images/fit_image.jpg" class="img-responsive img-fit" alt="Responsive image" />
371                                                 </div>
372                                         </div>
373                                 </div>
374                         </section>
375
376                         <section class="grid-image">
377                                 <div class="container">
378                                         <div class="tiles">
379                                                 <h4>GRID</h4>
380                                                         <div class="row">
381                                                                 <div class="col-md-4">
382                                                                         <img src="images/6.jpg" class="img-responsive" alt="Responsive image" />
383                                                                 </div>
384                                                                 <div class="col-md-4">
385                                                                         <img src="images/8.jpg" class="img-responsive" alt="Responsive image"/>
386                                                                 </div>
387                                                                 <div class="col-md-4">
388                                                                         <img src="images/4.jpg" class="img-responsive" alt="Responsive image" />
389                                                                 </div>
390                                                         </div>
391                                                         <div class="row">
392                                                                 <div class="col-md-4">
393                                                                         <img src="images/5.jpg" class="img-responsive" alt="Responsive image" />
394                                                                 </div>
395                                                                 <div class="col-md-4">
396                                                                         <img src="images/1.jpg" class="img-responsive" alt="Responsive image"/>
397                                                                 </div>
398                                                                 <div class="col-md-4">
399                                                                         <img src="images/2.jpg" class="img-responsive" alt="Responsive image" />
400                                                                 </div>
401                                                         </div>
402                                         </div>
403                                 </div>
404                         </section>
405
406                         <section class="image-text">
407                                 <div class="container">                                         
408                                         <div class="row">
409                                                 <div class="col-md-4">
410                                                         <img src="images/8.jpg" class="img-responsive" alt="Responsive image"/>
411                                                 </div>
412                                                 <div class="col-md-8">
413                                                         <p class="image-text-text">Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.<br><br>
414                                                         Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.</p>  
415                                                 </div>
416                                         </div>                                                                                          
417                                         <div class="row">
418                                                 <div class="col-md-4 col-md-push-8">
419                                                         <img src="images/2.jpg" class="img-responsive" alt="Responsive image"/>
420                                                 </div>
421                                                 <div class="col-md-8 col-md-pull-4">
422                                                         <p class="image-text-text">Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.<br><br>
423                                                         Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.</p>  
424                                                 </div>
425                                         </div>                                          
426                                 </div>
427                         </section>                              
428                 </div>
429
430                 <section class="contact">
431                         <div class="container">
432                                 <div class="row">
433                                         <div class="col-md-8">
434                                                 <h1 class="">GET IN TOUCH</h1>
435                                                         <form>
436                                                                 <div class="row">
437                                                                         <div class="col-md-6">
438                                                                                 <div class="form-group">
439                                                                                         <input type="text" class="form-control gt" name="name" id="name" placeholder="Name"/>
440                                                                                 </div>
441                                                                         </div>
442                                                                         <div class="col-md-6">
443                                                                                 <div class="form-group">
444                                                                                         <input type="email" class="form-control gt" name="email" id="email" placeholder="Email" />
445                                                                                 </div>
446                                                                         </div>
447                                                                 </div>
448                                                                 <div class="row">
449                                                                         <div class="col-md-12">
450                                                                                 <div class="from-group">
451                                                                                         <textarea class="form-control gt" rows="2" name="message" id="message" placeholder="Message..."></textarea>
452                                                                                 </div>
453                                                                         </div>
454                                                                 </div>
455                                                         </form>
456                                                         <div class="form-group"  align="right">
457                                                             <div class="col-sm-offset-2 col-sm-10">
458                                                               <a href="#" type="submit" class="btn btn-tobais btn-send-2">SEND</a>
459                                                             </div>
460                                                         </div>
461                                         </div>
462                                         <div class="col-md-4">
463                                                 <h1 class="">CONTACT INFO</h1>
464                                                         <p>Simple words that are so easy to forget. Every day when I wake up I try to remind myself of just that: Be Useful</p>
465                                                         <p><Strong>Address: </Strong> 36th Street, Block A, Mischigan, USA</p>
466                                                         <p><Strong>Call:</Strong> 444 123 025 12</p>                                            
467                                                         <p><Strong>Fax: </Strong>444 123 025 12</p>                                             
468                                                         <p><Strong>Email: </Strong>color@gmail.com</p>
469                                         </div>
470                                 </div>
471                         </div>
472                 </section>
473
474                 <section class="social-contact-icon">
475                         <div class="container">
476                                 <div class="row">
477                                         <div class="col-md-12 col-xs-12">
478                                                 <ul class="text-center social-contact">
479                                                         <li class="social-icons">
480                                                         <a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a>
481                                                         </li>
482                                                         <li class="social-icons">
483                                                                 <a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a>
484                                                         </li>
485                                                         <li class="social-icons">
486                                                                 <a href="#" class="icon style2 fa-google-plus"><span class="label">GooglePlus</span></a>
487                                                         </li>
488                                                         <li class="social-icons">
489                                                                 <a href="#" class="icon style2 fa-pinterest"><span class="label">pinterest</span></a>
490                                                         </li>
491                                                         <li class="social-icons">
492                                                                 <a href="#" class="icon style2 fa-stumbleupon"><span class="label">Stumbleupon</span></a>
493                                                         </li>
494                                                         <li class="social-icons">
495                                                                 <a href="#" class="icon style2 fa-tumblr"><span class="label">tumblr</span></a>
496                                                         </li>
497                                                         <li class="social-icons">
498                                                                 <a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a>
499                                                         </li>
500                                                         <li class="social-icons">
501                                                                 <a href="#" class="icon style2 fa-reddit-alien"><span class="label">reddit-alien</span></a>
502                                                         </li>
503                                                         <li class="social-icons">
504                                                                 <a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a>
505                                                         </li>
506                                                         <li class="social-icons">
507                                                                 <a href="#" class="icon style2 fa-behance"><span class="label">Behance</span></a>
508                                                         </li>
509                                                         <li class="social-icons">
510                                                                 <a href="#" class="icon style2 fa-linkedin"><span class="label">Linkedin</span></a>
511                                                         </li>
512                                                         <li class="social-icons">
513                                                                 <a href="#" class="icon style2 fa-vk"><span class="label">vk</span></a>
514                                                         </li>
515                                                 </ul>                                                   
516                                         </div>                                          
517                                 </div>
518                         </div>
519                 </section>
520
521                 <section class="footer">
522                         <footer>
523                                 <div class="container">
524                                         <div class="row">
525                                                 <div class="col-sm-8 col-xs-9">
526                                                         <p class="right-color">&copy; Copyright 2016. All rights reserved by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a></p>
527                                                 </div>
528                                                 <div class="col-sm-4 col-xs-3" align="right">
529                                                         <a href="#" id="back-to-top" class="top" >TOP <i class="fa fa-angle-up" aria-hidden="true"></i> </a>
530                                                 </div>
531                                         </div>
532                                 </div>
533                         </footer>
534                 </section>
535
536                 <!-- Scripts -->
537                 <script src="assets/js/jquery-3.1.0.min.js"></script>
538                 <script src="assets/js/bootstrap.min.js"></script>
539                 <script src="assets/js/jquery.magnific-popup.min.js"></script>
540
541                 <script src="assets/js/script.js"></script>
542                 
543                 <!--  ===== Scroll to Top ====  -->
544                 <script>
545                         if ($('#back-to-top').length) {
546                             $('#back-to-top').on('click', function (e) {
547                                 e.preventDefault();
548                                 $('html,body').animate({
549                                     scrollTop: 0
550                                 }, 700);
551                             });
552                         }
553                 </script>
554                 
555         </body>
556 </html>