Descripción: imei
Estado: SIN compilar
Fecha de creación: 2017-05-22 14:24:21

<!DOCTYPE html>
<html>

<head>
<style>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</style>
</head>

<body>
<span style="font-family: 'Roboto Condensed', sans-serif; font-size: 0.7em; padding: 3px; border: 1px solid black;">IMEI: 359253062375177</span>
</body>

</html>

Descripción: imei
Estado: COMPILADO

IMEI: 359253062375177

Descripción: imei
Estado: SIN compilar
Fecha de creación: 2017-05-22 14:03:21

<!DOCTYPE html>
<html>

<head>
<style>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</style>
</head>

<body>
<span style="font-family: 'Roboto Condensed', sans-serif; font-size: 0.7em;">IMEI: 35925306237517</span>
</body>

</html>

Descripción: imei
Estado: COMPILADO

IMEI: 35925306237517

Descripción: para jaycee
Estado: SIN compilar
Fecha de creación: 2017-05-17 19:49:09

<!DOCTYPE html>
<html>

<head>
<style>
.Tabla{ width: 100%; }
.Tabla td, th{ border-bottom: 1px solid #ddd; }
.Ejemplo1{ border: 1px solid black; height: 20px; }
</style>
</head>

<body>
<div style="overflow-x:auto;">
<table class="Tabla">
<tbody>
<tr>
<td>Descripción</td>
<td>Código</td>
<td>Resultado</td>
</tr>
<tr>
<td>Ejemplo 1</td>
<td>border: 1px solid black; height: 20px;</td>
<td><div class="Ejemplo1"></div></td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

Descripción: para jaycee
Estado: COMPILADO

Descripción Código Resultado
Ejemplo 1 border: 1px solid black; height: 20px;

Descripción: otro efecto fade con pase de imagenes
Estado: SIN compilar
Fecha de creación: 2017-03-18 22:06:02

<html>
<head>
<style>

#foto a { display:block;
border: 1px solid red;
width:200px;
height:76px;
background:url('http://www.elsmasosdecaula.com/webdata/menus-masias/A01.png');
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
#foto a:hover { background:url('http://www.elsmasosdecaula.com/webdata/menus-masias/A02.png') no-repeat; -moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p id="foto"><a href="google.es"></a></p>

</body>
</html>

Descripción: otro efecto fade con pase de imagenes
Estado: COMPILADO


Descripción: bot-sociales-simples-efecto-fade-OK
Estado: SIN compilar
Fecha de creación: 2017-02-01 10:23:01

<!DOCTYPE html>
<html>

<head>
<style>
.Bot-Social-Simple-Efecto-FadeIn {
position:relative;
height:50px;
margin:0 auto;
width:50px;
}
.Bot-Social-Simple-Efecto-FadeIn img {
left: 0;
position:absolute;
top: 0;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.Bot-Social-Simple-Efecto-FadeIn img.novisible {opacity:0;filter:alpha(opacity=0);}
.Bot-Social-Simple-Efecto-FadeIn:hover img.novisible {opacity:1;filter:alpha(opacity=125);}
.Bot-Social-Simple-Efecto-FadeIn:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.Bot-Social-Simple-Efecto-FadeIn img.visible:hover {opacity:0;filter:alpha(opacity=0);}
</style>
</head>

<body>
<div style="float:left;">
<div class="Bot-Social-Simple-Efecto-FadeIn">
<a title="Els Masos de Caula @ Facebook" target="_blank" href="https://www.facebook.com/ElsMasosDeCaula/"><img class="novisible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-facebook(44px)-org.png" alt="Els Masos de Caula @ Facebook" /></a>
<a title="Els Masos de Caula @ Facebook" target="_blank" href="https://www.facebook.com/ElsMasosDeCaula/"><img class="visible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-facebook(44px)-byn.png" alt="Els Masos de Caula @ Facebook" /></a>
</div>
</div>
<div style="float:left;">
<div class="Bot-Social-Simple-Efecto-FadeIn">
<a title="Els Masos de Caula @ Instagram" target="_blank" href="https://www.instagram.com/elsmasosdecaula/"><img class="novisible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-instagram(44px)-org.png" alt="Els Masos de Caula @ Instagram" /></a>
<a title="Els Masos de Caula @ Instagram" target="_blank" href="https://www.instagram.com/elsmasosdecaula/"><img class="visible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-instagram(44px)-byn.png" alt="Els Masos de Caula @ Instagram" /></a>
</div>
</div>
<div style="float:left;">
<div class="Bot-Social-Simple-Efecto-FadeIn">
<a title="Els Masos de Caula @ Pinterest" target="_blank" href="#"><img class="novisible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-pinterest(44px)-org.png" alt="Els Masos de Caula @ Pinterest" /></a>
<a title="Els Masos de Caula @ Pinterest" target="_blank" href="#"><img class="visible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-pinterest(44px)-byn.png" alt="Els Masos de Caula @ Pinterest" /></a>
</div>
</div>
</body>

</html>

Descripción: bot-sociales-simples-efecto-fade-OK
Estado: COMPILADO

Els Masos de Caula @ Facebook Els Masos de Caula @ Facebook
Els Masos de Caula @ Instagram Els Masos de Caula @ Instagram
Els Masos de Caula @ Pinterest Els Masos de Caula @ Pinterest

Descripción: bot-sociales-simples-efecto-fade
Estado: SIN compilar
Fecha de creación: 2017-01-31 12:25:37

<!DOCTYPE html>
<html>

<head>
<style>
.demoIMG {
position:relative;
height:50px;
margin:0 auto;
width:50px;
}
.demoIMG img {
left: 0;
position:absolute;
top: 0;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=125);}
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}
</style>
</head>

<body>
<div style="float:left;">
<div class="demoIMG">
<a title="Els Masos de Caula @ Facebook" target="_parent" href="#"><img width="44" height="44" class="novisible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-facebook(44x44)-org.png" alt="Els Masos de Caula @ Facebook" /></a>
<a title="Els Masos de Caula @ Facebook" target="_parent" href="#"><img width="44" height="44" class="visible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-facebook(44x44)-byn.png" alt="Els Masos de Caula @ Facebook" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="Els Masos de Caula @ Instagram" target="_parent" href="#"><img width="44" height="44" class="novisible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-instagram(44x44)-org.png" alt="Els Masos de Caula @ Instagram" /></a>
<a title="Els Masos de Caula @ Instagram" target="_parent" href="#"><img width="44" height="44" class="visible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-instagram(44x44)-byn.png" alt="Els Masos de Caula @ Instagram" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="Els Masos de Caula @ Pinterest" target="_parent" href="#"><img width="44" height="44" class="novisible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-pinterest(44x44)-org.png" alt="Els Masos de Caula @ Pinterest" /></a>
<a title="Els Masos de Caula @ Pinterest" target="_parent" href="#"><img width="44" height="44" class="visible" src="http://www.elsmasosdecaula.com/webdata/bot-social/bot-pinterest(44x44)-byn.png" alt="Els Masos de Caula @ Pinterest" /></a>
</div>
</div>
</body>

</html>




Descripción: bot-sociales-simples-efecto-fade
Estado: COMPILADO

Els Masos de Caula @ Facebook Els Masos de Caula @ Facebook
Els Masos de Caula @ Instagram Els Masos de Caula @ Instagram
Els Masos de Caula @ Pinterest Els Masos de Caula @ Pinterest

Descripción: menu masias
Estado: SIN compilar
Fecha de creación: 2017-01-30 02:57:55

<!DOCTYPE html>
<html>

<head>
<style>
.demoIMG {
position:relative;
margin:0 auto;
width:178px;
height:61px;
}
.demoIMG img {
left: 0;
position:absolute;
top: 0;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=125);}
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}
</style>
</head>

<body>
<center>
<div style="width:890px;height:50px;">
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-galliner/"><img width="178" height="61" class="novisible" src="http://davidch.com/rusticmida/botones/A02.png" alt="Mas Galliner" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-galliner/"><img width="178" height="61" class="visible" src="http://davidch.com/rusticmida/botones/A01.png" alt="Mas Galliner" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/ca-la-tieta/"><img width="178" height="61" class="novisible" src="http://davidch.com/rusticmida/botones/B02.png" alt="Ca La Tieta" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/ca-la-tieta/"><img width="178" height="61" class="visible" src="http://davidch.com/rusticmida/botones/B01.png" alt="Ca La Tieta" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-oliveres/"><img width="178" height="61" class="novisible" src="http://davidch.com/rusticmida/botones/C02.png" alt="Mas Oliveres" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-oliveres/"><img width="178" height="61" class="visible" src="http://davidch.com/rusticmida/botones/C01.png" alt="Mas Oliveres" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/paller-de-dalt/"><img width="178" height="61" class="novisible" src="http://davidch.com/rusticmida/botones/D02.png" alt="Paller de Dalt" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/paller-de-dalt/"><img width="178" height="61" class="visible" src="http://davidch.com/rusticmida/botones/D01.png" alt="Paller de Dalt" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-peracaula/"><img width="178" height="61" class="novisible" src="http://davidch.com/rusticmida/botones/E02.png" alt="Mas Peracaula" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-peracaula/"><img width="178" height="61" class="visible" src="http://davidch.com/rusticmida/botones/E01.png" alt="Mas Peracaula" /></a>
</div>
</div>
</div>
</center>
</body>

</html>

Descripción: menu masias
Estado: COMPILADO

Mas Galliner Mas Galliner
Ca La Tieta Ca La Tieta
Mas Oliveres Mas Oliveres
Paller de Dalt Paller de Dalt
Mas Peracaula Mas Peracaula

Descripción: yeeey
Estado: SIN compilar
Fecha de creación: 2017-01-28 07:07:28

<style>

.demoIMG {
position:relative;
height:45px;
margin:0 auto;
width:125px;
}
.demoIMG img {
left: 0;
position:absolute;
top: 0;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=125);}
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}
</style>

<center>
<div style="width:625px;height:50px;">
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-galliner/"><img width="125" height="45" class="novisible" src="http://davidch.com/rusticmida/botones/A02.png" alt="Mas Galliner" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-galliner/"><img width="125" height="45" class="visible" src="http://davidch.com/rusticmida/botones/A01.png" alt="Mas Galliner" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/ca-la-tieta/"><img width="125" height="45" class="novisible" src="http://davidch.com/rusticmida/botones/B02.png" alt="Ca La Tieta" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/ca-la-tieta/"><img width="125" height="45" class="visible" src="http://davidch.com/rusticmida/botones/B01.png" alt="Ca La Tieta" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-oliveres/"><img width="125" height="45" class="novisible" src="http://davidch.com/rusticmida/botones/C02.png" alt="Mas Oliveres" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-oliveres/"><img width="125" height="45" class="visible" src="http://davidch.com/rusticmida/botones/C01.png" alt="Mas Oliveres" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/paller-de-dalt/"><img width="125" height="45" class="novisible" src="http://davidch.com/rusticmida/botones/D02.png" alt="Paller de Dalt" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/paller-de-dalt/"><img width="125" height="45" class="visible" src="http://davidch.com/rusticmida/botones/D01.png" alt="Paller de Dalt" /></a>
</div>
</div>
<div style="float:left;">
<div class="demoIMG">
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-peracaula/"><img width="125" height="45" class="novisible" src="http://davidch.com/rusticmida/botones/E02.png" alt="Mas Peracaula" /></a>
<a title="" target="_parent" href="http://www.elsmasosdecaula.com/es/masias/mas-peracaula/"><img width="125" height="45" class="visible" src="http://davidch.com/rusticmida/botones/E01.png" alt="Mas Peracaula" /></a>
</div>
</div>
</div>
</center>

Descripción: yeeey
Estado: COMPILADO

Mas Galliner Mas Galliner
Ca La Tieta Ca La Tieta
Mas Oliveres Mas Oliveres
Paller de Dalt Paller de Dalt
Mas Peracaula Mas Peracaula

Descripción: Efecto imagen Slide+Overlay
Estado: SIN compilar
Fecha de creación: 2017-01-25 07:44:47

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.container {
width: 890px;
height: auto;
position: absolute;
left: 0px;
margin: 0 auto;
top: 0px;
}
.div-img {
display: block;
margin-left: auto;
margin-right: auto;
}
.div-img.hidden {
overflow: hidden;
}
.div-img .img {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
height: auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
transform: translate(0px);
-ms-transform: translate(0px);
-moz-transform: translate(0px);
-webkit-transform: translate(0px);
-o-transform: translate(0px);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
}
.div-img .text {
font-family: 'Open Sans';
position: absolute;
z-index: -1;
display: block;
height: 0%;
top: 0%;
left: 0;
width:50%;
padding-left: 5px;
opacity: 0;
transition: all 1.5s;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
}
.div-img .overlay {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
/*dim the background*/
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.div-img:hover .img {
transform: translate(60%, 0px);
-ms-transform: translate(60%, 0px);
-moz-transform: translate(60%, 0px);
-webkit-transform: translate(60%, 0px);
-o-transform: translate(60%, 0px);
}
.div-img:hover .text {
opacity: 1;
}
</style>

<div class="container">
<div class="div-img hidden" >
<img class="img" src="http://www.elsmasosdecaula.com/wp-content/uploads/2017/01/gast-est-3-ca-lenric.png" title="Foto6" alt="Foto6">
<div class="overlay"></div>
<div class="text"><h5 style="text-align: justify;">Ca l'Enric</h5>
<p style="text-align: justify;">Una Estrella Michelin.
Una casa de poderosos contrastes e innegable personalidad que presume de tener un <em>leitmotiv</em>: la exaltación de los bosques de La Vall de Bianya y sus productos.
Goza de una cuidada iluminación, mucho diseño, una moderna bodega que se puede visitar.
Una gran cocina creativa.</p>
<p style="text-align: justify;">Ctra. de Camprodon, s/n (Nacional 260, km 91);&nbsp;17813 La Vall de Bianya Girona
<span style="font-size: 10pt;">A 43 kilometros.</span></p></div>
</div>
</div>

Descripción: Efecto imagen Slide+Overlay
Estado: COMPILADO


Descripción: Efecto Imagen Escalada + Texto Faded
Estado: SIN compilar
Fecha de creación: 2017-01-20 09:36:47

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.container {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 20px;
}
.div-img {
display: block;
margin-left: auto;
margin-right: auto;
}
.div-img .img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
}
.div-img .text {
font-family: 'Open Sans';
padding-top: 0px;
margin-top: -10px;
display: block;
text-align: center;
width: 100%;
transform: translate(0px);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
opacity: 0;
transition: transfom opacity 1.5s;
}
.div-img:hover .img {
transform: scale(0.8);
-ms-transform: scale(0.8);
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
}
.div-img:hover .text {
transform: translate(0px, -20px);
opacity: 1;
}

</style>

<div class="container">
<div class="div-img" >
<img class="img" src="http://www.interactius.com/wp-content/uploads/2015/03/foto4.png" title="Foto4" alt="Foto4">
<div class="text">Nice picture</div>
</div>
</div>

Descripción: Efecto Imagen Escalada + Texto Faded
Estado: COMPILADO

Foto4
Nice picture

Descripción: tabla datos form
Estado: SIN compilar
Fecha de creación: 2016-12-09 11:01:37

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet'>
</head>
<body>
<table style='font-family: 'Roboto',sans-serif; font-size: 14px;'>
<tbody>
<tr>
<td>Solicitud de reserva para:</td>
<td>MASIA</td>
</tr>
<tr>
<td>Nombre completo:</td>
<td>NOM</td>
</tr>
<tr>
<td>Tel&eacute;fono de contacto:</td>
<td>TEL</td>
</tr>
<tr>
<td>Correo electr&oacute;nico:</td>
<td>EMA</td>
</tr>
<tr>
<td>Fecha de entrada:</td>
<td>ENT</td>
</tr>
<tr>
<td>Fecha de salida:</td>
<td>SAL</td>
</tr>
<tr>
<td>Cant. de adultos:</td>
<td>ADU</td>
</tr>
<tr>
<td>Cant. de ni&ntilde;os:</td>
<td>NIN</td>
</tr>
<tr>
<td>TERMS</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

Descripción: tabla datos form
Estado: COMPILADO

Solicitud de reserva para: MASIA
Nombre completo: NOM
Teléfono de contacto: TEL
Correo electrónico: EMA
Fecha de entrada: ENT
Fecha de salida: SAL
Cant. de adultos: ADU
Cant. de niños: NIN
TERMS  

Descripción: mostrar pos del raton
Estado: SIN compilar
Fecha de creación: 2016-12-03 04:54:48

<html>

<head>



<title>Mostrar un div en la posición del ratón</title>



<style type="text/css">

/*order ok: link,visited,hover,active*/

A:link, A:visited, A:hover, A:active{color:#0000ff;}



#flotante

{

position: absolute;

display:none;

font-family:Arial;

font-size:0.8em;

width:220px;

border:1px solid #808080;

background-color:#f1f1f1;

}

</style>



<script type="text/javascript">

<!--

//Funcion que muestra el div en la posicion del mouse

function showdiv(event)

{

//determina un margen de pixels del div al raton

margin=5;


//La variable IE determina si estamos utilizando IE

var IE = document.all?true:false;

//Si no utilizamos IE capturamos el evento del mouse

if (!IE) document.captureEvents(Event.MOUSEMOVE)


var tempX = 0;

var tempY = 0;


if(IE)

{ //para IE

tempX = event.clientX + document.body.scrollLeft;

tempY = event.clientY + document.body.scrollTop;

}else{ //para netscape

tempX = event.pageX;

tempY = event.pageY;

}

if (tempX < 0){tempX = 0;}

if (tempY < 0){tempY = 0;}


//modificamos el valor del id posicion para indicar la posicion del mouse

document.getElementById('posicion').innerHTML="PosX = "+tempX+" | PosY = "+tempY;


document.getElementById('flotante').style.top = (tempY+margin);

document.getElementById('flotante').style.left = (tempX+margin);

document.getElementById('flotante').style.display='block';

return;

}

-->

</script>



</head>



<body>

<h1>Mostrar un div en la posición del ratón</h1>

<p><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.</a></p>



<!--mostramos el enlace para pulsar y visualizar el div-->

<p style='margin-top:100px;'><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.</a></p>



<!--

Generamos el div con tres eventos del mouse:

onmouseout = en el momento que el raton desaparezca del div,

se escondera el div

onclick = si se realiza unclick en el div, se escondera el div

onmouseover = miestras el raton este encima del div, se indica

que se muestre el div. No se si es del todo necesaria esta

casilla...

-->

<div id="flotante" onmouseout="this.style.display='none'" onclick="this.style.display='none'" onmouseover="this.style.display='block'">

<a href="http://www.lawebdelprogramador.com" target="_blank">Código de La Web del Programador</a>

<br /><span id="posicion"></span>

</div>



</body>

</html>

Descripción: mostrar pos del raton
Estado: COMPILADO

Mostrar un div en la posición del ratón

Mostrar un div en la posición del ratón

Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.

Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.

Código de La Web del Programador

Descripción: idiomas cambio color sin borde
Estado: SIN compilar
Fecha de creación: 2016-11-25 17:45:50

<style>
.hvr-border-fade {
color: #948a54;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
box-shadow: inset 0 0 0 2px #c4bfa1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active {
box-shadow: inset 0 0 0 2px #948a54, 0 0 1px rgba(0, 0, 0, 0);
background-color: #948a54;
color:white;
/* Hack to improve aliasing on mobile/tablet devices */
}
.BotLang {
color: #948a54;
font: 400 20px "Abel","Open Sans","Arial",sans-serif;
display: inline-block;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.BotLang:hover, .BotLang:focus, .BotLang:active {
color: #7c3100;
}
</style>

<div style="float:left;">
<a class="button BotLang" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="/ca/" title="Català">CAT</a><span style="color:#948a54;">&#45;</span>
<a class="button BotLang" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="/es/" title="Castellano">ESP</a><span style="color:#948a54;">&#45;</span>
<a class="button BotLang" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="/en/" title="English">ENG</a><span style="color:#948a54;">&#45;</span>
<a class="button BotLang" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="/fr/" title="Français">FRA</a><span style="color:#948a54;">&#45;</span>
<a class="button BotLang" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="/de/" title="English">DEU</a>
</div>

Descripción: idiomas cambio color sin borde
Estado: COMPILADO

CAT- ESP- ENG- FRA- DEU

Descripción: servicios hosteleria
Estado: SIN compilar
Fecha de creación: 2016-11-23 21:47:06

<center><img style="padding:10px" src="http://davidch.com/rusticmida/servicios/01.png" /><img style="padding:10px" src="http://davidch.com/rusticmida/servicios/02.png" /><img style="padding:10px" src="http://davidch.com/rusticmida/servicios/03.png" /><img style="padding:10px" src="http://davidch.com/rusticmida/servicios/04.png" /><img style="padding:10px" src="http://davidch.com/rusticmida/servicios/05.png" /><img style="padding:10px" src="http://davidch.com/rusticmida/servicios/06.png" /></center>

Descripción: servicios hosteleria
Estado: COMPILADO


Descripción: transición fade hover con imagen
Estado: SIN compilar
Fecha de creación: 2016-11-22 22:13:30

<style>
.demoIMG {
position:relative;
height:68px;
margin:0 auto;
width:150px;
}
.demoIMG img {
left: 0;
position:absolute;
top: 0;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}
</style>

<div class="demoIMG">
<img class="novisible" width="150" heigh="68" src="http://davidch.com/0_db/002.png" />
<img class="visible" width="150" heigh="68" src="http://davidch.com/0_db/001.png" />
</div>

Descripción: transición fade hover con imagen
Estado: COMPILADO


Descripción: Estados MngTasks
Estado: SIN compilar
Fecha de creación: 2016-10-19 21:50:03

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Estados MngTasks:
<br>1 - Urgente: <i class="fa fa-exclamation-triangle" style="color:red;"></i>
<br>2 - Pendiente: <i class="fa fa-coffee" style="color:blue;"></i>
<br>3 - Programada: <i class="fa fa-clock-o" style="color:purple;"></i>
<br>4 - Hecha: <i class="fa fa-check" style="color:green;"></i>
<br>5 - Rechazada: <i class="fa fa-thumbs-down" style="color:grey;"></i>

Descripción: Estados MngTasks
Estado: COMPILADO

Estados MngTasks:
1 - Urgente:
2 - Pendiente:
3 - Programada:
4 - Hecha:
5 - Rechazada:

Descripción: para el menueditor
Estado: SIN compilar
Fecha de creación: 2016-10-07 13:21:18

<style>
.MenuEditor input[type="text"] {
border:1px solid red;
}
.MenuEditor button {
border:1px solid green;
}
</style>

<form method="post" class="MenuEditor" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="name" class="MenuEditor">Url, Target and Name</br><input type="text" class="MenuEditor" name="Name" placeholder="SELECT AN OPTION" /></label></br>
Option Number [ID]<br><input type="text" class="MenuEditor" name="nID" placeholder="SELECT AN OPTION" disabled /></br>
Suboption of... [ParentID]<br><input type="text" class="MenuEditor" name="ParentID" placeholder="SELECT AN OPTION" disabled /></br>
Order [Position]<br><input type="text" class="MenuEditor" name="Position" placeholder="SELECT AN OPTION" disabled /></br>
Level Option<br><input type="text" class="MenuEditor" name="LevelOption" placeholder="SELECT AN OPTION" disabled /></br>
<button class="MenuEditor">PROCEED</button>
</form>

Descripción: para el menueditor
Estado: COMPILADO


Descripción: hola
Estado: SIN compilar
Fecha de creación: 2016-09-26 11:38:24

<table>
<tboby>
<tr>
<td>ID</td>
<td>Name</td>
<td>Parent ID</td>
<td>Position</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

Descripción: hola
Estado: COMPILADO

ID Name Parent ID Position Edit Delete

Descripción: captcha google
Estado: SIN compilar
Fecha de creación: 2016-08-28 05:44:13

http://webdesign.tutsplus.com/es/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website--cms-23024

Descripción: captcha google
Estado: COMPILADO

http://webdesign.tutsplus.com/es/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website--cms-23024

Descripción: botones lang salgar
Estado: SIN compilar
Fecha de creación: 2016-08-28 05:40:15

<style>
/* Border Fade */
.hvr-border-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
box-shadow: inset 0 0 0 2px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active {
box-shadow: inset 0 0 0 2px #2098d1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
</style>

<div style="float:left;">
<a class="button hvr-border-fade" style="float:left; font-size:20px; padding:2px; margin-right:4px;" href="http://salgargroup.com/ca/"><img src="http://salgargroup.com/0_db/lang_cat.png" title="Català " alt="Català " /></a><a class="button hvr-border-fade" style="float:left; font-size:20px; padding:2px; margin-right:4px;" href="http://salgargroup.com/es/"><img src="http://salgargroup.com/0_db/lang_esp.png" title="Español" alt="Español" /></a><a class="button hvr-border-fade" style="float:left; font-size:20px; padding:2px; margin-right:4px;" href="http://salgargroup.com/en/"><img src="http://salgargroup.com/0_db/lang_eng.png" title="English" alt="English" /></a>
</div>

<div style="float:left;">
<a class="button hvr-border-fade" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="http://salgargroup.com/ca/" title="Català ">CAT</a>
<a class="button hvr-border-fade" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="http://salgargroup.com/ca/" title="Español">ESP</a>
<a class="button hvr-border-fade" style="width:40px; padding:4px; margin-right:2px; text-align:center;" href="http://salgargroup.com/ca/" title="English">ENG</a>
</div>

Descripción: botones lang salgar
Estado: COMPILADO

Català EspañolEnglish
CAT ESP ENG

Descripción: Keypass Added
Estado: SIN compilar
Fecha de creación: 2016-08-28 00:28:30

Keypass Added.

Descripción: Keypass Added
Estado: COMPILADO

Keypass Added.