5 <title>Elements - Volcán</title>
7 <meta charset="utf-8" />
8 <meta name="viewport" content="width=device-width, initial-scale=1" />
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">
16 <link rel="stylesheet" type="text/css" href="assets/css/main.css">
20 <section class="head">
21 <div class="container">
23 <div class="col-md-12">
24 <header class="header">
27 <a href="#menu" class="nav-bars">
28 <img src="images/nav_icon.svg" class="img-responsive" alt="Collapsable Navbar">
30 <a href="index.html" class="logo">
31 <span class="symbol"><img src="images/logo.png" alt="Title" /></span><span class="title">volcán</span>
39 <li><a href="index.html">Home</a></li>
40 <li><a href="elements.html">Elements</a></li>
48 <div class="container">
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>
57 <section class="blockquote">
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>
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">
67 All the Lorem Ipsum generators on the Internet tend to repeat.
70 Making this the first true generator on the Internet.
73 The generated Lorem ipsum doler set emet.
76 Always free from repetition injected.
81 <section class="performatted">
85 while (!deck.isInOrder()) {
86 print 'Iteration ' + i;
91 print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
94 <section class="alternate&icon">
95 <div class="col-md-12">
97 <div class="col-md-6">
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>
104 <div class="col-md-6">
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>
115 <section class="table">
116 <div class="container">
118 <div class="col-md-12">
122 <div class="table-responsive">
123 <table class="table table-hover">
134 <td>Ante turpis integer aliquet porttitor.</td>
139 <td>Vis ac commodo adipiscing arcu aliquet.</td>
144 <td> Morbi faucibus arcu accumsan lorem.</td>
149 <td>Vitae integer tempus condimentum.</td>
154 <td>Ante turpis integer aliquet porttitor.</td>
171 <div class="col-md-12">
172 <h1>Alternate</h1><br>
175 <div class="table-responsive">
176 <table class="table table-bordered">
187 <td>Ante turpis integer aliquet porttitor.</td>
192 <td>Vis ac commodo adipiscing arcu aliquet.</td>
197 <td> Morbi faucibus arcu accumsan lorem.</td>
202 <td>Vitae integer tempus condimentum.</td>
207 <td>Ante turpis integer aliquet porttitor.</td>
226 <section class="button">
227 <div class="container">
231 <div class="col-md-12">
233 <div class="col-md-4">
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>
239 <div class="col-md-4">
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>
245 <div class="col-md-4">
247 <button type="button" class="btn-tobais btn-disabled" disabled>DISABLED</button>
254 <div class="col-md-12">
256 <div class="col-md-4">
259 <a href="#" type="button" class="btn btn-tobais btn-fit hover-off">FIT</a>
262 <div class="col-md-4">
264 <a href="#" type="button" class="btn btn-tobais btn-fit-small hover-off">FIT+SMALL</a>
274 <section class="contact-form">
275 <div class="container">
279 <div class="col-md-12">
283 <div class="col-md-6">
284 <div class="form-group">
285 <input type="text" class="form-control" name="name" id="name" placeholder="Name"/>
288 <div class="col-md-6">
289 <div class="form-group">
290 <input type="email" class="form-control" name="email" id="email" placeholder="Email" />
295 <div class="col-md-12">
297 <select class="form-control">
298 <option selected="selected">Select Category</option>
309 <div class="col-md-12">
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
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
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
330 <div class="col-md-12">
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
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
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>
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>
363 <section class ="fit-image">
364 <div class="container">
369 <div class="col-md-12">
370 <img src="images/fit_image.jpg" class="img-responsive img-fit" alt="Responsive image" />
376 <section class="grid-image">
377 <div class="container">
381 <div class="col-md-4">
382 <img src="images/6.jpg" class="img-responsive" alt="Responsive image" />
384 <div class="col-md-4">
385 <img src="images/8.jpg" class="img-responsive" alt="Responsive image"/>
387 <div class="col-md-4">
388 <img src="images/4.jpg" class="img-responsive" alt="Responsive image" />
392 <div class="col-md-4">
393 <img src="images/5.jpg" class="img-responsive" alt="Responsive image" />
395 <div class="col-md-4">
396 <img src="images/1.jpg" class="img-responsive" alt="Responsive image"/>
398 <div class="col-md-4">
399 <img src="images/2.jpg" class="img-responsive" alt="Responsive image" />
406 <section class="image-text">
407 <div class="container">
409 <div class="col-md-4">
410 <img src="images/8.jpg" class="img-responsive" alt="Responsive image"/>
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>
418 <div class="col-md-4 col-md-push-8">
419 <img src="images/2.jpg" class="img-responsive" alt="Responsive image"/>
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>
430 <section class="contact">
431 <div class="container">
433 <div class="col-md-8">
434 <h1 class="">GET IN TOUCH</h1>
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"/>
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" />
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>
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>
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>
474 <section class="social-contact-icon">
475 <div class="container">
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>
482 <li class="social-icons">
483 <a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a>
485 <li class="social-icons">
486 <a href="#" class="icon style2 fa-google-plus"><span class="label">GooglePlus</span></a>
488 <li class="social-icons">
489 <a href="#" class="icon style2 fa-pinterest"><span class="label">pinterest</span></a>
491 <li class="social-icons">
492 <a href="#" class="icon style2 fa-stumbleupon"><span class="label">Stumbleupon</span></a>
494 <li class="social-icons">
495 <a href="#" class="icon style2 fa-tumblr"><span class="label">tumblr</span></a>
497 <li class="social-icons">
498 <a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a>
500 <li class="social-icons">
501 <a href="#" class="icon style2 fa-reddit-alien"><span class="label">reddit-alien</span></a>
503 <li class="social-icons">
504 <a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a>
506 <li class="social-icons">
507 <a href="#" class="icon style2 fa-behance"><span class="label">Behance</span></a>
509 <li class="social-icons">
510 <a href="#" class="icon style2 fa-linkedin"><span class="label">Linkedin</span></a>
512 <li class="social-icons">
513 <a href="#" class="icon style2 fa-vk"><span class="label">vk</span></a>
521 <section class="footer">
523 <div class="container">
525 <div class="col-sm-8 col-xs-9">
526 <p class="right-color">© Copyright 2016. All rights reserved by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a></p>
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>
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>
541 <script src="assets/js/script.js"></script>
543 <!-- ===== Scroll to Top ==== -->
545 if ($('#back-to-top').length) {
546 $('#back-to-top').on('click', function (e) {
548 $('html,body').animate({