🎨 Ejercicio intermedio: Crea una Landing Page para un producto ficticio

• Tomas Gonzalez
• 08 Abr 2025

🎨 Ejercicio intermedio: Crea una Landing Page para un producto ficticio

¡Genial! Aquí tienes otro ejercicio de nivel medio, diferente al anterior, ideal para seguir subiendo el nivel de tus alumnos. Esta vez enfocamos en crear una landing page simple para un producto o servicio, usando estructuras modernas y elementos HTML variados.

Hoy vas a diseñar una landing page (página de aterrizaje) para promocionar un producto imaginario: puede ser un software, un gadget, un curso, lo que tú quieras. Lo importante es que practiques estructuras más avanzadas, etiquetas multimedia y formularios más detallados.

---

🛠 Objetivo

Crear un archivo llamado landing_producto.html que incluya:

---

🧱 1. Estructura semántica completa

Debes usar:

• <header> con el título del producto
• <nav> con enlaces a secciones de la página
• <main> dividido en varias <section>
• <footer> con información de contacto

---

✨ 2. Cabecera llamativa

Dentro de <header>:

<h1>Nombre del producto</h1>
<p>¡El futuro ha llegado! Descubre todo lo que este producto puede hacer por ti.</p>

Agrega una imagen destacada usando <img>.

---

🔗 3. Menú de navegación

Dentro del <nav>, crea un menú con enlaces a:

• Características (#caracteristicas)
• Testimonios (#testimonios)
• Precios (#precios)
• Contacto (#contacto)

Usa <ul> con <li> y <a>.

---

💡 4. Sección de características

Con <section id="caracteristicas">, presenta al menos 3 características usando listas o tarjetas (puedes usar <article> para cada una).

Ejemplo:

<article>
  <h3>Ultra rápido</h3>
  <p>Procesamiento en tiempo real sin esperas.</p>
</article>

---

👥 5. Sección de testimonios

Dentro de <section id="testimonios">, incluye 2 o 3 testimonios falsos en formato de citas con <blockquote>.

<blockquote>
  “Este producto cambió mi vida.”
  <footer>– Ana Gómez</footer>
</blockquote>

---

💸 6. Tabla de precios

Crea una tabla dentro de <section id="precios"> con al menos 3 planes:

<table border="1">
  <tr>
    <th>Plan</th>
    <th>Precio</th>
    <th>Incluye</th>
  </tr>
  <tr>
    <td>Básico</td>
    <td>9.99€/mes</td>
    <td>1 usuario, actualizaciones</td>
  </tr>
  <!-- Añade más filas -->
</table>

---

📬 7. Formulario de contacto

Crea un <form> dentro de <section id="contacto"> que incluya:

• Nombre
• Email
• Selección de plan
• Casilla de aceptación de términos
• Botón de envío

Usa input, select y checkbox.

---

🧠 Reto adicional

• Añade un video de YouTube con <iframe>.
• Usa <progress> o <meter> para mostrar el porcentaje de satisfacción de usuarios.
• Coloca una etiqueta <aside> con una promo especial limitada.

---

🎯 Resultado final

Debe parecer una página atractiva, bien organizada y funcional. No es necesario aplicar CSS aún, pero puedes usar estilos inline para mejorar la presentación.

---

✅ ¿Qué practicas en este ejercicio?

• Uso avanzado de etiquetas HTML
• Organización del contenido por secciones
• Creación de tablas y formularios reales
• Estructura lógica tipo landing page