Header

Código HTML

Estilos CSS

Su forma es de punta de flecha, ya que su cuerpo está comprimido lateralmente, sus aletas dorsal y ventral son del mismo tamaño, y su boca es estrecha y prominente.Es de color amarillo limón luminoso y, como todos los peces cirujanos, tiene 2 espinas extraíbles a cada lado de la aleta caudal; se supone que las usan para defenderse de otros peces.Alcanza los 25 cm. de largo. Vive solitario, por parejas y en grupos sueltos en lagunas y a lo largo de arrecifes exteriores. Suele ubicarse en las partes sombreadas de los arrecifes, entre los 2 y 40 metros de profundidad.

Estructura básica HTML5

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo sitio Responsive con Flexbox</title>
    <link href="css/estilos.css" rel="stylesheet">
</head>
<body>
    <main class="main>
        <header class="header"> Header </header>
        <article class="articulo> Contenido </article>
        <aside class="aside izquierda"> Izquierda </aside>
        <aside class="aside derecha"> Derecha </aside>
        <footer class="footer"> Footer </footer>
    </main>
</body>
</html>

Estilos CSS

.main{
	/*Caja flexible*/
	display:flex;
	/*Hijos uno al lado del otro*/
	flex-direction:row;
	/*Respeta el ancho de cada hijo y
	si no cabe salte a la siguiente linea*/
	flex-wrap:wrap;
	/*Centramos el texto*/
	text-align:center;
	/*Margen interno*/
	padding:10px;
}
/*Los hijos*/
.header, .articulo, .izquierda, .derecha, .footer{
	/*Abarca el 100%*/
	flex-grow:1;
	/*Tamaño inicial del contenedor hijo*/
	flex-basis:100%;
	/*Margen interno*/
	padding:10px;
}
/*Media para todos cuando tengan 600px*/
@media all and (min-width:600px){
	.aside{flex:1 1 auto;}
}
/*Media para todos cuando sean mayor a 800px*/
@media all and (min-width:800px){
	/*Tendrán el doble de ancho*/
	.articulo{flex:2 0;}
	/*Le asignamos el orden de la posición*/
	.izquierda{order:1;}
	.articulo{order:2;}
	.derecha{order:3;}
	.footer{order:4;}
}
Cerrar