Document

Artículo 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero dolore fugiat quam, molestias minus quo maiores ut ipsa magni, debitis, harum distinctio odit aperiam? Nobis labore a consequuntur animi.

Artículo 2

Css de esta página

/* Aplica un reset de margen y padding a todos los elementos */
* {
margin: 0px;
padding: 0px;
}

/* Estilo del cuerpo del documento */
body {
background: lightgray; /* Fondo gris claro */
font-family: Arial, Helvetica, sans-serif; /* Fuente tipográfica */
}

/* Estilo del contenedor principal */
#container {
width: 70%; /* Ancho del 70% del contenedor principal */
border: 1px solid black; /* Borde sólido negro */
margin: auto; /* Centrar el contenedor */
}

/* Estilo del encabezado */
header {
background: red; /* Fondo rojo */
height: 100px; /* Altura de 100px */
width: 100%; /* Ancho completo */
margin: 0px; /* Sin margen */
text-align: center; /* Centrar el texto */
line-height: 100px; /* Alinear verticalmente el texto */
color: white; /* Color del texto blanco */
border-bottom: 3px dashed black; /* Borde inferior discontinuo negro */
}

/* Estilo de la barra de navegación */
nav {
background: lightblue; /* Fondo azul claro */
height: 50px; /* Altura de 50px */
border-bottom: 1px solid black; /* Borde inferior sólido negro */
}

/* Estilo de los elementos de la lista de navegación */
nav ul li {
float: left; /* Flotar a la izquierda */
list-style: none; /* Sin estilo de lista */
margin: 10px; /* Margen de 10px */
line-height: 30px; /* Altura de línea de 30px */
}

/* Utilizado para limpiar flotantes */
.clearfix {
clear: both; /* Limpiar ambos lados flotantes */
}

/* Estilo del contenido principal */
#content {
float: left; /* Flotar a la izquierda */
width: 73%; /* Ancho del 73% */
background: green; /* Fondo verde */
min-height: 500px; /* Altura mínima de 500px */
padding-top: 10px; /* Espaciado superior de 10px */
padding-bottom: 10px; /* Espaciado inferior de 10px */
}

/* Estilo de los artículos */
.article {
color: white; /* Color del texto blanco */
margin-top: 15px; /* Margen superior de 15px */
margin-bottom: 15px; /* Margen inferior de 15px */
padding-bottom: 10px; /* Espaciado inferior de 10px */
border-bottom: 1px solid #eee; /* Borde inferior sólido gris claro */
}

/* Estilo del primer artículo */
.article:first-child {
border-top: 1px solid #eee; /* Borde superior sólido gris claro */
padding-top: 10px; /* Espaciado superior de 10px */
}

/* Estilo de los encabezados de los artículos */
.article h2 {
font-size: 1.5em; /* Tamaño de fuente de 1.5em */
}

/* Estilo del contenido adicional */
aside {
float: left; /* Flotar a la izquierda */
width: calc(27% - 20px); /* Ancho del 27% menos 20px */
background: orange; /* Fondo naranja */
min-height: 500px; /* Altura mínima de 500px */
padding: 10px; /* Espaciado de 10px */
}

/* Estilo del pie de página */
footer {
background: black; /* Fondo negro */
color: white; /* Color del texto blanco */
text-align: center; /* Centrar el texto */
height: 50px; /* Altura de 50px */
line-height: 50px; /* Alinear verticalmente el texto */
}