Advertisement
Chamuxx

Prueba

Dec 13th, 2017
341
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.00 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <!--
  8. Tinker Template
  9. http://www.templatemo.com/tm-506-tinker
  10. -->
  11. <title>Tinker CSS Template</title>
  12. <meta name="description" content="">
  13. <meta name="viewport" content="width=device-width, initial-scale=1">
  14.  
  15. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  16. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  17.  
  18. <link rel="apple-touch-icon" href="apple-touch-icon.png">
  19.  
  20. <link rel="stylesheet" href="css/bootstrap.min.css">
  21. <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  22. <link rel="stylesheet" href="css/fontAwesome.css">
  23. <link rel="stylesheet" href="css/hero-slider.css">
  24. <link rel="stylesheet" href="css/owl-carousel.css">
  25. <link rel="stylesheet" href="css/templatemo-style.css">
  26. <link rel="stylesheet" href="css/lightbox.css">
  27.  
  28. <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
  29. </head>
  30.  
  31. <body>
  32. <div class="header">
  33. <div class="container">
  34. <nav class="navbar navbar-inverse" role="navigation">
  35. <div class="navbar-header">
  36. <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
  37. <span class="sr-only">Toggle navigation</span>
  38. <span class="icon-bar"></span>
  39. <span class="icon-bar"></span>
  40. <span class="icon-bar"></span>
  41. </button>
  42. <a href="#" class="navbar-brand scroll-top"> </a>
  43. </div>
  44. <!--/.navbar-header-->
  45. <div id="main-nav" class="collapse navbar-collapse">
  46. <ul class="nav navbar-nav">
  47. <li><a href="#" class="scroll-top">Inicio</a></li>
  48. <li><a href="#" class="scroll-link" data-id="about">Servicios</a></li>
  49. <li><a href="#" class="scroll-link" data-id="portfolio">Galería</a></li>
  50. <li><a href="#" class="scroll-link" data-id="testimonial">Quienes Somos</a></li>
  51. <li><a href="#" class="scroll-link" data-id="contact-us">Contáctanos</a></li>
  52. </ul>
  53. </div>
  54. <!--/.navbar-collapse-->
  55. </nav>
  56. <!--/.navbar-->
  57. </div>
  58. <!--/.container-->
  59. </div>
  60. <!--/.header-->
  61.  
  62.  
  63. <div class="parallax-content baner-content" id="home">
  64. <div class="container">
  65. <div class="text-content">
  66. <img src="img/logo.png" width="80%">
  67. <p>Phasellus aliquam finibus est, id tincidunt mauris fermentum a. In elementum diam et dui congue, ultrices bibendum mi lacinia. Aliquam lobortis dapibus nunc, nec tempus odio posuere quis. </p>
  68. <div class="primary-white-button">
  69. <a href="#" class="scroll-link" data-id="about">Comencemos</a>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74.  
  75.  
  76. <section id="about" class="page-section">
  77. <div class="container">
  78. <div class="row">
  79. <div class="col-md-3 col-sm-6 col-xs-12">
  80. <div class="service-item">
  81. <div class="image">
  82. <img src="img/service_icon_01.png" alt="">
  83. </div>
  84. <h4>Pantallas</h4>
  85. <div class="line-dec"></div>
  86. <p>Hermosas pantallas para su hogar</p>
  87. <div class="primary-blue-button">
  88. <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="col-md-3 col-sm-6 col-xs-12">
  93. <div class="service-item">
  94. <div class="image">
  95. <img src="img/service_icon_02.png" alt="">
  96. </div>
  97. <h4>Lámparas</h4>
  98. <div class="line-dec"></div>
  99. <p>El arte del vitral plasmado en....</p>
  100. <div class="primary-blue-button">
  101. <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
  102. </div>
  103. </div>
  104. </div>
  105. <div class="col-md-3 col-sm-6 col-xs-12">
  106. <div class="service-item">
  107. <div class="image">
  108. <img src="img/service_icon_03.png" alt="">
  109. </div>
  110. <h4>Puertas</h4>
  111. <div class="line-dec"></div>
  112. <p>Integer hendrerit vehicula mauris, sed pellentesque sem facilisis at. Aliquam vel arcu metus. Nam sem lectus, mattis non tellus et, tincidunt condimentum eros.</p>
  113. <div class="primary-blue-button">
  114. <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="col-md-3 col-sm-6 col-xs-12">
  119. <div class="service-item">
  120. <div class="image">
  121. <img src="img/service_icon_04.png" alt="">
  122. </div>
  123. <h4>Diseños Personalizados</h4>
  124. <div class="line-dec"></div>
  125. <p>Integer hendrerit vehicula mauris, sed pellentesque sem facilisis at. Aliquam vel arcu metus. Nam sem lectus, mattis non tellus et, tincidunt condimentum eros.</p>
  126. <div class="primary-blue-button">
  127. <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
  128. </div>
  129.  
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </section>
  135.  
  136. <section id="portfolio">
  137. <div class="content-wrapper">
  138. <div class="inner-container container">
  139. <div class="row">
  140. <div class="col-md-4 col-sm-12">
  141. <div class="section-heading">
  142. <h4>Galería</h4>
  143. <div class="line-dec"></div>
  144. <p>Aquí podrás encontrar todos nuestros trabajos.</p>
  145. <div class="filter-categories">
  146. <ul class="project-filter">
  147. <li class="filter" data-filter="all"><span>Todos</span></li>
  148. <li class="filter" data-filter="branding"><span>Pantallas</span></li>
  149. <li class="filter" data-filter="graphic"><span>Lámparas</span></li>
  150. <li class="filter" data-filter="nature"><span>Puertas</span></li>
  151. <li class="filter" data-filter="animation"><span>Personalizados</span></li>
  152. </ul>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="col-md-8">
  157. <div class="projects-holder-3">
  158. <div class="projects-holder">
  159. <div class="row">
  160. <div class="col-md-6 col-sm-6 project-item mix branding">
  161. <div class="thumb">
  162. <div class="image">
  163. <a href="img/portfolio_big_item_a.jpg" data-lightbox="image-1"><img src="img/portfolio_item_a.jpg"></a>
  164. </div>
  165. </div>
  166. </div>
  167. <div class="col-md-6 col-sm-6 project-item mix branding">
  168. <div class="thumb">
  169. <div class="image">
  170. <a href="img/portfolio_big_item_b.jpg" data-lightbox="image-1"><img src="img/portfolio_item_b.jpg"></a>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="col-md-6 col-sm-6 project-item mix graphic">
  175. <div class="thumb">
  176. <div class="image">
  177. <a href="img/portfolio_big_item_c.jpg" data-lightbox="image-1"><img src="img/portfolio_item_c.jpg"></a>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="col-md-6 col-sm-6 project-item mix graphic">
  182. <div class="thumb">
  183. <div class="image">
  184. <a href="img/portfolio_big_item_d.jpg" data-lightbox="image-1"><img src="img/portfolio_item_d.jpg"></a>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="col-md-6 col-sm-6 project-item mix graphic">
  189. <div class="thumb">
  190. <div class="image">
  191. <a href="img/portfolio_big_item_e.jpg" data-lightbox="image-1"><img src="img/portfolio_item_e.jpg"></a>
  192. </div>
  193. </div>
  194. </div>
  195. <div class="col-md-6 col-sm-6 project-item mix nature">
  196. <div class="thumb">
  197. <div class="image">
  198. <a href="img/portfolio_big_item_f.jpg" data-lightbox="image-1"><img src="img/portfolio_item_f.jpg"></a>
  199.  
  200.  
  201.  
  202. </div>
  203. </div>
  204. </div>
  205. <div class="col-md-6 col-sm-6 project-item mix nature">
  206. <div class="thumb">
  207. <div class="image">
  208. <a href="img/portfolio_big_item_g.jpg" data-lightbox="image-1"><img src="img/portfolio_item_g.jpg"></a>
  209. </div>
  210. </div>
  211. </div>
  212. <div class="col-md-6 col-sm-6 project-item mix animation">
  213. <div class="thumb">
  214. <div class="image">
  215. <a href="img/portfolio_big_item_h.jpg" data-lightbox="image-1"><img src="img/portfolio_item_h.jpg"></a>
  216. </div>
  217. </div>
  218. </div>
  219. <div class="col-md-6 col-sm-6 project-item mix animation">
  220. <div class="thumb">
  221. <div class="image">
  222. <a href="img/portfolio_big_item_i.jpg" data-lightbox="image-1"><img src="img/portfolio_item_i.jpg"></a>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="col-md-6 col-sm-6 project-item mix animation">
  227. <div class="thumb">
  228. <div class="image">
  229. <a href="img/portfolio_big_item_j.jpg" data-lightbox="image-1"><img src="img/portfolio_item_j.jpg"></a>
  230. </div>
  231. </div>
  232. </div>
  233. <div class="col-md-6 col-sm-6 project-item mix animation">
  234. <div class="thumb">
  235. <div class="image">
  236. <a href="img/portfolio_big_item_k.jpg" data-lightbox="image-1"><img src="img/portfolio_item_k.jpg"></a>
  237. </div>
  238. </div>
  239. </div>
  240.  
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. </section>
  249.  
  250.  
  251. <section id="testimonial">
  252. <div class="container">
  253. <div class="row">
  254. <div class="col-md-6 col-md-offset-3">
  255. <div id="owl-testimonials" class="owl-carousel owl-theme">
  256. <div class="item">
  257. <div class="testimonials-item">
  258. <a href="img/portfolio_big_item_k.jpg" data-lightbox="image-1"><img src="img/portfolio_item_k.jpg"></a>
  259. <p>“ Vivamus cursus at est in gravida. Phasellus semper est quis tellus viverra consectetur eget sed leo. Quisque consectetur tempor cursus. Nullam ut mauris fermentum, pretium risus id, tincidunt ante. ”</p>
  260. <h4>George Rich</h4>
  261. <span>Web Designer</span>
  262. </div>
  263. </div>
  264. <div class="item">
  265. <div class="testimonials-item">
  266. <p>“ Phasellus orci nisi, varius sed lacinia et, pulvinar quis est. Curabitur a tincidunt tortor. Cras rhoncus sodales massa sagittis malesuada. Nulla maximus vitae lorem vel elementum. ”</p>
  267. <h4>John Henry</h4>
  268. <span>New Manager</span>
  269. </div>
  270. </div>
  271. <div class="item">
  272. <div class="testimonials-item">
  273. <p>“ Phasellus aliquam finibus est, id tincidunt mauris fermentum a. In elementum diam et dui congue, ultrices bibendum mi lacinia. Aliquam lobortis dapibus nunc, nec tempus odio posuere quis. ”</p>
  274. <h4>Danny Cute</h4>
  275. <span>CEO Founder</span>
  276. </div>
  277. </div>
  278. <div class="item">
  279. <div class="testimonials-item">
  280. <p>“ Quisque ut ligula venenatis, euismod risus vel, consequat lacus. In ut purus id felis euismod cursus. Praesent in pulvinar arcu, vitae hendrerit lectus. Quisque a urna magna. ”</p>
  281. <h4>Richard Beal</h4>
  282. <span>CSS Developer</span>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </section>
  290.  
  291. <div id="contact-us">
  292. <div class="container">
  293. <div class="row">
  294. <div class="col-md-12">
  295. <div class="section-heading">
  296. <h4>Contáctanos</h4>
  297. <div class="line-dec"></div>
  298. <p>Donec sit amet commodo arcu. Sed sit amet iaculis mi, vel fermentum nisi. Morbi dui enim, vestibulum non accumsan ac, tempor non nisl.</p>
  299. <div class="pop-button">
  300. <h4>Envíanos un Mensaje</h4>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  305. <div class="row">
  306. <div class="col-md-6 col-md-offset-3">
  307. <div class="pop">
  308. <span>✖</span>
  309. <form id="contact" action="#" method="post">
  310. <div class="row">
  311. <div class="col-md-12">
  312. <fieldset>
  313. <input name="name" type="text" class="form-control" id="name" placeholder="Tu nombre..." required>
  314. </fieldset>
  315. </div>
  316. <div class="col-md-12">
  317. <fieldset>
  318. <input name="email" type="email" class="form-control" id="email" placeholder="tu email..." required>
  319. </fieldset>
  320. </div>
  321. <div class="col-md-12">
  322. <fieldset>
  323. <textarea name="message" rows="6" class="form-control" id="message" placeholder="Tu mensaje..." required></textarea>
  324. </fieldset>
  325. </div>
  326. <div class="col-md-12">
  327. <fieldset>
  328. <button type="submit" id="form-submit" class="btn">Enviar Mensaje</button>
  329. </fieldset>
  330. </div>
  331. </div>
  332. </form>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. </div>
  338.  
  339. <div id="map">
  340. <!-- How to change your own map point
  341. 1. Go to Google Maps
  342. 2. Click on your location point
  343. 3. Click "Share" and choose "Embed map" tab
  344. 4. Copy only URL and paste it within the src="" field below
  345. -->
  346. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3743.192308445002!2d-70.13290608556316!3d-20.25085765359521!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x915214650c401099%3A0x97a21ca9f6ad7c85!2sAgua+Santa%2C+Iquique%2C+Regi%C3%B3n+de+Tarapac%C3%A1!5e0!3m2!1ses-419!2scl!4v1512504725143" width="100%" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
  347. </div>
  348.  
  349. <footer>
  350. <div class="container">
  351. <div class="row">
  352. <div class="col-md-4 col-sm-12">
  353. <div class="logo">
  354.  
  355. <a href="#" class="scroll-top"> <img src="img/logo.png" width="80%"></a>
  356. <p>Copyright &copy; 2017 PC Nexus
  357. | Design: <span>PC Nexus</span></p>
  358. </div>
  359. </div>
  360. <div class="col-md-4 col-sm-12">
  361. <div class="location">
  362. <h4>Ubicación</h4>
  363. <ul>
  364. <li>Iquique <br>Tarapacá-Chile</li>
  365. <li>Agua Santa 3096<br></li>
  366. </ul>
  367. </div>
  368. </div>
  369. <div class="col-md-2 col-sm-12">
  370. <div class="contact-info">
  371. <h4>Más Información</h4>
  372. <ul>
  373. <li><em>Teléfono</em>: 57 2 212573</li>
  374. <li><em>Celular</em>: 9 62409626</li>
  375. <li><em>Email</em>: eblanchard@decoartevitral.cl</li>
  376. </ul>
  377. </div>
  378. </div>
  379. <div class="col-md-2 col-sm-12">
  380. <div class="connect-us">
  381. <h4>Get Social with us</h4>
  382. <ul>
  383. <li><a href="https://www.facebook.com/templatemo" target="_parent"><i class="fa fa-facebook"></i></a></li>
  384. <li><a href="https://www.google.com/+templatemo" target="_blank"><i class="fa fa-twitter"></i></a></li>
  385. <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  386. <li><a href="#"><i class="fa fa-rss"></i></a></li>
  387. <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  388. </ul>
  389. </div>
  390. </div>
  391. </div>
  392. </div>
  393. </footer>
  394.  
  395. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  396. <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
  397.  
  398. <script src="js/vendor/bootstrap.min.js"></script>
  399.  
  400. <script src="js/plugins.js"></script>
  401. <script src="js/main.js"></script>
  402.  
  403. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  404. <script type="text/javascript">
  405. $(document).ready(function() {
  406. // navigation click actions
  407. $('.scroll-link').on('click', function(event){
  408. event.preventDefault();
  409. var sectionID = $(this).attr("data-id");
  410. scrollToID('#' + sectionID, 750);
  411. });
  412. // scroll to top action
  413. $('.scroll-top').on('click', function(event) {
  414. event.preventDefault();
  415. $('html, body').animate({scrollTop:0}, 'slow');
  416. });
  417. // mobile nav toggle
  418. $('#nav-toggle').on('click', function (event) {
  419. event.preventDefault();
  420. $('#main-nav').toggleClass("open");
  421. });
  422. });
  423. // scroll function
  424. function scrollToID(id, speed){
  425. var offSet = 50;
  426. var targetOffset = $(id).offset().top - offSet;
  427. var mainNav = $('#main-nav');
  428. $('html,body').animate({scrollTop:targetOffset}, speed);
  429. if (mainNav.hasClass("open")) {
  430. mainNav.css("height", "1px").removeClass("in").addClass("collapse");
  431. mainNav.removeClass("open");
  432. }
  433. }
  434. if (typeof console === "undefined") {
  435. console = {
  436. log: function() { }
  437. };
  438. }
  439. </script>
  440. </body>
  441. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement