Creo miniproyecto grid4
Aquí está el diseño completo para un dashboard moderno, asegurando que sea funcional y adaptable tanto en dispositivos grandes como pequeños:
La idea es quitar el viewport para que se aprecie en celular
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Moderno</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"sidebar charts charts"
"footer footer footer";
grid-template-rows: 80px auto auto 50px;
grid-template-columns: 200px 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #f4f7fa;
height: 100vh;
}
div {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.2em;
font-weight: bold;
border-radius: 8px;
}
header {
grid-area: header;
background-color: #3b82f6;
}
.sidebar {
grid-area: sidebar;
background-color: #1e293b;
}
.main {
grid-area: main;
background-color: #22c55e;
}
.charts {
grid-area: charts;
background-color: #f97316;
}
footer {
grid-area: footer;
background-color: #64748b;
}
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"main"
"charts"
"sidebar"
"footer";
grid-template-rows: 80px auto auto auto 50px;
grid-template-columns: 1fr;
}
.sidebar {
order: 3; /* Mueve la barra lateral después de las secciones principales */
}
}
</style>
</head>
<body>
<header>Encabezado</header>
<div class="sidebar">Barra Lateral</div>
<div class="main">Contenido Principal</div>
<div class="charts">Gráficos</div>
<footer>Pie de Página</footer>
</body>
</html>
Descripción del diseño:
1. Estructura del dashboard:
Encabezado: En la parte superior ocupando el ancho completo.
Barra lateral: A la izquierda, fija en tamaño (200px).
Contenido principal: Al centro, ocupando dos columnas.
Gráficos: Debajo del contenido principal, también ocupando dos columnas.
Pie de página: En la parte inferior, cubriendo el ancho completo.
2. Colores modernos:
Azul (#3b82f6) para el encabezado.
Verde (#22c55e) para el contenido principal.
Naranja (#f97316) para gráficos.
Gris oscuro (#1e293b) para la barra lateral.
Gris claro (#64748b) para el pie de página.
3. Adaptación para móviles:
En pantallas pequeñas, el diseño se reorganiza en una sola columna.
La barra lateral se desplaza hacia abajo después del contenido y gráficos.
Ventajas:
Diseño limpio y moderno.
Adaptabilidad asegurada para cualquier dispositivo.
Organización clara de las áreas principales del dashboard.
¿Algo más que te gustaría ajustar?
Comentarios
Publicar un comentario