Skip to content

Instantly share code, notes, and snippets.

@Heipry
Created February 14, 2025 11:37
Show Gist options
  • Save Heipry/5be3af9345b50f086bbcdcb3a6b6766c to your computer and use it in GitHub Desktop.
Save Heipry/5be3af9345b50f086bbcdcb3a6b6766c to your computer and use it in GitHub Desktop.

Mapa del Sitio: Parque Natural

1. Landing Page (index.html)

  • Encabezado
    • Nombre del parque.
    • Eslogan motivador.
  • Menú de Navegación
    • Inicio (/index.html)
    • Rutas (/rutas.html)
    • Fauna (/fauna.html)
    • Reservas (#reservas)
    • Contacto (#contacto)
  • Cuerpo Principal
    • Introducción al Parque Natural.
    • Botón de Call to Action (CTA) para reservas (#reservas).
  • Formulario de Reservas
    • Campos: Nombre, correo electrónico, fecha de visita.
    • Botón de envío.
  • Pie de Página
    • Información de contacto.
    • Mapa interactivo de Google Maps.

2. Página de Rutas (rutas.html)

  • Encabezado
    • Menú de navegación (igual que la landing page).
  • Sección de Rutas
    • Lista de rutas con descripción, distancia y nivel de dificultad.
    • Fotografías representativas de cada ruta.
    • Botón de "Reservar" vinculado al formulario de reservas en la landing page.
  • Pie de Página
    • Información de contacto.

3. Página de Fauna (fauna.html)

  • Encabezado
    • Menú de navegación (igual que la landing page).
  • Sección de Fauna
    • Lista de especies destacadas con descripciones y fotografías.
    • Botón de navegación para regresar a la página principal.
  • Pie de Página
    • Información de contacto.

Flujo de Navegación

  1. Landing Page (index.html): Introducción al parque, con enlaces al formulario de reservas y otras páginas.
  2. Rutas (rutas.html): Información detallada sobre las rutas, con un enlace al formulario de reservas.
  3. Fauna (fauna.html): Información sobre especies destacadas, con navegación de regreso a la landing page.
  4. Reservas (#reservas): Disponible en la landing page, accesible desde todas las páginas a través del menú de navegación.
  5. Contacto (#contacto): Disponible en el pie de página de la landing page.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment