Title: Actividad 11: Flexbox (diseño flexible)
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

🎯 Objetivo

Aplicar Flexbox para maquetar una página responsiva con encabezado, sección principal en dos columnas y una grilla de tarjetas que se reacomodan según el ancho de pantalla.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea index.html y styles.css. No modifiques la estructura HTML que se indica; tu trabajo principal será en el CSS.
3. Estructura HTML (copia en index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad Flexbox</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="header">
    <h1 class="logo">Mi Sitio</h1>
    <nav class="nav">
      <a href="#">Inicio</a>
      <a href="#">Servicios</a>
      <a href="#">Contacto</a>
    </nav>
  </header>

  <main class="main">
    <section class="col col-texto">
      <h2>Título de la sección</h2>
      <p>Contenido de ejemplo para practicar columnas con Flexbox.</p>
      <button class="btn">Acción</button>
    </section>
    <aside class="col col-aside">
      <h3>Panel lateral</h3>
      <p>Información adicional.</p>
    </aside>
  </main>

  <section class="cards">
    <article class="card">Card 1</article>
    <article class="card">Card 2</article>
    <article class="card">Card 3</article>
    <article class="card">Card 4</article>
  </section>

  <footer class="footer">
    <p>© 2025 Mi Sitio</p>
    <div class="redes">
      <a href="#">X</a>
      <a href="#">IG</a>
      <a href="#">YT</a>
    </div>
  </footer>
</body>
</html>


1. Requisitos de maquetación (en styles.css)

- Header: usar Flexbox para alinear .logo a la izquierda y .nav a la derecha, con elementos centrados verticalmente y separación entre enlaces.
- Main (dos columnas): convertir .main en contenedor flex con dos columnas (.col-texto y .col-aside). La columna de texto debe tener el doble de ancho que el aside (p. ej., proporción 2:1).
- Cards responsivas: .cards debe ser contenedor flex con flex-wrap y gap. Las .card deben acomodarse así:
  - Escritorio: 4 por fila
  - Mediano: 2 por fila
  - Móvil: 1 por fila
- Orden en móvil: en pantallas pequeñas, el aside debe mostrarse debajo del texto (usa order o cambia la dirección de flex).
- Alineación individual: aplica align-self a una tarjeta para que se alinee distinto al resto (solo para observar el efecto).
- Estilos mínimos: agrega padding razonable, tipografía legible y colores suaves para distinguir secciones.

1. Responsivo (sugerencia)

- Agrega una media query a max-width: 768px para:
  - Convertir main a columna.
  - Ajustar el tamaño base de .card para 1 por fila.
  - Aplicar el order del aside.

📁 Evidencia

Un solo PDF que incluya:

- El contenido completo de tu styles.css.
- Una captura del sitio en escritorio y otra en móvil mostrando los cambios de layout.
- Al inicio del PDF, tu nombre y el nombre del profesor.

📤 Método de entrega

Sube tu PDF a la plataforma.

🎯 Objetivo

Aplicar Flexbox para maquetar una página responsiva con encabezado, sección principal en dos columnas y una grilla de tarjetas que se reacomodan según el ancho de pantalla.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea index.html y styles.css. No modifiques la estructura HTML que se indica; tu trabajo principal será en el CSS.
3. Estructura HTML (copia en index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad Flexbox</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="header">
    <h1 class="logo">Mi Sitio</h1>
    <nav class="nav">
      <a href="#">Inicio</a>
      <a href="#">Servicios</a>
      <a href="#">Contacto</a>
    </nav>
  </header>

  <main class="main">
    <section class="col col-texto">
      <h2>Título de la sección</h2>
      <p>Contenido de ejemplo para practicar columnas con Flexbox.</p>
      <button class="btn">Acción</button>
    </section>
    <aside class="col col-aside">
      <h3>Panel lateral</h3>
      <p>Información adicional.</p>
    </aside>
  </main>

  <section class="cards">
    <article class="card">Card 1</article>
    <article class="card">Card 2</article>
    <article class="card">Card 3</article>
    <article class="card">Card 4</article>
  </section>

  <footer class="footer">
    <p>© 2025 Mi Sitio</p>
    <div class="redes">
      <a href="#">X</a>
      <a href="#">IG</a>
      <a href="#">YT</a>
    </div>
  </footer>
</body>
</html>


1. Requisitos de maquetación (en styles.css)

- Header: usar Flexbox para alinear .logo a la izquierda y .nav a la derecha, con elementos centrados verticalmente y separación entre enlaces.
- Main (dos columnas): convertir .main en contenedor flex con dos columnas (.col-texto y .col-aside). La columna de texto debe tener el doble de ancho que el aside (p. ej., proporción 2:1).
- Cards responsivas: .cards debe ser contenedor flex con flex-wrap y gap. Las .card deben acomodarse así:
  - Escritorio: 4 por fila
  - Mediano: 2 por fila
  - Móvil: 1 por fila
- Orden en móvil: en pantallas pequeñas, el aside debe mostrarse debajo del texto (usa order o cambia la dirección de flex).
- Alineación individual: aplica align-self a una tarjeta para que se alinee distinto al resto (solo para observar el efecto).
- Estilos mínimos: agrega padding razonable, tipografía legible y colores suaves para distinguir secciones.

1. Responsivo (sugerencia)

- Agrega una media query a max-width: 768px para:
  - Convertir main a columna.
  - Ajustar el tamaño base de .card para 1 por fila.
  - Aplicar el order del aside.

📁 Evidencia

Un solo PDF que incluya:

- El contenido completo de tu styles.css.
- Una captura del sitio en escritorio y otra en móvil mostrando los cambios de layout.
- Al inicio del PDF, tu nombre y el nombre del profesor.

📤 Método de entrega

Sube tu PDF a la plataforma.