/Travel-landpage-01

A sample of a travel landpage

Primary LanguageHTML

Proyecto Viajes Chile✈.

Información general:

  • Esta página corresponde al trabajo final del curso Fundamentos de desarrollo Front-end, parte del bootcamp Desarrollo Full stack con Python de Edutecno 2021. Las instrucciones generales fueron proporcionadas por dicha institución.
  • Se utilza fuentes de Google Fonts.
  • Apoyo de diseño con Bootstrap 5.1.3.
  • Íconos extraídos de Font Awesome 5.15.4.
  • Página optimizada para viewports pequeños (<760 px) y grandes (>1000 px).

Hoja de estilos local CSS:

  • Colores: #000000 #000000, #ffffff #FFFFFF y #0DCAF0 #0DCAF0.
  • Fuente: 'Lato', anchuras 300 y 400.
  • Otros: se detuvo la propiedad scroll-behavior: smooth; que por defecto trae Bootstrap; se agrega la propiedad cursor: pointer; a la imagen dentro de la ventana del elemento Modal para simular un botón.

Script local JavaScrip con elementos JQuery:

  • Se ajustó la velocidad de la animación scroll smooth.
  • En una determinada coordinada Y se realizan cambios en el Navbar para que las letras no se pierdan en las secciones, dado su background transparente.

Componentes de Bootstrap CSS:

  • Se mejora la responsividad al cambio de viewports con un amplio uso de la Grid para manejo de Columns en las secciones #Quienes-somos, #Destacados y <footer>.
  • La sección <nav> presenta un elemento Navbar, con su respectiva adaptación responsiva para viewports pequeños.
  • En la sección #Destacados se usó elementos Cards para mostrar destinos turísticos relevantes.
  • La sección #Contacto muestra un elemento Form sencillo, pero eficiente.

Componentes de Bootstrap JavaScript:

  • La sección <header> tiene un elemento Carousel con algunas fotografías de destinos turísticos.
  • En el formulario de la sección #Contacto se instaló un Modal, el cual se activa al pulsar el botón Enviar.

Control de versiones:

  • Control de versiones con GIT 2.34.1.
  • El repositorio fue almacenado en GitHub.
  • El resultado puede ser revisado aquí.