Código HTML:
Ver original<!DOCTYPE html>
/*
R E S E T (Por Eric Meyer)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: top; background: transparent;}
body { line-height: 1;}
ol, ul { list-style: circle;}
blockquote, q { quotes: none;}
:focus { outline: 0;}
ins { text-decoration: none;}
del { text-decoration: line-through;}
table { border-collapse: collapse; border-spacing: 0; }
a img { border:none; }
a { text-decoration: none;}
* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/*
C L A S E S P R E S E N T A C I O N A L E S
*/
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left; }
.alignright { float: right;}
.clear:after { clear:both;
display:block;
height:0px;
visibility: hidden;
content: ".";}
/* Estructura */
#contenedor {
margin: 0 auto;
width:80%;
}
header {
background-color: #EFDBEF;
overflow: hidden;
padding: 10px 30px 10px 30px;
min-width: 290px;
}
a img { float:left; }
/* contenido medio */
#contenido-tras-cabecera {
margin-top: 20px;
min-width: 290px;
overflow: hidden;
}
footer {
background-color: #EFDBEF;
min-width: 290px;
overflow: hidden;
padding:30px 10px 5px 10px;
}
/* --------a partir de aqui se ajusta la pagina al cambiar la resolucion --------*/
@media screen and (max-width:720px) {
ul li { display: block;
padding-right: 50%;
}
.derechos-reservados {
float: left;
max-width:220px;
padding-left: 18px;
}
.imagen-footer-logo {
width:100%;
max-width: 200px;
float: left;
display: block;
margin-right: 80px;
padding-bottom: 5px;
padding-left: 22px;
}
.ajustar-nav {
float:left;
margin-right: 90px;
}
p.floristeria {
color:#1FA715;
font-size: 2.2em;
float: left;
clear: both;
} }
/* ---------aqui acaba el ajuste de media -----------------*/
/* menu de navegacion */
ul {
margin-top: 10px;
font-family: Georgia;
font-size: 1.0em;
color: #990066;
float:right;
clear: right;
list-style-type: circle;
}
li { display: inline;
list-style: circle; }
/* Tipografia y colores */
h1 {
font-size: 1.1em;
padding-left: 10px;
line-height: 22px;
margin-top: -20px;
display: block;
color: #4A4A4A;
font-family: arial, helvetica sans-serif;
}
.floristeria {
color:#1FA715;
font-size: 2.2em;
float: right;
padding-right: 30px;
padding-top: 10px;
}
P.texto-inicio {
font-size: 0.9em;
padding: 10px;
line-height: 22px;
font-family: arial, helvetica sans-serif;
color: #656565;
}
/* parte media */
.imagen-inicio{
float:left;
width: 100%;
max-width:500px;
}
/* footer */
.imagen-footer-logo {
width:100%;
max-width: 200px;
float: left;
display: block;
}
.imagen-footer-face {
float: right;
display: block;
padding-top: 5px;
clear: left;
}
cite {
text-align: center;
display: block;
margin: 0 auto;
max-width:600px;
color: white;
padding-top: 10px;
padding-left: 20px;
clear:right;
}
.cajavacia {
height:50px;
}
<a href="http://www.flowerpower.es"> <img src="imagenes/logo2.png" alt="imagen" /> </a> <p class="floristeria">FLORISTERIA
<br> <span style=" font-size: 0.4em; color:#1FA715;">DISEÑO Y ARTE FLORAL
<li><a href="http://www.flowerpower.es">Inicio
</a></li> <li><a href="http://www.flowerpower.es">-Quienes Somos
</a></li> <li><a href="http://www.flowerpower.es">-Servicios
</a></li> <li><a href="http://www.flowerpower.es">-Trabajos
</a></li> <li><a href="http://www.flowerpower.es">-Noticias
</a></li> <li><a href="http://www.flowerpower.es">-Contacto
</a></li>
<div id="contenido-tras-cabecera"> <img class="imagen-inicio" src="imagenes/ramo1.jpg" /> <h1> </br> </br>Bienvenidos a la web de Floristeria Flower Power
</h1>
Desde 1995 nos dedicamos a prestar un esmerado servicio de floristería en general.
Le atenderemos como usted se merece, por profesionales debidamente cualificados y diplomados,
con una amplia experiencia en el sector. Nosotros somos una floristería con comprobada y larga trayectoria,
siempre a la vanguardia en los aspectos más novedosos y modernos, nos preocupamos día a día a contribuir al
logro de sus deseos, ofreciendo un buen servicio, a un costo razonable y a una calidad insuperable.
Esperamos que tu visita sirva para que conozcas mejor nuestra Floristería.
<a href="servicios.html"> Pinche aqui para saber mas sobre nuestros servicios ->
</a>
<a href="http://www.flowerpower.es"> <img class="imagen-footer-logo" src="imagenes/logo.png" alt="imagen" /> </a>
<cite class="derechos-reservados"> All content ©2014 Flower Power | Todos los derechos reservados
Web por IZ@N
<a href="http://www.flowerpower.es"> <img class="imagen-footer-face" src="imagenes/logo-facebook.png" alt="imagen" /> </a>
</div> <!-- cierre de div container -->