carismaomi new document title

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title>HTML Test</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">#demoBG { /* el rectángulo */ margin: 20px auto; width: 600px;}#demoBG h1, #demoBG h2 { /* los títulos */ border-bottom: 10px solid rgba(0, 0, 0, 0.1); border-top: 10px solid rgba(0, 0, 0, 0.1); position: relative;}#demoBG h1 span, #demoBG h2 span { /* los textos */ display: block; position: relative;}
#demoBG h1 { /* el título superior */ background: #FFF; margin: 0; position: relative; text-align: center; z-index: 200; /* lo rotamos en los diferentes navegadores */ -moz-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -o-transform: rotate(-4deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=0.0697564737441253, M21=-0.0697564737441253, M22=0.9975640502598242);}#demoBG h1 span { /* el texto en si mismo */ color: CornflowerBlue; font-family: Garamond; font-size: 100px; line-height: 100px; text-transform: uppercase;}
#demoBG h2 { /* el título inferior */ background: DarkRed; margin: 0; z-index: 100; /* lo rotamos en los diferentes navegadores */ -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); -o-transform: rotate(2deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958); }#demoBG h2 span { /* el texto en si mismo */ color: Tomato; font-family: Comic Sans MS; font-size: 50px; line-height: 90px; text-align: center;}
#demoBG:hover > h1 { /* efecto hover sobre el título superior */ -moz-transform: rotate(4deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242); }#demoBG:hover > h2 { /* efecto hover sobre el título inferior */ -moz-transform: rotate(-2deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958); }/* FOOTER TOOLS : Todas las definiciones de estilo van acá */
/* este es el DIV inferior con la barra visible */#footertools-barra {background: transparent url(URL_unaimagen) repeat-x left top; /* un fondo de color o una imagen optativa */bottom: 0; /* esto lo fuerza a ubicarse en la parte inferior de la pantalla */right: 0; /* y que se extienda de lado a lado */height: 50px; /* es la altura que puede ser cualquiera y depende de los íconos a usar */margin: 0 auto; /* su contenido se centrará */padding: 0; /* eliminamos cualquier relleno para que la altura sea exacta */position: fixed; /* lo fijamos para que no se mueva y permanezca siempre visible */}/* el ancho lo pondremos por separado, en una clase para poder minimizar esa barra */.footertools-barra-max { /* desplegada, ocupará todo el ancho de la pantalla */width: 100%;}.footertools-barra-min { /* contraida ocupará sólo el ancho de un ícono */-moz-border-radius-bottomleft: 5px;-moz-border-radius-topleft: 5px;width: 60px;}
/* este es el DIV interior de esa barra */#footertools-barra-inner {height: 50px; /* tendrá el mismo alto */margin: 0 auto; /* su contenido estará centrado */width: 920px; /* y le daremos un ancho que dependerá de la cantidad de cosas que pongamos */}
/* estas son las propiedades generales de los gadgets que agregaremos luego */#footertools-barra .widget { /* cada elemento agregado */float: left; /* se verán uno lado del otro */height: 50px; /* la altura es siempre la misma */margin: 0 5px; /* los separamos un poco uno del otro */}#footertools-barra h2 { /* y ocultaremos los títulos */display:none; }
/* este es el DIV superior con el contenido oculto */#footertools-contenedor {bottom: 55px; /* se mostrarán arriba de la barra, separado un poco de esta */right: 0;margin: 0 auto; /* tambien lo centramos */position: fixed; /* y lo fijamos en la pantalla */text-align: left;width: 100%; /* y le damos todo el ancho disponible */}
/* estas son las propiedades generales de los gadgets que agregaremos luego */#footertools-contenedor .widget {-moz-border-radius: 10px;background-color: #E4E4E4;border: 2px solid #000000;margin: 0 auto; /* siempre se mostrarán centrados en la pantalla */padding: 10px;}#footertools-contenedor h2 { /* y los títulos de esos widgets ocultos */border-bottom: 1px dotted #999;color: #BB0000;font-family: Tahoma;font-size: 17px;font-weight: normal;letter-spacing: -.01em;line-height: 24px;margin: 0;text-align: right;}.spotlightmenu{width: 100%;overflow:hidden;}
.spotlightmenu ul{margin: 0;padding: 0;font: bold 14px Verdana; /* Fuente - Tamaño y estilo */list-style-type: none;text-align: center; /* Alineación "left", "center", o "right" */}
.spotlightmenu li{display: inline-block;position:relative;padding: 5px;margin: 0;margin-right: 5px;}
.spotlightmenu li a{display:inline-block;padding: 5px; /*Margen interna del efecto*/min-width:50px; /*Ancho del efecto*/height:50px; /*Altura del efecto*/text-decoration: none;color: black; /*Color del título base*/margin: 0 auto; /* Espacio entre los títulos en px se quitaría auto */overflow:hidden;-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.spotlightmenu li:hover a{color: white; /* Color del título resaltado */background: #a71b15; /* Color de fondo del efecto */-webkit-border-radius: 50%; /* Medida en porcentaje del borde circular */-moz-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;}
.spotlightmenu li a span{position:relative;top:35%; /* Mover el texto del menú hacia arriba para centrarlo si se necesitara */}
</style>

</head>
<body>

<div id="demoBG"> <h1><span>header</span></h1> <h2><span>dando vueltas y vueltas</span></h2></div>
<div class='footertools-barra-max' id='footertools-barra'><b:section id='footertools-barra-inner' /></div><div class="spotlightmenu"><ul><li><a href="http://geocities.ws/carismaomi/mercaba.html"><span>Mercaba</span></a></li><li><a href="http://www.geocities.ws/carismaomi/casasoblatas/teverga.html"><span>Casas</span></a></li><li><a href="URL del enlace o Página"><span>Título</span></a></li><li><a href="URL del enlace o Página"><span>Título</span></a></li></ul></div><p>This following is a menu list.</p><menu> <li>This is the first list item.</li> <li>This is the second list item.</li> <li>This is the third list item.</li></menu><h4>Presentamos una div dentro, (incrustada) en otra div.</h4><div style="padding: 10px; border-radius: 5px; position:relative;background-color:green;width:300px;margin:0 auto;height:150px; color: white;">pero sobre todo pensamientos, reflexiones, a vuela maquina; <div style="padding: 12px; position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;">Presentamos un modelo de caja en el que podemos colocar cualquier texto </div></div>

</body></html>