Código: últimas actualizaciones.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Complejo Tras las Sierras - Córdoba - Argentina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="NotePad++" />
<meta name="author" content="Adriana Loretán" />
<meta name="copyright" content="ESC-División Autores" />
<meta name="robots" content="index, follow /">
<meta name="description" content="Sitio dedicado al alquiler temporario de cabañas en la provincia de Córdoba, Argentina" />
<meta name="keywords" content="cabaña, cabañas, bungaló, bungalow, hospedaje, alojamiento, alquiler, temporario, verano, vacaciones" />
<meta name="keywords" content="invierno, semana santa, pascua, otoño, económico, barato, exclusivo, centro, rio, arroyito" />
<style type="text/css">
body{
position: static;/* valor de defecto */
margin: 0px;
background-color: #F0F0F0; /*gris claro */
height: 100%;
font-family: "lucida sans", arial, sans-serif;
font-size: 12px;
}
#contenedor{
position: relative;
top: 0px;
height: 100%;
width: 100%;
margin: 0px auto; /* márgenes superior e inferior 0px, laterales auto centrados */
border: none;
}
/*Definiciones del la cabecera de la página ------------------------------------------------------------------- */
header{
position: relative;
top: 0px;
height: 117px;
width: 940px;
margin: 0px auto; /* márgenes superior e inferior 0px, laterales auto centrados */
background-image: url(file:///C:/Escuela2013/Imagenes/cabecera.jpg);
background-repeat: repeat-x;
border: none;
}
header>figure{
position: relative;
top: 35px;
height: 75px; /* la imagen tine 318 x 75 */
width: 320px;
border: none;
overflow:hidden;
}
/*Definiciones del cuerpo de la página ------------------------------------------------------------------- */
div#cuerpo{
position: relative;
top: 0px;
height: 1480px;
width: 940px;
margin: 0px auto; /*márgenes superior e inferior 0px, laterales auto centrados */
background-image: url(file:///C:/Escuela2013/Imagenes/FondoCuerpo.jpg);
background-repeat: no-repeat;
border: none;
}
/* Definiciones del menú principal------------ */
ul li{
list-style: none; /* quitar viñetas de las listas */
font-size: 14px;
font-weight: bold; /* negita */
text-transform: uppercase;
}
a{
text-decoration: none; /* quitar subrayado de enlace */
}
nav ul{
height: 60px;
width: 900px;
margin: 0px auto; /* márgenes superior e inferior 0px, laterales auto centrados */
background-image: url(file:///C:/Escuela2013/Imagenes/FondoMenu.jpg);
background-repeat: no-repeat;
border: none;
}
nav ul li{
height: 25px;
/* cada elemento del menú tiene definido su ancho a través de la propiedad style = "width: ...px;" */
display: inline;
float: left; /* alinear horizontalmente */
padding: 5px 10px;
margin: 10px 17px;
}
nav>ul>li:hover{
/* crear bordes redondeados con sombra color maíz
-moz-border-radius: 17px;
-webkit-border-radius: 17px;*/
border-radius: 17px; /* Sólo para CSS3 */
background: url(file:///C:/Escuela2013/Imagenes/FondoBotonesMenu.jpg) top right repeat;
border-bottom: 1px inset #FC0; /* Color maíz */
color: #FFFFFF ; /* Color Blanco */
cursor: pointer;
height: 25px;
}
nav>ul>li>a{
height: 35px;
/* cada enlace del menú tiene definido su ancho a través de la propiedad style = "width: ...px;" */
position: relative;
top: -5px;
left: 10px;
float: left;
padding: 8px;
color: #FFCC00; /* Color maíz*/
}
/* Definiciones del submenú para la opción instalaciones */
ul#elementomenu2{
display: block;
position: relative;
top: 10px;
left: -15px;
width: 140px;
height: 200px;
visibility: hidden;
background-image:none;
list-style:none;
margin: 0px;
z-index: 999;
}
ul#elementomenu2>li{
display: block;
width: 131px;
height: 20px;
position: relative;
left: -30px;
top: -30px;
/* crear bordes redondeados con sombra color naranja */
/*-moz-border-radius: 17px;
-webkit-border-radius: 17px; */
border-radius: 17px;
border-bottom: 1px inset #F90; /* Naranja */
margin: 0px;
text-align: center;
}
.submenu{
color: #FFF; /* blanco */
text-decoration: none; /* quitar subrayado de enlace */
font-size: 11px;
font-weight: bold; /* Negita */
text-transform: none;
}
/* Efectos de iluminación al pasar */
ul#elementomenu2>li:hover{
border-bottom: 1px inset #FC0; /* maíz */
background: url(file:///C:/Escuela2013/Imagenes/FondoBotonesMenu.jpg) top right repeat;
}
a:hover.submenu{
color: #FFCC00; /* maíz*/
}
/*Definiciones del cuerpo de la página: ZONA 1 ------------------------------------------------------------------- */
div#cuerpozona1{
position: relative;
top: 0px;
width: 900px;
height: 500px;
margin: 0px 15px;
padding: 5px;
border: none;
}
/*Definiciones del cuerpo de la página: ZONA 2 ------------------------------------------------------------------- */
div#cuerpozona2{
position: relative;
top: 0px;
width: 900px;
height: 70px;
margin: 15px;
padding: 5px;
border: 2px solid #CCC; /* gris oscuro */
background: url(../Imagenes/Cartel.png);
border-radius: 15px;
}
.cartel{
display: inline;
position: relative;
top: 15px;
color: #000; /* negro */
font: inherit;
font-size: 22px;
font-weight: bold;
line-height: 35px;
margin: 0px 20px;
width: 500px;
vertical-align: baseline;
}
div.boton{
display: inline;
position: relative;
top: 10px;
float: right;
width: 250px;
height: 40px;
border: 4px outset #CCC; /* gris */
border-radius: 22px;
background-color: #F60; /* naranja */
margin: 0px 25px;
line-height: 35px;
vertical-align: baseline;
text-align:center;
/* Degradee fono botón de naranja claro a naranja oscuro
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F93), color-stop(1, #F30));*/
background: linear-gradient( #F93, #F30);
}
div.boton>a{
color: #FFF; /* blanco */
font: inherit;
font-size: 22px;
font-weight: bold;
text-transform: none;
text-decoration: none;
/* crear sombras sobre texto */
text-shadow: 1px 2px 3px #000 ;/* sombra color negro: desplazamiento horizontal / despl. vertical / distancia / color */
}
/*Definiciones del cuerpo de la página: ZONA 3 / Solicitar reserva ------------------------------------------------ */
div#cuerpozona3{
position: relative;
top: 0px;
width: 900px;
height: 180px;
margin: 15px;
padding: 5px;
border: none;
}
/*Definiciones del cuerpo de la página: ZONA 4 ------------------------------------------------------------------- */
div#cuerpozona4>section.informacion{ /* Definir caracterácticas de las cajas de cada sección */
position: 0px;
float: left;
width: 285px;
height: 610px;
margin: 2px 7px;
padding: 5px;
border: none;
border: nonw;
}
h5.eslogan{
color: #999; /* gris oscuro */
font: inherit;
font-size: 13px;
font-weight: bold;
line-height: 15px;
padding-left: 5px;
border: none;
margin: 0px;
}
h4.titulo{
color: #333; /* negro */
font: inherit;
font-size: 18px;
font-weight: bold;
line-height: 25px;
padding-left: 5px;
border: none;
margin: 0px;
vertical-align: baseline;
}
section.informacion>a{
color:#00F;
font-weight: bold;
padding-left: 5px;
margin: 0px;
}
section.informacion>a:hover{
text-decoration: underline;
}
iframe{
width: 280px;
height: 280px;
border: none;
scrolling: no;
margin-left: 2px;
}
h5.nota{
color: #666; /* gris oscuro */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 15px;
padding-left: 5px;
border: none;
margin: 0px;
vertical-align: middle;
text-decoration: none;
line-height: 22px;
}
.flotarizq{
float: left;
}
img.flotarizq{
margin: 5px 15px 5px 2px;
border: none;
padding: 0px;
outline:none;
vertical-align: middle;
}
/*Definiciones del pie de página ------------------------------------------------------------------- */
footer{
height: 537px;
width: 940px;
margin: 0px auto; /* márgenes superior e inferior 0px, laterales auto centrados */
background-image: url(file:///C:/Escuela2013/Imagenes/FondoPie.jpg);
background-repeat: no-repeat;
}
/* Posicionar pie zona superior */
footer #piezonasuperior{
position: relative;
top: 10px;
height: 330px;
color: #CDCDCD;
}
footer #piezonasuperior #galeria, footer #piezonasuperior #contacto, footer #piezonasuperior #datos{
display: inline; /* Explicar esta instrucción en clase */
float: left;
height: 320px;
margin: 1px;
color: #CDCDCD;
padding: 5px;
}
/* Posicionar zonas pie zona superior */
footer #piezonasuperior #galeria, footer #piezonasuperior #contacto, footer #piezonasuperior #datos{
width: 260px;
margin-right: 20px;
margin-left: 21px;
margin-top: 30px;
}
div#galeria>span , div#contacto>span, div#datos h2{
color: #FFFFFF; /* blanco */
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px; /* espaciar titulo */
}
div#galeria ul>li{
width: 250px;
height: 30px;
border-top: 1px solid #656565;
border-bottom: 1px solid #3c3c3c;
padding-top: 8px;
padding-left: 5px;
margin-left: -30px;
}
div#galeria ul>li>a{
color: #CCC; /* gris claro */
text-decoration: none;
}
div#galeria ul>li:last-child{ /* Pseudo clase: selecciona el último elemento de la lista para cambiar su apariencia */
border-bottom: none;
}
div#galeria ul>li:hover{
background-color: #5D5D5D; /* gris oscuro */
}
div#galeria ul>li , div#datos span{
font-weight: normal;
text-transform: none; /* sin transformaciones */
font-size: 12px;
color: #CCCCCC; /* gris claro */
}
input{
height: 20px;
width: 180px;
}
textarea{
font: inherit;
outline: none;
}
div#contacto form input, div#contacto form textarea{
/* ancho y alto definido con el selector de etiquetas input */
margin: 5px;
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #393939), color-stop(1, #444444));/* gris oscuro */
background: linear-gradient(#393939, #444444); /* agregar degradee interno de gris claro a gris oscuro */
color: #FFF; /* blanco */
/* crear bordes redondeados
-webkit-border-radius: 5px;*/
border-radius: 5px;
border: 1px inset #585858; /* gris oscuro con profundidad */
border-bottom: 1px solid #666; /* gris medio */
/* crear sombras internas
-webkit-box-shadow: inset 0 2px 4px #262626;*/
box-shadow: inset 0 2px 4px #262626;
padding: 5px;
}
input:required + label:after {
content: "*";
}
div#contacto form input:focus{
outline: none; /* quitar el borde externo de color al tener el foco */
}
div#contacto form input.boton{
height: 25px;
width: 140px;
padding: 5px;
font: inherit;
font-size: 10px;
text-align:center;
color: #EEE;
text-shadow: 0 1px 0 #000;
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e6e6e), to(#555555)); degradee de colores */
background: linear-gradient(#6e6e6e,#555555); /* boton submit */
/* -webkit-border-radius: 99px; crear bordes redondeados*/
border-radius: 99px;
/* crear sombras internas
-webkit-box-shadow: 0px 1px 2px #303030; */
box-shadow: 0px 1px 2px #303030, inset 0 1px 0 #888; /* box-shadow: posición horizontal posición vertical separación tamaño color inset; */
border: none;
outline: none;
}
div#contacto form input.boton:hover{
border: 1px inset #666;
/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #686868), to(#A0A0A0)); */
background: linear-gradient(##686868,#A0A0A0); /* boton submit */
color: #F90; /* naranja */
}
div#datos h3{
position: relative;
/* la propiedad top está definida en cada elemento*/
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
color: #CCC; /* gris oscuro */
text-shadow: 1px 1px 3px #000 ;/* sombra color negro: desplazamiento horizontal / despl. vertical / distancia / color */
line-height: 15px;
}
div#datos h2{
position: relative;
margin: 0px;
}
.hr{
position:relative;
/* la propiedad top está definida en cada elemento*/
width: 100%;
height: 2px;
margin: 0px 0px 12px 0px;
background:url(../Imagenes/sombrahr.png) repeat-x;
}
footer #piezonainferior{
position: relative;
top: 40px;
height: 60px;
color: #CDCDCD;
}
footer #piezonainferior .izquierda{
width: 460px;
height: 65px;
float: left;
padding: 20px 0px 25px 15px;
}
footer #piezonainferior .derecha{
width: 460px;
height: 65px;
float: right;
}
footer #piezonainferior .derecha .textopie{
float: left;
width: 265px;
height: 40px;
margin: 0px;
line-height: 14px;
font-family: inherit; /* heredada de body */
text-align: right;
padding: 10px 0px 10px;
}
footer #piezonainferior .derecha .logopie{
float: right;
height: 40px;
border-left: 1px solid #4d4d4d; /* Gris */
}
</style>
<script type="text/javascript">
function ver(){
var elementomenu = document.getElementById("elementomenu2");
elementomenu.style.visibility ="visible";
}
function ocultar(){
var elementomenu = document.getElementById("elementomenu2");
elementomenu.style.visibility ="hidden";
}
function saltar(evento,objeto) {
/* var tecla = (document.all) ? evento.keyCode : evento.which; document.all / sólo para IE - sentencia abreviada de if */
var tecla = evento.which; /* Retorna el código numérico en ascii de la tecla presionada - event.which */
if(tecla!=13) return;
var formulario = objeto.form;
var i;
for (i=0; i<formulario.elements.length; i++)
if(formulario.elements[i]==objeto) {
if (i == formulario.elements.length - 1) i= -1;
break }
formulario.elements[i+1].focus();
return false;
}
function enconstruccion(){
window.alert("Elemento en construcción!");
}
/* Seleccionar datos */
function seleccionar(objeto){
objeto.select();
}/* fin función selecionar datos al hacer click */
</script>
<body>
<div id="contenedor">
<header> <!-- Cabecera de la página: logo de la empresa -->
<figure>
<a href="#" title="Complejo Tras las Sierras - Córdoba - Argentina">
<img src="file:///C:/Escuela2013/Imagenes/logocabecera.JPG" alt="Complejo Tras las Sierras - Córdoba - Argentina">
</a>
</figure>
<audio autoplay loop src="../Sonidos/aves_23.mp3" preload="auto"> </audio>
</header>
<nav> <!-- Barra de navegacion: menu -->
<ul> <!-- Menu -->
<li style="width: 105px;" onMouseOver="javascript: ocultar();"><a href="#">PRINCIPAL</a></li>
<li style="width: 145px;"><a href="#" onClick="javascript: ver();">Instalaciones</a>
<ul id="elementomenu2" onClick="javascript: ocultar();"> <!-- Submenu -->
<li><a href="#" class="submenu" onClick="javascript: enconstruccion();">Pileta
Climatizada</a></li>
<li><a href="#" class="submenu" onClick="javascript: enconstruccion();">Canchas
de Tenis</a></li>
<li><a href="#" class="submenu" onClick="javascript: enconstruccion();">Deck
y Bar</a></li>
</ul> <!-- Fin submenu -->
</li>
<li style="width: 108px;" onMouseOver="javascript: ocultar();"><a href="#" style="width: 88px;">Servicios</a></li>
<li style="width: 125px;" onMouseOver="javascript: ocultar();"><a href="#" style="width: 100px;">Actividades</a></li>
<li style="width: 113px;" onMouseOver="javascript: ocultar();"><a href="#" style="width: 93px;">Contacto</a></li>
</ul><!-- Fin enu -->
</nav>
<div id="cuerpo" onMouseMove="javascript: ocultar();"> <!-- Cuerpo de la página-->
<div id="cuerpozona1"> <!-- Zona1: album / comenzando desde arriba - horizontal-->
</div>
<div id="cuerpozona2"> <!-- Zona2: reserva / comenzando desde la arriba-->
<h3 class="cartel"> Apurate y alquilá tu semana. Reservá ahora! </h3>
<div class="boton"> <a href="#" onClick="javascript: enconstruccion();"> Solicitar Reserva ></a></div>
</div>
<div id="cuerpozona3" > <!-- Zona3: album carrusel / comenzando desde la arriba ------------------------------------------>
</div><!-- Zona3: album / comenzando desde la arriba ------------------------------------------>
<div id="cuerpozona4"> <!-- Zona4: datos / comenzando desde la arriba-->
<section class="informacion">
<h5 class="eslogan">Google Maps</h5>
<h4 class="titulo">Nuestra ubicación</h4> <br/>
<iframe src="https://maps.google.com.ar/?ie=UTF8&ll=-32.032145,-61.227407&spn=0.01257,0.026157&t=m&z=16&output=embed"></iframe><br /> <br />
<a href="https://maps.google.com.ar/?ie=UTF8&ll=-32.032145,-61.227407&spn=0.01257,0.026157&t=m&z=16&source=embed"> Ver mapa más grande </a>
<br/> <br/>
<h4 class="titulo">TLS cuida de vos y tu familia</h4> <br/>
<h5 class="nota">Vigilancia nocturna. Además para la tranquilidad de su familia contamos con servicio medico de urgencia las 24 hs del día.</h5> <br/>
<h4 class="titulo">Cobertura WiFi</h4>
<img class="flotarizq" src="../Imagenes/zonaWF.png" /><br/>
<h5 class="nota">El complejo cuenta con cobertura WIFI, para todos los huespedes.</h5>
</section>
<section class="informacion">
<h5 class="eslogan">Vacacionar en cualquier destino del mundo</h5>
<h4 class="titulo">Interval World</h4> <br/>
<img src="../Imagenes/intervalworld.jpg" />
<br/> <br/>
<h5 class="nota">El complejo Tras las Sierras (TlS) se encuentra asociado a IntervalWorld, una de las cadenas de intercambio de tiempo compartido más grande del mundo, que proporciona a sus miembros la capacidad de vacacionar en todo el mundo, con servicio de cambio global y muchas otras interesantes ventajas exclusivas. <br/><br/>
Si Ud. ya es dueño de un tiempo compartido en TlS, ya cuenta con este beneficio.<br/>
Si Ud no lo es, puede adquirir su semana y tener la posibilidad de vacacionar en cualquier destino del mundo.<br/><br/>
Asesorese por medio de nuestro formulario de contacto o a través de nuestros teléfonos (+054)0053 4543-4339/8.<br/></h5>
</section>
<section class="informacion">
<h5 class="eslogan">Descubra lo que TlS tiene para ofrecerle </h5>
<h4 class="titulo">Bosque + Cabañas + Ríos</h4> <br/>
<h5 class="nota">Cuenta con seis cabañas tipo dúplex, totalmente equipadas, con cocheras individuales.
A través de sus ventanales se pueden disfrutar los colores, olores y sonidos del bosque, ya que se privilegió la preservación del entorno sin descuidar la intimidad y el confort de cada módulo habitacional. </h5> <br/> <br/>
<h5 class="eslogan">Relájse y disfrute</h5>
<h4 class="titulo">Infraestructura, servicio y comodidad</h4> <br/>
<h5 class="nota">Tras las Sierras le ofrece a Ud. y su familia piscinas para niños y adultos al aire libre con un importante solarium, pileta cubierta y jacuzzi climatizados con extensos ventanales al bosque. <br/><br/> También un completo gimnasio con sauna y ducha escocesa; un gran quincho cubierto totalmente equipado con heladeras, vajilla y mantelería y espectaculares asadores criollos, parrillas y hornos de barro.</h5>
</section>
</div>
</div>
<footer> <!-- Pie de la página-->
<!-- Pie zona superior reservada para menús rápidos y contacto -->
<div id="piezonasuperior">
<div id="galeria">
<!-- Zona 1 comenzando desde la izquierda-->
<span style="margin-left:10px;">Galería</span>
<ul>
<li><a href="#" onClick="javascript: enconstruccion();"> Galería de Imágenes </a></li>
<li><a href="#" onClick="javascript: enconstruccion();"> Complejo </a></li>
<li><a href="#" onClick="javascript: enconstruccion();"> Cabañas </a></li>
<li><a href="#" onClick="javascript: enconstruccion();"> Quincho </a></li>
<li><a href="#" onClick="javascript: enconstruccion();"> Actividades </a></li>
</ul>
</div>
<!-- Zona 2 -->
<div id="contacto">
<span>Contacto rápido</span>
<div class="hr" style="top:12px;"> </div><br style="line-height: 8px;"/>
<form action="mailto:all@cablenet.com.ar" enctype="text/plain" method="post" name="formulario">
<input name="apynom" type="text" autofocus maxlength="35" required onKeyPress="javascript: return saltar(event,this);"> <label for="apynom">Nomb</label>
<input name="email" type="email" maxlength="35" required onKeyPress="javascript: return saltar(event,this);"> <label for="email">E-Mail</label>
<textarea name="consulta" cols="27" rows="8">Ingrese su consulta, por favor! </textarea> <label for="consulta"></label>
<input type="submit" value="Enviar mensaje rápido" tabindex="3" class="boton">
</form>
</div>
<!-- Zona 3 -->
<div id="datos">
<h3 style="top: -10px;">Oficinas en Córdoba</h3>
<h2 style="top: -25px;">reservas y<br/>consultas</h2>
<div class="hr" style="top: -10px;"> </div>
<span>
9 de Julio 543 1° Piso Oficina 12 <br/>
(X5903)-Villa Nueva, Provincia de Córdoba <br/>
Argentina
</span>
<h2 style="top: 20px;">número de tel.:<br/>
(+054)0053<br/>
4543-4339/8<br/>
</h2>
<br/><br/><br/>
<span>tlsierras.com.ar</span>
</div>
</div>
<!-- Pie zona inferior reservada datos de diseño -->
<div id="piezonainferior">
<div class="izquierda"> 2013 DTC / Dirección de Turismo de Córdoba </div>
<div class="derecha"> <span class="textopie">Trabajo realizado por<br/>
ESC44 - División Diseño</span> <figure> <a href="#" title="Complejo Tras las Sierras - Córdoba - Argentina">
<img src="file:///C:/Escuela2013/Imagenes/logopie.JPG" class= "logopie" alt="Complejo Tras las Sierras - Córdoba - Argentina">
</a> </figure> </div>
</div>
</footer>
</div>
</body>
</html>