Diario IFCD0110 Castro Urdiales: 2015-01-25

Efecto sexy, calendario y hojas cayendo

Explicación:

Efecto sexy

Se trata de un efecto que simula una doblez en la página, de la cuál el usuario puede estirar hasta mostrar el código de la página, siendo en realidad esa doblez una imagen con transparencia que se hace más grande.

Calendario

Es básicamente lo que se puede apreciar, un calendario. No obstante, en lugar de ser estático se puede buscar la fecha que se desee en él

Hojas

El efecto original eran copos de nieve, pero como son imágenes cayendo, sustituí la idea original con una que casaba mejor con mi plantilla.

Código

<!Doctype html>

<head>

<!meta charset="utf-8"/>

<title>Ejercicio css</title>

img {

float: top;

float: left;

float: bottom;

border-radius: 15px ;

}

h1{

text-align: center;

font: oblique bold 120% cursive;

font-size: 380%;

color: white;

margin: 10px;

height: 150px;

text-align: center;

padding: 8px;

width: 80%;

border: transparent;

background: #58D3F7;

border-radius: 15px ;

}

#cssmenu{

height: 200px;

width: 250px;

padding-top: 20px;

padding-right:20px;

font-family: Comic Sans MS;

text-align: left;

float:left;

margin-left: -270px ;

background: #FAAC58;

border-radius: 15px ;

margin-top: 60px;

}

li a{ color:#000000; }

#contenedor {

width:1300px;

border:1px solid #333333;

height: 1500px;

background-color:#FFF8F0;

margin:40px auto;

border-radius: 15px ;

text-align:left;

}

h2{ font-family: MV Boli; }

#contenido{

float:left;

margin-right: 20px ;

background: #58FAAC;

width: 900px;

border-radius: 15px ;

padding-top: 20px;

padding-right:20px;

padding-left:20px;

padding-bottom:20px;

margin-top: -220px;

margin-left: 300px;

}

#csmenu2{

position:relative;

height: 270px;

width: 275px;

top: 280px;

right:0px;

font-family: Comic Sans MS;

text-align: left;

float:left;

margin-left: -270px ;

background: pink;

border-radius: 15px ;

margin-top: 60px;

}

#contenido img{ margin-top: -35px;

margin-left: 700px;

}

.centrado{

margin-left: 500px;

margin-top: 80px;}

</style>

Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)

Permission granted to Dynamicdrive.com to include script in archive

For this and 100's more DHTML scripts, visit http://dynamicdrive.com

var ns6=document.getElementById&&!document.all

var ie4=document.all

var Selected_Month;

var Selected_Year;

var Current_Date = new Date();

var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();

if (Current_Year < 1000)

Current_Year+=1900

var Today = Current_Date.getDate();

function Header(Year, Month) {

if (Month == 1) {

Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;

}

var Header_String = Month_Label[Month] + ' ' + Year;

return Header_String;

}

function Make_Calendar(Year, Month) {

var First_Date = new Date(Year, Month, 1);

var Heading = Header(Year, Month);

var First_Day = First_Date.getDay() + 1;

if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||

((Days_in_Month[Month] == 30) && (First_Day == 7))) {

var Rows = 6;

}

else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {

var Rows = 4;

}

else {

var Rows = 5;

}

var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

var Day_Counter = 1;

var Loop_Counter = 1;

for (var j = 1; j <= Rows; j++) {

HTML_String += '<tr ALIGN="left" VALIGN="top">';

for (var i = 1; i < 8; i++) {

if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {

if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {

HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';

}

else {

HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';

}

Day_Counter++;

}

else {

HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';

}

Loop_Counter++;

}

HTML_String += '</tr>';

}

HTML_String += '</table></td></tr></table>';

cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar

cross_el.innerHTML = HTML_String;

}

function Check_Nums() {

if ((event.keyCode < 48) || (event.keyCode > 57)) {

return false;

}

function On_Year() {

var Year = document.when.year.value;

if (Year.length == 4) {

Selected_Month = document.when.month.selectedIndex;

Selected_Year = Year;

Make_Calendar(Selected_Year, Selected_Month);

}

function On_Month() {

var Year = document.when.year.value;

if (Year.length == 4) {

Selected_Month = document.when.month.selectedIndex;

Selected_Year = Year;

Make_Calendar(Selected_Year, Selected_Month);

}

else {

alert('Please enter a valid year.');

document.when.year.focus();

}

function Defaults() {

if (!ie4&&!ns6)

return

var Mid_Screen = Math.round(document.body.clientWidth / 2);

document.when.month.selectedIndex = Current_Month;

document.when.year.value = Current_Year;

Selected_Month = Current_Month;

Selected_Year = Current_Year;

Make_Calendar(Current_Year, Current_Month);

}

function Skip(Direction) {

if (Direction == '+') {

if (Selected_Month == 11) {

Selected_Month = 0;

Selected_Year++;

}

else {

Selected_Month++;

}

else {

if (Selected_Month == 0) {

Selected_Month = 11;

Selected_Year--;

}

else {

Selected_Month--;

}

Make_Calendar(Selected_Year, Selected_Month);

document.when.month.selectedIndex = Selected_Month;

document.when.year.value = Selected_Year;

}

</script>

</head>

<h1>CUENTAME UN CUENTO</h1>

<p></p>

<ul>

<li><a href='https://es-la.facebook.com/notes/juan-carlos-g%C3%B3mez/autovaloraci%C3%B3n-cuento-el-verdadero-valor-del-anillo/10151460096772219'><span>El verdadero valor del anillo</span></a></li>

<li><a href='http://irenia.blogia.com/2004/042801-elefante-encadenado-jorge-bucay.php'><span>El elefante encadenado</span></a></li>

<li><a href='http://www.psicoweb.unlugar.com/alas.html'><span>Las alas son para volar</span></a></li>

<li><a href='http://www.psicoweb.unlugar.com/ranitas.htm'><span>Las ranitas en la crema</span></a></li>

<li><a href='http://www.psicoweb.unlugar.com/prostibulo.htm'><span>El portero del prostíbulo</span></a></li>

<li><a href='http://las1001noches.bligoo.es/cuento-el-tesoro-enterrado-jorge-bucay#.U-B0vvl_smk'><span>El tesoro enterrado</span></a></li>

</ul>

</div>

<tr>

if (ie4||ns6){

for (j=0;j<Month_Label.length;j++) {

document.writeln('<option value=' + j + '>' + Month_Label[j]);

}

</script>

</select>

</td>

<td><input type="button" value="Next -->" onClick="Skip('+')"></td>

</tr></table></form></div>

</div>

<h2>Lluvia nocturna</h2>

<p>Era una noche tranquila y oscura, la humedad se podía respirar, incluso palpar. Cerró los ojos para sentir el viento, agudizó sus sentidos para recibir toda la información que le pudiesen transmitir<br>

Cada parte de su cuerpo estaba preparada para percibir la densidad del ambiente, para escuchar el murmullo del viento entre las hojas, aquellos susurros naturales que parecía que en cualquier momento se tornarían en palabras entendibles. Supo a ciencia cierta que iba a llover, todo lo indicaba a pesar de que no podía ver las nubes. <br>

La luna no brillaba aquella noche nubosa, no había ni un recóndito espacio en el cielo que diese esa posibilidad, por lo que el bosque era más sombrío que de costumbre.

De seguro no habría tormenta, el ambiente no tenía para nada esa sensación cálida y esa presión electrificada, en cambio, el agua que se aproximaba podía hasta olerse.

Se apresuró a atravesar el bosque a pesar de que la visibilidad era mínima, esquivando con agilidad felina cada rama, cada arbusto y cada raíz que sobresalía de la tierra. Su habilidad era realmente admirable, pero todo era cuestión de práctica, aquel bosque había formado parte de su infancia y esos recorridos nocturnos siempre fueron habituales

desde el momento en el que perdió su miedo a los lugares oscuros.

A medida que avanzaba, empezó a sentir el disimulado impacto de diminutas y silenciosas gotas en su rostro, la lluvia por fín comenzaba, mas aún no había llegado a su ansiado destino.

Paulatinamente la frecuencia con que descendían las gotas de lluvia fue aumentando a la par que la sensación húmeda de las hojas con las que en ocasiones se rozaba al pasar.

No tardó demasiado en llegar a su claro favorito. Una vez allí, paró un momento para tomar algo de aliento, tras esto y ya colocada en el centro del lugar, cerró los ojos, inspiró profundamente y se dispuso a extender sus brazos, como si fuese a darle un abrazo al viento.

Así dispuesta, comenzó a dar vueltas sobre si misma, girando y girando en una danza silenciosa en mitad de la oscuridad y sintiendo en su piel cada pequeña gota de lluvia y sintiéndose viva como nunca antes.

<h2 style="font-family: MV Boli; font-size: 12pt">Melani</h2>

</p>

</div>

</div>

/******************************************

* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)

* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code

* Last updated Nov 9th, 05' by DD. This notice must stay intact for use

******************************************/

//Configure below to change URL path to the snow image

var snowsrc="images.gif"

// Configure below to change number of snow to render

var no = 10;

// Configure whether snow should disappear after x seconds (0=never):

var hidesnowtime = 0;

// Configure how much snow should drop down before fading ("windowheight" or "pageheight")

var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;

var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height = 600;

if (ns6up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = iecompattest().clientWidth;

doc_height = iecompattest().clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc

for (i = 0; i < no; ++ i) {

dx[i] = 0; // set coordinate variables

xp[i] = Math.random()*(doc_width-50); // set position variables

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20; // set amplitude variables

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random(); // set step variables

if (ie4up||ns6up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");

}

function snowIE_NS6() { // IE and NS6 main animation function

doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;

doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;

for (i = 0; i < no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] > doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

}

dx[i] += stx[i];

document.getElementById("dot"+i).style.top=yp[i]+"px";

document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";

}

snowtimer=setTimeout("snowIE_NS6()", 10);

}

function hidesnow(){

if (window.snowtimer) clearTimeout(snowtimer)

for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"

}

if (ie4up||ns6up){

snowIE_NS6();

if (hidesnowtime>0)

setTimeout("hidesnow()", hidesnowtime*1000)

}

</script>

</body>

</html>

Botón loco, botón de imprimir y texto que parpadea

Explicación:

Botón loco

El botón naranja situado bajo "Regular places" es imposible de clicar, ya que siempre que se deja el cursor sobre él, se desplaza

Botón de imprimir

Siendo realmente una imagen de una impresora la cual es clicable, manda la orden al pc de imprimir la página

Texto que parpadea

Aunque en la imagen no es apreciable, el texto de "Bienvenido" cambia de naranja a blanco constantemente

Ésta vez no adjuntaré los archivos sino que sólo colocaré el HTML

Código

<!DOCTYPE html>

<title>Inicio</title>

<!-- <script src="jquery.js"></script>

.art-content .art-postcontent-0 .layout-item-1 { padding-right: 10px;padding-left: 10px; }

.ie7 .post .layout-cell {border:none !important; padding:0 !important; }

.ie6 .post .layout-cell {border:none !important; padding:0 !important; }

</style>

a {

font-size: 24px;

color: #C00;

margin: 10px;

}

div#cajatexto {

background-color: #efefef;

padding: 10px;

margin: 10px;

}

div#cajatexto p {

padding: 0;

margin: 0 0 15px 0;

}

</style>

window.setInterval (BlinkIt, 500);

var color = "orange";

function BlinkIt () {

var blink = document.getElementById ("blink");

color = (color == "#ffffff")? "red" : "#ffffff";

blink.style.color = color;

blink.style.fontSize='36px';}

</script>

</head>

<a href="#">GoGreen</a>

</h1>

<h2 class="art-slogan" data-left="87.51%">Stay Green When You Travel</h2>

</div>

</header>

<ul class="art-hmenu"><li><a href="inicio.html" class="active">Inicio</a></li><li><a href="contacts.html">Contacts</a></li></ul>

</div>

</nav>

<h3 class="t">Reasons to Travel Green</h3>

</div>

<div class="art-blockcontent"><ol><li>In ante diam lacus eget rutrum ultricies ultricies. <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum. <a href="#">more</a></li><li>Vestibulum ipsum mi. Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc. <a href="#">more</a></li><li>Sem at pellentesque euismod justo. <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>

</div><div class="art-block clearfix">

<h3 class="t">Quick Links</h3>

</div>

<div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>

</div><div class="art-block clearfix">

<h3 class="t">Follow Us</h3>

</div>

</div><div class="art-block clearfix">

<h3 class="t">Photo Gallery</h3>

</div>

</div></div>

<div id="blink">Bienvenido</div><p><img width="300" height="200" alt="" src="images/shutterstock_3608177.jpg" style="float:left;"></p><p>Quis sem in tempus ligula mollis suscipit mi ante quam. Posuere phasellus et nec blandit primis sagittis amet rutrum nunc arcu metus quis tortor diam enim tincidunt. Nisi morbi ipsum ut quam mi non ante et cursus tincidunt sagittis. Urna leo bibendum odio erat.</p><p>Eget elit id donec metus ante eu et non a quisque leo orci dui eu. Platea sed eu vestibulum adipiscing in metus. Blandit curabitur praesent morbi in non auctor luctus. </p><p><a href="#" class="art-button">Read more</a><br><br><input type="image" src="print.png" onclick="window.print()"></p>

</div>

</div><div class="art-content-layout">

<h3>Popular Places</h3><span id="button1" style="position:relative;z-index:10"></span>

Uncatchable button script by Craig Casey (craig_c_11@hotmail.com)

Featured on JavaScript Kit (http://javascriptkit.com)

For this and over 400+ free scripts, visit http://javascriptkit.com

var btnbgcol="orange"

var fntcol="black"

var ok=(document.getElementById||document.all)?1:0

if (ok)

var cross_el=document.getElementById? document.getElementById("button1"):button1

/* Type your TEXT message below but DO NOT use double quotation marks, use

SINGLE quotation marks instead */

message = "Comparte en Facebook"

// No need to edit below this line

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes

function changeIt(){

if (!ok)

return

cross_el.innerHTML='<button style="background-color:'+btnbgcol+'" onmouseDown="moveIt();" onmouseOver="moveIt()">'+message+'</button>'

}

function setRandom(){

random1=Math.floor(Math.random()*301)

random2=Math.floor(Math.random()*401)

}

function moveIt(){

if (!ok)

return

setRandom()

cross_el.style.top=random1+'px'

cross_el.style.left=random2+'px'

if (document.all){

if (cross_el.offsetTop-standardbody.scrollTop>standardbody.clientHeight)

cross_el.style.top=random1*(-2/3)+'px'

}

else{

if (cross_el.offsetTop-window.pageYOffset>window.innerHeight)

cross_el.style.top=random1*(-2/3)+'px'

}

</script>

</div>

<h4>Fishing</h4><p><img width="100" height="99" alt="" src="images/001.jpg" style="float: left;"></p><p>Vivamus blandit ultricies et nisi vestibulum amet arcu quam semper. Dui pretium a est orci ac vitae commodo pellentesque. Vestibulum eros elit nascetur ligula orci in. Pulvinar posuere odio quis a. </p>

</div><div class="art-layout-cell layout-item-1" style="width: 34%" >

<h4>Hiking</h4><p><img width="100" height="99" alt="" src="images/002.jpg" style="float: left;"></p><p>Sapien praesent nunc egestas nec habitasse at eleifend nisl. Lacus nulla felis suscipit maecenas. Non fermentum quam sed. Mollis rutrum feugiat leo donec in malesuada sed congue id consectetuer a. Pellentesque pellentesque porta blandit nulla.</p>

</div><div class="art-layout-cell layout-item-1" style="width: 33%" >

<h4>More Activities</h4><p><img width="100" height="99" alt="" src="images/003.jpg" style="float: left;"></p><p>In tellus convallis ac aenean congue taciti. Ut eu nisl conubia faucibus enim nunc. Leo ut at eget curabitur justo curae pellentesque ligula nisi. Dictumst et condimentum hendrerit leo quis leo. Mauris interdum faucibus aenean hymenaeos sem.</p>

</div>

</div><div class="art-content-layout">

<a onclick="Effect.toggle('d1','slide'); return false;">Testimonials</a>

<div id="d1" style="display:none;"><p> Ligula urna aptent volutpat dui vel. Quis nisi nullam ac ut. Fringilla tincidunt et fermentum praesent malesuada etiam congue litora id. Ipsum ullamcorper placerat amet enim condimentum malesuada. Ultrices nunc maecenas ligula magna tincidunt.<br> Sit ultrices metus ut.<br><br> Neque orci adipiscing aliquet at arcu. Libero a aliquam cras porttitor morbi tempor nisl est porta. Lorem nunc nostra turpis dapibus sit netus hac. Curabitur ac a morbi tempus libero ac viverra.<br> Justo quis lorem arcu. </p>

</div>

</article></div>

</div>

<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>

<span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>

</p>

</div>

</footer>

</div>

</body></html>

Lightbox

Explicación:

Es un efecto bastante conocido que se basa en que, al hacer click en la imagen,aparecerá en grande en mitad de la pantalla con el fondo oscurecido

Código

<!DOCTYPE html>
	<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.0.0.58475 -->
	<meta charset="utf-8">
	<title>Inicio</title>
	<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<link rel="stylesheet" href="style.css" media="screen">
	<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
	<link rel="stylesheet" href="style.responsive.css" media="all">

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
	<script src="jquery.js"></script>
	<script src="script.js"></script>
	<script src="script.responsive.js"></script>
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	<meta name="description" content="Description">
	<meta name="keywords" content="Keywords">

	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/lightbox.js"></script>
	<link href="css/lightbox.css" rel="stylesheet" />



	<style>.art-content .art-postcontent-0 .layout-item-0 { border-top-width:1px;border-top-style:solid;border-top-color:#957941;margin-top: 5px;margin-bottom: 5px; }
	.art-content .art-postcontent-0 .layout-item-1 { padding-right: 10px;padding-left: 10px; }
	.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
	.ie6 .post .layout-cell {border:none !important; padding:0 !important; }

	</style></head>
	<body>
	<div id="art-main">
	<header class="art-header clearfix">


	<div class="art-shapes">
	<h1 class="art-headline" data-left="87.51%">
	<a href="#">GoGreen</a>
	</h1>
	<h2 class="art-slogan" data-left="87.51%">Stay Green When You Travel</h2>

	<div class="art-object0" data-left="0%"></div>
	<div class="art-textblock art-object557410578" data-left="100%">
	<div class="art-object557410578-text"></div>

	</div>
	</div>



	</header>
	<nav class="art-nav clearfix">
	<div class="art-nav-inner">
	<ul class="art-hmenu"><li><a href="inicio.html" class="active">Inicio</a></li><li><a href="contacts.html">Contacts</a></li></ul>
	</div>
	</nav>
	<div class="art-sheet clearfix">
	<div class="art-layout-wrapper clearfix">
	<div class="art-content-layout">
	<div class="art-content-layout-row">
	<div class="art-layout-cell art-sidebar1 clearfix"><div class="art-block clearfix">
	<div class="art-blockheader">
	<h3 class="t">Reasons to Travel Green</h3>
	</div>
	<div class="art-blockcontent"><ol><li>In ante diam lacus eget rutrum ultricies ultricies. <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum. <a href="#">more</a></li><li>Vestibulum ipsum mi. Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc. <a href="#">more</a></li><li>Sem at pellentesque euismod justo. <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
	</div><div class="art-block clearfix">
	<div class="art-blockheader">
	<h3 class="t">Quick Links</h3>
	</div>
	<div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
	</div><div class="art-block clearfix">
	<div class="art-blockheader">
	<h3 class="t">Follow Us</h3>
	</div>



	<div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
	</div><div class="art-block clearfix">
	<div class="art-blockheader">
	<h3 class="t">Photo Gallery</h3>
	</div>
	<div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
	</div></div>
	<div class="art-layout-cell art-content clearfix"><article class="art-post art-article">


	<div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
	<div class="art-content-layout-row">
	<div class="art-layout-cell layout-item-1" style="width: 100%" >
	<h3>Bienvenido</h3><p><a class="example-image-link" href="foto.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward." style="float:left;"><img class="example-image" src="foto.jpg" alt=""/></a> </p><p>Quis sem in tempus ligula mollis suscipit mi ante quam. Posuere phasellus et nec blandit primis sagittis amet rutrum nunc arcu metus quis tortor diam enim tincidunt. Nisi morbi ipsum ut quam mi non ante et cursus tincidunt sagittis. Urna leo bibendum odio erat.</p><p>Eget elit id donec metus ante eu et non a quisque leo orci dui eu. Platea sed eu vestibulum adipiscing in metus. Blandit curabitur praesent morbi in non auctor luctus. </p><p><a href="#" class="art-button">Read more</a></p>
	</div>
	</div>
	</div>
	<div class="art-content-layout-br layout-item-0">
	</div><div class="art-content-layout">
	<div class="art-content-layout-row">
	<div class="art-layout-cell layout-item-1" style="width: 100%" >
	<h3>Popular Places</h3>
	</div>
	</div>
	</div>
	<div class="art-content-layout">
	<div class="art-content-layout-row">
	<div class="art-layout-cell layout-item-1" style="width: 33%" >
	<h4>Fishing</h4><p><img width="100" height="99" alt="" src="images/001.jpg" style="float: left;"></p><p>Vivamus blandit ultricies et nisi vestibulum amet arcu quam semper. Dui pretium a est orci ac vitae commodo pellentesque. Vestibulum eros elit nascetur ligula orci in. Pulvinar posuere odio quis a. </p>
	</div><div class="art-layout-cell layout-item-1" style="width: 34%" >
	<h4>Hiking</h4><p><img width="100" height="99" alt="" src="images/002.jpg" style="float: left;"></p><p>Sapien praesent nunc egestas nec habitasse at eleifend nisl. Lacus nulla felis suscipit maecenas. Non fermentum quam sed. Mollis rutrum feugiat leo donec in malesuada sed congue id consectetuer a. Pellentesque pellentesque porta blandit nulla.</p>
	</div><div class="art-layout-cell layout-item-1" style="width: 33%" >
	<h4>More Activities</h4><p><img width="100" height="99" alt="" src="images/003.jpg" style="float: left;"></p><p>In tellus convallis ac aenean congue taciti. Ut eu nisl conubia faucibus enim nunc. Leo ut at eget curabitur justo curae pellentesque ligula nisi. Dictumst et condimentum hendrerit leo quis leo. Mauris interdum faucibus aenean hymenaeos sem.</p>
	</div>
	</div>
	</div>
	<div class="art-content-layout-br layout-item-0">
	</div><div class="art-content-layout">
	<div class="art-content-layout-row">
	<div class="art-layout-cell layout-item-1" style="width: 100%" >
	<h3>Testimonials</h3><blockquote> Ligula urna aptent volutpat dui vel. Quis nisi nullam ac ut. Fringilla tincidunt et fermentum praesent malesuada etiam congue litora id. Ipsum ullamcorper placerat amet enim condimentum malesuada. Ultrices nunc maecenas ligula magna tincidunt.<br> Sit ultrices metus ut.<br><br> Neque orci adipiscing aliquet at arcu. Libero a aliquam cras porttitor morbi tempor nisl est porta. Lorem nunc nostra turpis dapibus sit netus hac. Curabitur ac a morbi tempus libero ac viverra.<br> Justo quis lorem arcu. </blockquote>
	</div>
	</div>
	</div>
	</div>

	</article></div>
	</div>
	</div>
	</div>
	</div>
	<footer class="art-footer clearfix">
	<div class="art-footer-inner">
	<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">\|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
	<p class="art-page-footer">
	<span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
	</p>
	</div>
	</footer>

	</div>

	<a href="pez.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>


	</body></html>

Diario IFCD0110 Castro Urdiales

menu desplegable

viernes, 30 de enero de 2015

INTEGRACION DE JS EN PLANTILLAS

Efecto sexy, calendario y hojas cayendo

Código

Botón loco, botón de imprimir y texto que parpadea

Código

Lightbox

Código

analytics