Plantilla de inicio responsive diseñada con HTML y CSS usando Flexbox

financio · 11 Mayo 2025

Aquí tienes un ejemplo de una página de inicio (front page) responsive que incluye un menú en la parte superior, una sección de contenido principal con 3 columnas y un pie de página. La estructura está diseñada con HTML y CSS usando Flexbox para asegurar que sea responsive.

Code:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Front Page Responsive</title>
  <style>
    /* Reset básico */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Menú superior */
    nav {
      background-color: #333;
      padding: 1rem;
    }

    nav ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    nav ul li {
      margin: 0 1rem;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 0.5rem 1rem;
      transition: background 0.3s;
    }

    nav ul li a:hover {
      background-color: #555;
      border-radius: 4px;
    }

    /* Contenido principal con 3 columnas */
    .page-content {
      flex: 1;
      padding: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .column {
      flex: 1 1 30%;
      background-color: #f4f4f4;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      min-width: 200px;
    }

    /* Pie de página */
    footer {
      background-color: #222;
      color: #fff;
      text-align: center;
      padding: 1rem;
    }

    /* Media queries para mejor responsividad */
    @media (max-width: 768px) {
      nav ul {
        flex-direction: column;
        align-items: center;
      }

      nav ul li {
        margin: 0.5rem 0;
      }

      .page-content {
        flex-direction: column;
      }

      .column {
        flex: 1 1 100%;
      }
    }
  </style>
</head>
<body>
  <!-- Menú superior -->
  <nav>
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Nosotros</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>

  <!-- Contenido principal con 3 columnas -->
  <section class="page-content">
    <div class="column">
      <h2>Columna 1</h2>
      <p>Contenido de la columna uno. Aquí puedes poner información relevante o destacados.</p>
    </div>
    <div class="column">
      <h2>Columna 2</h2>
      <p>Contenido de la columna dos. Agrega detalles, imágenes o enlaces importantes.</p>
    </div>
    <div class="column">
      <h2>Columna 3</h2>
      <p>Contenido de la columna tres. Incluye cualquier contenido adicional que desees mostrar.</p>
    </div>
  </section>

  <!-- Pie de página -->
  <footer>
    <p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

¿Qué hace este código?

Tiene un menú en la parte superior con enlaces horizontales que se adaptan en pantallas pequeñas a una columna.
La sección .page-content contiene tres columnas que se ajustan automáticamente en pantallas pequeñas para mantenerse legibles y bien distribuidas.
El pie de página se mantiene en la parte inferior y centrado, con un fondo oscuro y texto blanco.

Puedes personalizar los colores, textos y enlaces según tus necesidades. ¡Es totalmente responsive y funcional en cualquier dispositivo!

Plantilla de inicio responsive diseñada con HTML y CSS usando Flexbox

financio

Nuevo

Nuevos temas