<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/JOSCRI/pen/dVNoor?limit=all&page=13&q=uikit" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css'>
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,700');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
#menubutton{
visibility: hidden;
}
h1{
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
letter-spacing: 2px;
}
p{
font-family: 'Open Sans', sans-serif;
color: #fff;
}
.menu,.uk-navbar-nav > li > a{
font-family: 'Montserrat', sans-serif;
color: #21418b;
letter-spacing: 2px;
font-size: .85em;
}
.uk-navbar-toggle-icon{
fill: #21418b;
}
#mainlogo{
opacity: 0;
width: 350px;
animation-name: fadein;
animation-duration: 5s;
animation-delay: 1s;
animation-fill-mode: forwards;
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
}
#titlea{
opacity:0;
animation-name: fadein;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.first{
background: #fff;
}
.backgroundheader{
background-image: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) ), url(https://s-media-cache-ak0.pinimg.com/originals/1c/d6/37/1cd637828c5bdba3618b7d54a86c1d79.jpg);
animation-name: fadein, moveup;
animation-duration: 2s;
animation-timing-function: ease-out;
}
figure{
padding: 50px;
}
@keyframes fadein{
from {opacity: 0;}
to{opacity: 1;}
}
@keyframes moveup{
from {top: 15%;}
to{top: 10%;}
}
/*Mouse Scroller*/
.scroll-downs {
margin: auto;
width :34px;
height: 55px;
}
.mousey {
width: 3px;
padding: 10px 15px;
height: 35px;
border: 2px solid #fff;
border-radius: 25px;
opacity: 0.75;
box-sizing: content-box;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #fff;
animation-name: scroll;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
/*Second section*/
.section2{
background-image: url(http://coolwallpaperz.info/user-content/uploads/wall/o/87/architecture-architect-images-landscape-modern-568842.jpg);
}
.textcontainer{
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 70%;
background: #032f6e;
}
.section2::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background-image: linear-gradient( rgba(4,32,69, 0.8), rgba(4,32,69, 0.8) ), url(http://coolwallpaperz.info/user-content/uploads/wall/o/87/architecture-architect-images-landscape-modern-568842.jpg);
}
.textcontainer h1{
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
font-weight: bold;
letter-spacing: 3px;
}
.textcontainer h4{
font-family: 'Montserrat', sans-serif;
font.size: 1.2em;
letter-spacing: 3px;
}
.textcontainer h4::before{
content: '';
position: absolute;
top: 120%;
width: 50px;
height: 2px;
background: #fff;
}
.textcontainer p, .textservicecontainer p{
font-family: 'Quicksand', sans-serif;
font-size: .9em;
}
#canvas{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
}
#serviciossection h3{
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 5px;
}
#serviciossection .experiencia::before{
content: '10';
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index : -1;
font-size: 10em;
}
#menu{
transition: all 500ms ease-out;
}
#servicio1{
background: #212121;
}
/*Slide arrows*/
.fp-controlArrow.fp-prev {
left: 40px;
border: none;
width: 5px;
height: 5px;
cursor: pointer;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding:10px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.fp-controlArrow.fp-prev::after{
content: '';
position: absolute;
background: rgba(255,255,255, 1);
top: 90%;
left: 100%;
transform: translate(-50%,-50%);
width: 20px;
height: 20px;
animation-name: ripple;
animation-duration: 1s;
animation-easing: ease-out;
animation-iteration-count: infinite;
}
.fp-controlArrow.fp-next {
right: 40px;
border: none;
width: 5px;
height: 5px;
cursor: pointer;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding:10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.fp-controlArrow.fp-next::after{
content: '';
position: absolute;
background: rgba(255,255,255, 1);
top: 90%;
left: 100%;
transform: translate(-50%,-50%);
width: 20px;
height: 20px;
animation-name: ripple;
animation-duration: 1s;
animation-easing: ease-out;
animation-iteration-count: infinite;
}
/*ripple effect*/
@keyframes ripple{
from {width: 20px; height:20px; border-radius: 10px; opacity:1;}
to{width:40px; height:40px; border-radius:20px; opacity: 0;}
}
#servicio1 .serviceimagecontainer{
width: 50%;
height: 80%;
position: relative;
top: 5%;
left: 25%;
background-image: url(https://i.pinimg.com/564x/72/58/e1/7258e178240cb35d928166cf69ff46d2.jpg);
background-size: cover;
background-position: center;
}
.textservicecontainer h3{
font-family: 'Montserrat', sans-serif;
letter-spacing: 2px;
}
.textservicecontainer{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.25);
transition: background 400ms ease-out;
cursor: pointer;
}
.textservicecontainer:hover{
background: rgba(0,0,0,0.8);
}
.owo{
transition: all 1s ease-out;
}
.owo:hover{
transform: rotate(1.5);
}
.blueseparatorbackground{
position: absolute;
background: #032f6e;;
width: 100%;
height: 50%;
top:0;
left:0;
}
/*Contact form*/
#contactform{
background: #fff;
width: 80%;
height: 50%;
}
#contactform .uk-legend{
font-family: 'Montserrat', sans-serif;
letter-spacing: 2px;
color: #3c4a55;
text-transform: uppercase;
}
#contactform .uk-input, #contactform .uk-textarea{
font-family: 'Quicksand', sans-serif;
}
#contactform .uk-button{
font-family: 'Montserrat', sans-serif;
background:#103f6d;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
border: none;
}
.uk-input, .uk-textarea{
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
#contactform h3{
font-family: 'Quicksand', sans-serif;
}
@media (max-width: 600px) {
#menubutton{
visibility: visible;
}
.uk-navbar-right {
display: none;
}
.textcontainer{
top: 0%;
left: 0%;
width: 100%;
height: 100%;
font-size: .8em;
padding: 20px;
}
#serviciossection h3{
font-size: .7em;
}
#contactinformation{
display: none;
}
.textservicecontainer p{
font-size: .6em;
}
}
#modal-full, #modal-full h1{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.uk-modal-dialog{
background: #032f6e;
}
#modal-full .uk-nav li>a, #modal-full .uk-nav-header{
color: #fff;
}
#modal-full .uk-nav li>a{
font-size: 1em;
}
</style></head><body>
<nav id="menu" class="uk-navbar uk-navbar-container uk-navbar-transparent uk-margin uk-position-absolute" style="z-index: 999; width: 100%; ">
<div class="uk-navbar-left" id="menubutton">
<a class="uk-navbar-toggle" href="#modal-full" uk-toggle>
<span uk-navbar-toggle-icon class="uk-margin-remove"></span> <span class="uk-margin-small-left menu">MENÚ</span>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav menu">
<li data-menuanchor="inicio"><a href="#inicio">INICIO</a></li>
<li data-menuanchor="nosotros"><a href="#nosotros">NOSOTROS</a></li>
<li data-menuanchor="servicios"><a href="#servicios/servicios">SERVICIOS</a></li>
<li data-menuanchor="contacto"><a href="#contacto">CONTACTO</a></li>
</ul>
</div>
</nav>
<canvas id="canvas"></canvas>
<div id="fullpage">
<div class="section first" style="background: transparent;" id="iniciosection">
<div style="width: 100%; height: 100%; ">
<!--canvas-->
<!--endcanvas-->
<div class="backgroundheader uk-background-cover uk-box-shadow-bottom uk-position-absolute" style="width:80%; height: 80%; top: 10%; left: 10%; z-index: 999;">
<div class="uk-container uk-padding uk-light uk-text-center uk-position-center">
<figure>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg id="mainlogo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 136 103" style="enable-background:new 0 0 136 103;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3689AF;}
.st1{fill:#3689AF;}
.st2{fill:#fff;}
</style>
<g id="Capa_2">
</g>
<g id="Capa_3">
<polygon id="XMLID_3_" class="st0" points="31.7,78.7 14.6,78.7 14.6,73.5 31.7,64.4 "/>
<polygon id="XMLID_16_" class="st0" points="31.7,54 14.6,62.9 14.6,56.7 31.7,47.6 "/>
<polygon id="XMLID_17_" class="st0" points="31.7,37.1 14.6,46.2 14.6,9.7 31.7,9.7 "/>
<rect id="XMLID_6_" x="33.2" y="79.6" class="st1" width="17.1" height="16.8"/>
<rect id="XMLID_7_" x="14.6" y="79.6" class="st2" width="17.1" height="16.8"/>
<polygon id="XMLID_8_" class="st2" points="50.3,78.7 33.2,78.7 33.2,63.6 50.3,54.5 "/>
<polygon id="XMLID_14_" class="st2" points="50.3,44.2 33,53.2 33.2,46.8 50.3,37.7 "/>
<polygon id="XMLID_11_" class="st2" points="50.3,27.2 33.2,36 33.2,9.7 50.3,9.7 "/>
</g>
<g id="Capa_4">
<rect id="XMLID_4_" x="50.3" y="19.8" class="st2" width="44.1" height="1"/>
</g>
<g id="Capa_4_copia">
<rect id="XMLID_9_" x="50.3" y="85.3" class="st2" width="44.9" height="1"/>
</g>
<g id="Capa_4_copia_3">
<rect id="XMLID_15_" x="50.3" y="85.3" class="st2" width="44.9" height="1"/>
</g>
<g id="Capa_4_copia_2">
<rect id="XMLID_10_" x="94.4" y="76.3" class="st2" width="0.8" height="9.5"/>
</g>
<g id="Capa_4_copia_4">
<rect id="XMLID_12_" x="93.6" y="19.8" class="st2" width="0.8" height="9.5"/>
</g>
<g id="Capa_8">
<g id="XMLID_98_" class="st2">
<path id="XMLID_99_" d="M71.4,38.6h-3.3v19.7h-1.9V38.6h-3.3v-1.7h8.5V38.6z"/>
<path id="XMLID_101_" d="M86.3,58.3h-7V36.9h6.9v1.7h-5v8h4.6v1.7h-4.6v8.3h5.1V58.3z"/>
<path id="XMLID_103_" d="M103.3,58.3h-2l-2.9-8.8l-2.9,8.8h-1.9c0-0.1,0-0.1,0-0.1l3.8-10.8c-2.4-6.9-3.6-10.4-3.6-10.4h2l2.6,8.1
l2.7-8.1h1.9c0,0.1,0,0.1,0,0.1l-3.6,10.2C102,54.6,103.3,58.3,103.3,58.3z"/>
<path id="XMLID_105_" d="M120.2,56.8c0,0.4-0.1,0.8-0.4,1.1s-0.7,0.4-1.1,0.4h-6c-0.4,0-0.8-0.1-1.1-0.4c-0.3-0.3-0.4-0.6-0.4-1.1
V38.5c0-0.4,0.1-0.8,0.4-1.1c0.3-0.3,0.6-0.4,1.1-0.4h6c0.4,0,0.8,0.1,1.1,0.4c0.3,0.3,0.4,0.6,0.4,1.1V56.8z M118.3,56.7v-18
h-5.2v18H118.3z"/>
</g>
<g id="XMLID_68_" class="st2">
<path id="XMLID_69_" d="M61.7,65.7c-0.2-0.1-0.4-0.1-0.7-0.1c-0.3,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.4,0.3-0.6,0.6
c-0.1,0.2-0.2,0.5-0.2,0.8c0,0.3,0.1,0.6,0.2,0.8s0.3,0.4,0.6,0.6s0.5,0.2,0.8,0.2c0.2,0,0.4,0,0.6-0.1c0.2-0.1,0.4-0.2,0.6-0.4
l0.3,0.4c-0.2,0.2-0.5,0.4-0.7,0.5c-0.3,0.1-0.6,0.2-0.9,0.2c-0.4,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.4-0.8-0.8s-0.3-0.7-0.3-1.1
c0-0.4,0.1-0.8,0.3-1.1c0.2-0.3,0.5-0.6,0.8-0.8S60.6,65,61,65c0.3,0,0.6,0.1,0.8,0.2c0.3,0.1,0.5,0.3,0.7,0.5l-0.3,0.4
C62.1,65.9,61.9,65.8,61.7,65.7z"/>
<path id="XMLID_71_" d="M68,65.3c0.3,0.2,0.6,0.4,0.8,0.8c0.2,0.3,0.3,0.7,0.3,1.1s-0.1,0.8-0.3,1.1c-0.2,0.3-0.5,0.6-0.8,0.8
c-0.3,0.2-0.7,0.3-1.1,0.3c-0.4,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.4-0.8-0.8s-0.3-0.7-0.3-1.1s0.1-0.8,0.3-1.1
c0.2-0.3,0.5-0.6,0.8-0.8s0.7-0.3,1.1-0.3C67.3,65,67.7,65.1,68,65.3z M66.1,65.7c-0.3,0.1-0.4,0.3-0.6,0.6
c-0.1,0.2-0.2,0.5-0.2,0.8s0.1,0.6,0.2,0.8c0.1,0.2,0.3,0.4,0.6,0.6c0.3,0.1,0.5,0.2,0.8,0.2s0.6-0.1,0.8-0.2
c0.2-0.1,0.4-0.3,0.6-0.6s0.2-0.5,0.2-0.8s-0.1-0.6-0.2-0.8s-0.3-0.4-0.6-0.6s-0.5-0.2-0.8-0.2S66.4,65.6,66.1,65.7z"/>
<path id="XMLID_74_" d="M74.8,65h0.6v4.2h-0.6L72.3,66v3.3h-0.6V65h0.6l2.4,3.3V65z"/>
<path id="XMLID_76_" d="M80.2,65.6c-0.2-0.1-0.4-0.1-0.6-0.1c-0.2,0-0.4,0-0.6,0.1c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.1,0,0.3,0.1,0.4
c0.1,0.1,0.2,0.2,0.3,0.2s0.3,0.1,0.5,0.2c0.3,0.1,0.5,0.2,0.7,0.3c0.2,0.1,0.3,0.2,0.4,0.4c0.1,0.2,0.2,0.4,0.2,0.6
c0,0.2-0.1,0.5-0.2,0.6c-0.1,0.2-0.3,0.3-0.5,0.4c-0.2,0.1-0.5,0.1-0.8,0.1c-0.3,0-0.6-0.1-0.9-0.2s-0.5-0.3-0.8-0.5l0.3-0.5
c0.2,0.2,0.4,0.3,0.7,0.5s0.5,0.2,0.7,0.2c0.3,0,0.5-0.1,0.7-0.2c0.2-0.1,0.2-0.3,0.2-0.4c0-0.1,0-0.3-0.1-0.4
c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.3-0.1-0.5-0.2c-0.3-0.1-0.5-0.2-0.7-0.2c-0.2-0.1-0.3-0.2-0.4-0.4c-0.1-0.2-0.2-0.4-0.2-0.6
c0-0.2,0.1-0.4,0.2-0.6s0.3-0.3,0.5-0.4c0.2-0.1,0.5-0.1,0.8-0.1c0.3,0,0.5,0,0.7,0.1c0.2,0.1,0.5,0.2,0.6,0.3l-0.2,0.5
C80.6,65.8,80.4,65.7,80.2,65.6z"/>
<path id="XMLID_78_" d="M83.3,65h3.3v0.5h-1.4v3.7h-0.6v-3.7h-1.4V65z"/>
<path id="XMLID_80_" d="M91.7,69.3l-0.8-1.3c-0.1,0-0.2,0-0.2,0h-1.1v1.3H89V65h1.6c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1
c0,0.3-0.1,0.6-0.2,0.9c-0.2,0.2-0.4,0.4-0.7,0.5l1,1.4H91.7z M90.7,67.4c0.4,0,0.6-0.1,0.8-0.2c0.2-0.2,0.3-0.4,0.3-0.7
c0-0.3-0.1-0.5-0.3-0.7c-0.2-0.2-0.5-0.2-0.8-0.2h-1.1v1.8H90.7z"/>
<path id="XMLID_83_" d="M96,68.4c0.2,0.2,0.5,0.3,0.9,0.3c0.4,0,0.7-0.1,0.9-0.3c0.2-0.2,0.3-0.5,0.3-0.9V65h0.6v2.5
c0,0.5-0.2,1-0.5,1.3s-0.7,0.5-1.3,0.5c-0.6,0-1-0.2-1.3-0.5s-0.5-0.7-0.5-1.3V65h0.6v2.5C95.7,67.9,95.8,68.2,96,68.4z"/>
<path id="XMLID_85_" d="M104,65.7c-0.2-0.1-0.4-0.1-0.7-0.1c-0.3,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.4,0.3-0.6,0.6
c-0.1,0.2-0.2,0.5-0.2,0.8c0,0.3,0.1,0.6,0.2,0.8s0.3,0.4,0.6,0.6s0.5,0.2,0.8,0.2c0.2,0,0.4,0,0.6-0.1c0.2-0.1,0.4-0.2,0.6-0.4
l0.3,0.4c-0.2,0.2-0.5,0.4-0.7,0.5c-0.3,0.1-0.6,0.2-0.9,0.2c-0.4,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.4-0.8-0.8s-0.3-0.7-0.3-1.1
c0-0.4,0.1-0.8,0.3-1.1c0.2-0.3,0.5-0.6,0.8-0.8s0.7-0.3,1.1-0.3c0.3,0,0.6,0.1,0.8,0.2c0.3,0.1,0.5,0.3,0.7,0.5l-0.3,0.4
C104.4,65.9,104.2,65.8,104,65.7z"/>
<path id="XMLID_87_" d="M107,65h3.3v0.5h-1.4v3.7h-0.6v-3.7H107V65z"/>
<path id="XMLID_89_" d="M115.4,65.3c0.3,0.2,0.6,0.4,0.8,0.8c0.2,0.3,0.3,0.7,0.3,1.1s-0.1,0.8-0.3,1.1c-0.2,0.3-0.5,0.6-0.8,0.8
c-0.3,0.2-0.7,0.3-1.1,0.3c-0.4,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.4-0.8-0.8s-0.3-0.7-0.3-1.1s0.1-0.8,0.3-1.1
c0.2-0.3,0.5-0.6,0.8-0.8s0.7-0.3,1.1-0.3C114.7,65,115.1,65.1,115.4,65.3z M113.5,65.7c-0.3,0.1-0.4,0.3-0.6,0.6
c-0.1,0.2-0.2,0.5-0.2,0.8s0.1,0.6,0.2,0.8c0.1,0.2,0.3,0.4,0.6,0.6c0.3,0.1,0.5,0.2,0.8,0.2s0.6-0.1,0.8-0.2
c0.2-0.1,0.4-0.3,0.6-0.6s0.2-0.5,0.2-0.8s-0.1-0.6-0.2-0.8s-0.3-0.4-0.6-0.6s-0.5-0.2-0.8-0.2S113.8,65.6,113.5,65.7z"/>
<path id="XMLID_92_" d="M121.9,69.3l-0.8-1.3c-0.1,0-0.2,0-0.2,0h-1.1v1.3h-0.6V65h1.6c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1
c0,0.3-0.1,0.6-0.2,0.9c-0.2,0.2-0.4,0.4-0.7,0.5l1,1.4H121.9z M120.8,67.4c0.4,0,0.6-0.1,0.8-0.2c0.2-0.2,0.3-0.4,0.3-0.7
c0-0.3-0.1-0.5-0.3-0.7c-0.2-0.2-0.5-0.2-0.8-0.2h-1.1v1.8H120.8z"/>
<path id="XMLID_95_" d="M128.4,69.3l-0.4-1h-2.2l-0.4,1h-0.6l1.9-4.2h0.6l1.9,4.2H128.4z M126,67.7h1.8l-0.9-2L126,67.7z"/>
</g>
</g>
</svg>
<p></p>
<br>
<br>
</figure>
</div>
<div class="uk-position-bottom-center"><div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>
<p></p>
</div>
</div>
</div>
</div>
<div class="section" id="nosotrossection">
<div class="section2 uk-background-cover" style="width: 100%; height: 100%;">
</div>
<div class="textcontainer uk-light uk-padding-large">
<h4 class="uk-position-top-left uk-padding-small" style="font-size: .8em;" >NOSOTROS</h4>
<div class="uk-position-center uk-padding-small">
<h1>OBJETIVO</h1>
<p>Ser una alternativa confiable, entendiendo conociendo <br>y respondiendo las necesidades de nuestros clientes. <br> Con el fin de generar alianzas duraderas y estratégicas en el tiempo.</p>
<h1>MISIÓN</h1>
<p>Ser una empresa con personal responsable, exigente, profesional , <br>confiable, seguros , con respeto al medio ambiente y<br> comprometido con la correcta ejecución de los servicios entregados a los clientes.</p>
<h1>VISIÓN</h1>
<p>Ser una Empresa líder y reconocida en el mercado de la Ingeniería, <br> Construcción y Servicios para compañías privadas y públicas. <br> Entregando alta capacidad de competencia, seguridad, calidad <br> y eficiencia en la ejecución de proyectos.</p>
</div>
</div>
</div>
<div class="section" id="serviciossection">
<!--slide1-->
<div class="slide" data-anchor="slide1">
<div class="uk-child-width-expand@s uk-grid-collapse uk-light" uk-grid uk-height-viewport>
<div class="uk-grid-item-match">
<div class="uk-card uk-background-cover uk-card-body" style="background-image: url(https://i.pinimg.com/564x/91/ad/a3/91ada3520b48d5d900be6ad27e324aa5.jpg);">
</div>
<div class="uk-card uk-card-body" style="background: #032f6e;">
<h3 style="color: #fff; text-transform: uppercase;" class="uk-text-center uk-padding uk-position-center">"Sistematizar y mantener estrategias de trabajo con cada participante implicado en los proyectos."</h3>
</div>
</div>
<div class="uk-background-cover" style="background-image: url('https://i.pinimg.com/564x/1c/da/6b/1cda6ba74bece099fbdbb28882f4a8fe.jpg');">
</div>
<div class="uk-grid-item-match">
<div class="uk-card uk-card-body" style="background: #f1f1f1;">
<h3 style="color:#032f6e;" class="uk-position-center uk-text-center experiencia">AÑOS DE EXPERIENCIA <br> EN EL RUBRO</h3>
</div>
<div style="background-image: url('https://i.pinimg.com/564x/11/70/90/1170909c3f9b32c49f6db3f9650e721a.jpg');" class="uk-card uk-background-cover uk-card-body">
</div>
</div>
</div>
</div>
<!--slide2-->
<div class="slide" id="servicio1" data-anchor="servicios" >
<div class="uk-child-width-expand@s uk-grid-collapse uk-light" uk-grid uk-height-viewport>
<div class="uk-grid-item-match">
<div class="uk-card uk-background-cover uk-padding-remove uk-card-body" style="background-image: url(https://i.pinimg.com/564x/82/8d/64/828d64764d5a01516cbf0caa37b25639.jpg);">
<div class="textservicecontainer">
<div class="uk-position-center uk-padding">
<h3 >CONSTRUCCIÓN Y EDIFICACIÓN</h3>
<p>Nuestro trabajo es serio y comprometido, ya que esta es nuestras especialidad tenemos clientes que avalan nuestra calidad en el servicio de construcción y edificación de proyectos para particulares y empresas.</p>
</div>
</div>
</div>
</div>
<div class="uk-grid-item-match">
<div class="uk-card uk-background-cover uk-card-body uk-padding-remove" style="background: #95a5a9;">
<div class="textservicecontainer ">
<div class="uk-position-center uk-padding">
<h3 style="text-transform: uppercase;">Mantención
</h3>
<p>Mantenimientos integrados en: Electricidad, Gasfitería, Superficies, Carpintería en madera y metálica, Cerrajería, Telefonía, Muebles de Oficina y Aire Acondicionado.</p>
</div>
</div>
</div>
<div style="background-image: url('https://i.pinimg.com/564x/91/98/78/919878aa237505599ceb154fb6d8216b.jpg');" class="owo uk-card uk-background-cover uk-padding-remove uk-card-body">
<div class="textservicecontainer ">
<div class="uk-position-center uk-padding">
<h3 style="text-transform: uppercase;">Obras Menores
</h3>
<p>Contamos con el servicio de Instalaciones Generales, Reparaciones de instalaciones existentes. Del mismo modo, se realizan diseño y proyección de instalaciones nuevas.</p>
</div>
</div>
</div>
</div>
<div class="owo uk-grid-item-match">
<div style="background-image: url('https://i.pinimg.com/564x/1b/04/ab/1b04abe5fc64e73075ed0152fee680d0.jpg');" class=" uk-card uk-padding-remove uk-background-cover uk-card-body">
<div class="textservicecontainer">
<div class="uk-position-center uk-padding">
<h3 style="text-transform: uppercase;">Arquitectura, Ingenieria y Construccion</h3>
<p>Gracias a nuestro equipo multidisciplinario, contamos con la capacidad de abarcar los proyectos en todas sus faces de desarrollo, entregando así respuestas integrales a los requerimientos de nuestros clientes.</p>
</div>
</div>
</div>
</div>
<div class="uk-grid-item-match">
<div style="background-image: url('https://i.pinimg.com/564x/84/e1/a1/84e1a19272501a96f893e047979a1f5c.jpg');" class="uk-card uk-padding-remove uk-background-cover uk-card-body">
<div class="textservicecontainer">
<div class="uk-position-center uk-padding">
<h3 style="text-transform: uppercase;" >Estudios
de propuestas</h3>
<p>Cuando hablamos de construcción, nos enfocamos en todo tipo de edificación, incluyendo ampliaciones y remodelaciones.</p>
</div>
</div>
</div>
<div style="background: #50b8d6;');" class="uk-card uk-background-cover uk-padding-remove uk-card-body">
<div class="textservicecontainer">
<div class="uk-position-center uk-padding">
<h3 >ELECTRICIDAD</h3>
<p >Realizamos la construcción de proyectos abarcando el suministro de equipos y materiales, electromecánica y puesta en servicio de igual manera tenemos experiencia en trabajos de obras civiles de instalaciones y supervición en electricidad..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--endsection-->
<div class="section uk-padding" id="contactosection">
<span class="blueseparatorbackground"></span>
<div id="contactform" class="uk-position-center uk-box-shadow-medium">
<div class="uk-grid-match uk-text-center uk-grid-collapse" uk-grid>
<div class="uk-width-expand@m">
<div class="uk-card uk-card-body uk-dark">
<form method="post">
<fieldset class="uk-fieldset">
<legend class="uk-legend uk-text-left">Contáctanos</legend>
<div class="uk-margin">
<input class="uk-input" type="text" placeholder="Nombre">
</div>
<div class="uk-margin">
<input class="uk-input" type="email" placeholder="Correo">
</div>
<div class="uk-margin">
<input class="uk-input" type="email" placeholder="Teléfono">
</div>
<div class="uk-margin">
<textarea class="uk-textarea" rows="5" placeholder="Mensaje"></textarea>
</div>
<div class="uk-margin">
<button type="submit" class="uk-button uk-button-default" >Enviar</button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="uk-width-1-3@m" >
<div style="background: #103f6d;" id="contactinformation" class="uk-light uk-card uk-card-body uk-flex uk-flex-center uk-flex-middle">
<div class="" >
<h3>Información de Contacto</h3>
<div class="uk-margin">
<a href="#">
<span class="uk-icon uk-margin-small-right" uk-icon="icon: location"></span>
Av. Kennedy 5735 Of. 804, Marriott
</a>
</div>
<div class="uk-margin">
<a href="#">
<span class="uk-icon uk-margin-small-right" uk-icon="icon: phone"></span>
+56 940444172
</a>
</div>
<div class="uk-margin">
<a href="#">
<span class="uk-icon uk-margin-small-right" uk-icon="icon: mail"></span>
contacto@texospa.cl
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-full" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
<div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
<div class="uk-padding-large">
<ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
<li class="uk-nav-header"><span class="uk-margin-small-right" uk-icon="icon: table"></span>MENÚ</li>
<li><a href="#inicio"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span>Inicio</a></li>
<li><a href="#nosotros"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span>Nosotros</a></li>
<li><a href="#servicios"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span>Servicios</a></li>
<li><a href="#contacto"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span>Contacto</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#contacto"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> PÁGINA</a></li>
</ul>
</div>
<div class="uk-background-cover" style="background-image: url(https://s-media-cache-ak0.pinimg.com/originals/1c/d6/37/1cd637828c5bdba3618b7d54a86c1d79.jpg);" uk-height-viewport></div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/jquery.easings.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js'></script>
<script > var value=0;
$(document).ready(function(){
$('#fullpage').fullpage({
anchors:['inicio', 'nosotros', 'servicios','contacto'],
onLeave: function(index, nextIndex, direction){
if(direction=='up'){
value = -1;
}
if(direction=='down'){
value = 1;
}
console.log(direction);
ChangeNavbarColor(index+value);
}
});
});
var win = $(this);
//Show menu responsive
$(document).ready(function(){
$(window).on('resize', function(){
win = $(this); //this = window
console.log(win.width());
if (win.width() <= 650) {
if(value==0)
$('#menu').css("visibility","visible");
else
$('#menu').css("visibility","hidden");
}else{
$('#menu').css("visibility","visible");
}
});
});
function ChangeNavbarColor(index){
switch(index){
case 1:
$('#menu').css(
{"background": "transparent",
"visibility":"visible"});
break;
case 2:
$('#menu').css(
{"background": "rgba(255,255,255,1)"});
if(win.width()<=650)
$('#menu').css(
{"visibility": "hidden"});
break;
case 3:
$('#menu').css(
{"background": "rgba(255,255,255,0.4)"});
break;
case 4:
$('#menu').css(
{"background": "rgba(255,255,255,1)"});
break;
default:
break;
}
}
//Canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
cx = cw / 2;
var ch = canvas.height = window.innerHeight,
cy = ch / 2;
ctx.fillStyle = "#000";
var linesNum = 16;
var linesRy = [];
var requestId = null;
function Line(flag) {
this.flag = flag;
this.a = {};
this.b = {};
if (flag == "v") {
this.a.y = 0;
this.b.y = ch;
this.a.x = randomIntFromInterval(0, ch);
this.b.x = randomIntFromInterval(0, ch);
} else if (flag == "h") {
this.a.x = 0;
this.b.x = cw;
this.a.y = randomIntFromInterval(0, cw);
this.b.y = randomIntFromInterval(0, cw);
}
this.va = randomIntFromInterval(25, 100) / 100;
this.vb = randomIntFromInterval(25, 100) / 100;
this.draw = function() {
ctx.strokeStyle = "#ccc";
ctx.beginPath();
ctx.moveTo(this.a.x, this.a.y);
ctx.lineTo(this.b.x, this.b.y);
ctx.stroke();
}
this.update = function() {
if (this.flag == "v") {
this.a.x += this.va;
this.b.x += this.vb;
} else if (flag == "h") {
this.a.y += this.va;
this.b.y += this.vb;
}
this.edges();
}
this.edges = function() {
if (this.flag == "v") {
if (this.a.x < 0 || this.a.x > cw) {
this.va *= -1;
}
if (this.b.x < 0 || this.b.x > cw) {
this.vb *= -1;
}
} else if (this.flag == "h") {
if (this.a.y < 0 || this.a.y > ch) {
this.va *= -1;
}
if (this.b.y < 0 || this.b.y > ch) {
this.vb *= -1;
}
}
}
}
for (var i = 0; i < linesNum; i++) {
var flag = i % 2 == 0 ? "h" : "v";
var l = new Line(flag);
linesRy.push(l);
}
function Draw() {
requestId = window.requestAnimationFrame(Draw);
ctx.clearRect(0, 0, cw, ch);
for (var i = 0; i < linesRy.length; i++) {
var l = linesRy[i];
l.draw();
l.update();
}
for (var i = 0; i < linesRy.length; i++) {
var l = linesRy[i];
for (var j = i + 1; j < linesRy.length; j++) {
var l1 = linesRy[j]
Intersect2lines(l, l1);
}
}
}
function Init() {
linesRy.length = 0;
for (var i = 0; i < linesNum; i++) {
var flag = i % 2 == 0 ? "h" : "v";
var l = new Line(flag);
linesRy.push(l);
}
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = null;
}
cw = canvas.width = window.innerWidth,
cx = cw / 2;
ch = canvas.height = window.innerHeight,
cy = ch / 2;
Draw();
};
setTimeout(function() {
Init();
addEventListener('resize', Init, false);
}, 15);
function Intersect2lines(l1, l2) {
var p1 = l1.a,
p2 = l1.b,
p3 = l2.a,
p4 = l2.b;
var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
var x = p1.x + ua * (p2.x - p1.x);
var y = p1.y + ua * (p2.y - p1.y);
if (ua > 0 && ub > 0) {
markPoint({
x: x,
y: y
})
}
}
function markPoint(p) {
ctx.beginPath();
ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
ctx.fill();
}
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn);
}
/*$(document).on("click", function(){
console.log('clicked');
});
*/
$(document).ready(function(){
$( "#modal-full a" ).click(function() {
var modal = UIkit.modal('#modal-full');
modal.hide();
});
});
//Close Modal
$(document).ready(function(){
var modal = UIkit.modal('#modal-full');
});
//# sourceURL=pen.js
</script>
</body></html>
