Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <!--
- Tinker Template
- http://www.templatemo.com/tm-506-tinker
- -->
- <title>Tinker CSS Template</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
- <link rel="apple-touch-icon" href="apple-touch-icon.png">
- <link rel="stylesheet" href="css/bootstrap.min.css">
- <link rel="stylesheet" href="css/bootstrap-theme.min.css">
- <link rel="stylesheet" href="css/fontAwesome.css">
- <link rel="stylesheet" href="css/hero-slider.css">
- <link rel="stylesheet" href="css/owl-carousel.css">
- <link rel="stylesheet" href="css/templatemo-style.css">
- <link rel="stylesheet" href="css/lightbox.css">
- <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
- </head>
- <body>
- <div class="header">
- <div class="container">
- <nav class="navbar navbar-inverse" role="navigation">
- <div class="navbar-header">
- <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a href="#" class="navbar-brand scroll-top"> </a>
- </div>
- <!--/.navbar-header-->
- <div id="main-nav" class="collapse navbar-collapse">
- <ul class="nav navbar-nav">
- <li><a href="#" class="scroll-top">Inicio</a></li>
- <li><a href="#" class="scroll-link" data-id="about">Servicios</a></li>
- <li><a href="#" class="scroll-link" data-id="portfolio">Galería</a></li>
- <li><a href="#" class="scroll-link" data-id="testimonial">Quienes Somos</a></li>
- <li><a href="#" class="scroll-link" data-id="contact-us">Contáctanos</a></li>
- </ul>
- </div>
- <!--/.navbar-collapse-->
- </nav>
- <!--/.navbar-->
- </div>
- <!--/.container-->
- </div>
- <!--/.header-->
- <div class="parallax-content baner-content" id="home">
- <div class="container">
- <div class="text-content">
- <img src="img/logo.png" width="80%">
- <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>
- <div class="primary-white-button">
- <a href="#" class="scroll-link" data-id="about">Comencemos</a>
- </div>
- </div>
- </div>
- </div>
- <section id="about" class="page-section">
- <div class="container">
- <div class="row">
- <div class="col-md-3 col-sm-6 col-xs-12">
- <div class="service-item">
- <div class="image">
- <img src="img/service_icon_01.png" alt="">
- </div>
- <h4>Pantallas</h4>
- <div class="line-dec"></div>
- <p>Hermosas pantallas para su hogar</p>
- <div class="primary-blue-button">
- <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
- </div>
- </div>
- </div>
- <div class="col-md-3 col-sm-6 col-xs-12">
- <div class="service-item">
- <div class="image">
- <img src="img/service_icon_02.png" alt="">
- </div>
- <h4>Lámparas</h4>
- <div class="line-dec"></div>
- <p>El arte del vitral plasmado en....</p>
- <div class="primary-blue-button">
- <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
- </div>
- </div>
- </div>
- <div class="col-md-3 col-sm-6 col-xs-12">
- <div class="service-item">
- <div class="image">
- <img src="img/service_icon_03.png" alt="">
- </div>
- <h4>Puertas</h4>
- <div class="line-dec"></div>
- <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>
- <div class="primary-blue-button">
- <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
- </div>
- </div>
- </div>
- <div class="col-md-3 col-sm-6 col-xs-12">
- <div class="service-item">
- <div class="image">
- <img src="img/service_icon_04.png" alt="">
- </div>
- <h4>Diseños Personalizados</h4>
- <div class="line-dec"></div>
- <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>
- <div class="primary-blue-button">
- <a href="#" class="scroll-link" data-id="portfolio">Galería</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section id="portfolio">
- <div class="content-wrapper">
- <div class="inner-container container">
- <div class="row">
- <div class="col-md-4 col-sm-12">
- <div class="section-heading">
- <h4>Galería</h4>
- <div class="line-dec"></div>
- <p>Aquí podrás encontrar todos nuestros trabajos.</p>
- <div class="filter-categories">
- <ul class="project-filter">
- <li class="filter" data-filter="all"><span>Todos</span></li>
- <li class="filter" data-filter="branding"><span>Pantallas</span></li>
- <li class="filter" data-filter="graphic"><span>Lámparas</span></li>
- <li class="filter" data-filter="nature"><span>Puertas</span></li>
- <li class="filter" data-filter="animation"><span>Personalizados</span></li>
- </ul>
- </div>
- </div>
- </div>
- <div class="col-md-8">
- <div class="projects-holder-3">
- <div class="projects-holder">
- <div class="row">
- <div class="col-md-6 col-sm-6 project-item mix branding">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_a.jpg" data-lightbox="image-1"><img src="img/portfolio_item_a.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix branding">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_b.jpg" data-lightbox="image-1"><img src="img/portfolio_item_b.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix graphic">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_c.jpg" data-lightbox="image-1"><img src="img/portfolio_item_c.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix graphic">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_d.jpg" data-lightbox="image-1"><img src="img/portfolio_item_d.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix graphic">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_e.jpg" data-lightbox="image-1"><img src="img/portfolio_item_e.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix nature">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_f.jpg" data-lightbox="image-1"><img src="img/portfolio_item_f.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix nature">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_g.jpg" data-lightbox="image-1"><img src="img/portfolio_item_g.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix animation">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_h.jpg" data-lightbox="image-1"><img src="img/portfolio_item_h.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix animation">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_i.jpg" data-lightbox="image-1"><img src="img/portfolio_item_i.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix animation">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_j.jpg" data-lightbox="image-1"><img src="img/portfolio_item_j.jpg"></a>
- </div>
- </div>
- </div>
- <div class="col-md-6 col-sm-6 project-item mix animation">
- <div class="thumb">
- <div class="image">
- <a href="img/portfolio_big_item_k.jpg" data-lightbox="image-1"><img src="img/portfolio_item_k.jpg"></a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section id="testimonial">
- <div class="container">
- <div class="row">
- <div class="col-md-6 col-md-offset-3">
- <div id="owl-testimonials" class="owl-carousel owl-theme">
- <div class="item">
- <div class="testimonials-item">
- <a href="img/portfolio_big_item_k.jpg" data-lightbox="image-1"><img src="img/portfolio_item_k.jpg"></a>
- <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>
- <h4>George Rich</h4>
- <span>Web Designer</span>
- </div>
- </div>
- <div class="item">
- <div class="testimonials-item">
- <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>
- <h4>John Henry</h4>
- <span>New Manager</span>
- </div>
- </div>
- <div class="item">
- <div class="testimonials-item">
- <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>
- <h4>Danny Cute</h4>
- <span>CEO Founder</span>
- </div>
- </div>
- <div class="item">
- <div class="testimonials-item">
- <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>
- <h4>Richard Beal</h4>
- <span>CSS Developer</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <div id="contact-us">
- <div class="container">
- <div class="row">
- <div class="col-md-12">
- <div class="section-heading">
- <h4>Contáctanos</h4>
- <div class="line-dec"></div>
- <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>
- <div class="pop-button">
- <h4>Envíanos un Mensaje</h4>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6 col-md-offset-3">
- <div class="pop">
- <span>✖</span>
- <form id="contact" action="#" method="post">
- <div class="row">
- <div class="col-md-12">
- <fieldset>
- <input name="name" type="text" class="form-control" id="name" placeholder="Tu nombre..." required>
- </fieldset>
- </div>
- <div class="col-md-12">
- <fieldset>
- <input name="email" type="email" class="form-control" id="email" placeholder="tu email..." required>
- </fieldset>
- </div>
- <div class="col-md-12">
- <fieldset>
- <textarea name="message" rows="6" class="form-control" id="message" placeholder="Tu mensaje..." required></textarea>
- </fieldset>
- </div>
- <div class="col-md-12">
- <fieldset>
- <button type="submit" id="form-submit" class="btn">Enviar Mensaje</button>
- </fieldset>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="map">
- <!-- How to change your own map point
- 1. Go to Google Maps
- 2. Click on your location point
- 3. Click "Share" and choose "Embed map" tab
- 4. Copy only URL and paste it within the src="" field below
- -->
- <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>
- </div>
- <footer>
- <div class="container">
- <div class="row">
- <div class="col-md-4 col-sm-12">
- <div class="logo">
- <a href="#" class="scroll-top"> <img src="img/logo.png" width="80%"></a>
- <p>Copyright © 2017 PC Nexus
- | Design: <span>PC Nexus</span></p>
- </div>
- </div>
- <div class="col-md-4 col-sm-12">
- <div class="location">
- <h4>Ubicación</h4>
- <ul>
- <li>Iquique <br>Tarapacá-Chile</li>
- <li>Agua Santa 3096<br></li>
- </ul>
- </div>
- </div>
- <div class="col-md-2 col-sm-12">
- <div class="contact-info">
- <h4>Más Información</h4>
- <ul>
- <li><em>Teléfono</em>: 57 2 212573</li>
- <li><em>Celular</em>: 9 62409626</li>
- <li><em>Email</em>: eblanchard@decoartevitral.cl</li>
- </ul>
- </div>
- </div>
- <div class="col-md-2 col-sm-12">
- <div class="connect-us">
- <h4>Get Social with us</h4>
- <ul>
- <li><a href="https://www.facebook.com/templatemo" target="_parent"><i class="fa fa-facebook"></i></a></li>
- <li><a href="https://www.google.com/+templatemo" target="_blank"><i class="fa fa-twitter"></i></a></li>
- <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
- <li><a href="#"><i class="fa fa-rss"></i></a></li>
- <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </footer>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
- <script src="js/vendor/bootstrap.min.js"></script>
- <script src="js/plugins.js"></script>
- <script src="js/main.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- // navigation click actions
- $('.scroll-link').on('click', function(event){
- event.preventDefault();
- var sectionID = $(this).attr("data-id");
- scrollToID('#' + sectionID, 750);
- });
- // scroll to top action
- $('.scroll-top').on('click', function(event) {
- event.preventDefault();
- $('html, body').animate({scrollTop:0}, 'slow');
- });
- // mobile nav toggle
- $('#nav-toggle').on('click', function (event) {
- event.preventDefault();
- $('#main-nav').toggleClass("open");
- });
- });
- // scroll function
- function scrollToID(id, speed){
- var offSet = 50;
- var targetOffset = $(id).offset().top - offSet;
- var mainNav = $('#main-nav');
- $('html,body').animate({scrollTop:targetOffset}, speed);
- if (mainNav.hasClass("open")) {
- mainNav.css("height", "1px").removeClass("in").addClass("collapse");
- mainNav.removeClass("open");
- }
- }
- if (typeof console === "undefined") {
- console = {
- log: function() { }
- };
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement