0% encontró este documento útil (0 votos)
0 vistas2 páginas2
El documento presenta un estilo CSS que establece un diseño básico para una página web, incluyendo un reset de márgenes y un contenedor centrado. Define estilos específicos para el encabezado, artículo, navegación y pie de página, con colores y dimensiones específicas. La estructura se organiza en secciones flexibles para una mejor visualización en pantalla.
Cargado por
javiermireya43Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
0 vistas2 páginas2
El documento presenta un estilo CSS que establece un diseño básico para una página web, incluyendo un reset de márgenes y un contenedor centrado. Define estilos específicos para el encabezado, artículo, navegación y pie de página, con colores y dimensiones específicas. La estructura se organiza en secciones flexibles para una mejor visualización en pantalla.
Cargado por
javiermireya43Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
/* Reset básico para eliminar márgenes del navegador */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centra la maqueta en la pantalla para visualizarla mejor */
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: aqua;
}
/* Contenedor general fijado a 700px de ancho */
.contenedor-principal {
width: 700px;
}
/* Estilos comunes para centrar el texto dentro de los bloques */
header, article, nav, footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
/* Encabezado: 700px x 150px */
header {
width: 700px;
height: 150px;
background-color: #5566a5; /* Azul/Morado */
color: #b0bedc;
}
/* Fila intermedia que contiene el artículo y la navegación */
.seccion-media {
display: flex;
width: 700px;
height: 340px;
}
/* Artículo: 450px x 340px */
article {
width: 450px;
height: 340px;
background-color: #dfb4a4; /* Rosa/Beige */
color: #92756a;
}
/* Navegación: 250px x 340px */
nav {
width: 250px;
height: 340px;
background-color: #6da36f; /* Verde */
color: #3b5f3c;
}
/* Pie de página: 700px x 95px */
footer {
width: 700px;
height: 95px;
background-color: #5566a5; /* Mismo Azul/Morado */
color: #b0bedc;
}