README.md

Acerca de

Este proyecto de Landing Page está diseñado para la venta de un Curso Digital de Finanzas dirigido a emprendedores. La página es completamente responsive y utiliza Bootstrap 5 para facilitar el desarrollo y mejorar la experiencia del usuario en diferentes dispositivos.

Contenido - Carpetas y Archivos

• landing-page/ Carpeta principal que contiene todo el proyecto.
  • index.html: Archivo principal que contiene la estructura de la landing page.
  • css/: Carpeta que almacena los estilos CSS del proyecto.
    • estilos.css: Archivo principal de estilos CSS.
    • footer.css: Archivo de estilos CSS de parcial footer.html.
    • header.css: Archivo de estilos CSS de parcial header.html.
    • instructor.css: Archivo de estilos CSS de parcial instructor.html.
    • temario.css: Archivo de estilos CSS de parcial temario.html.
    • testimonios.css: Archivo de estilos CSS de parcial testimonios.html.
    • beneficios.css: Archivo de estilos CSS de parcial testimonios.html.
    • bootstrap.min.css: Archivo de estilos CSS de Bootstrap 5.
    • fontawesome.min.css: Archivo de estilos de Paquete de Fuentes y Estilos de Fontawesome.
    • media-queries.css: Archivo de estilos CSS Responsive Design.
  • fonts/: Almacena las fuentes utilizadas en el proyecto.
    • webfonts/: Carpeta con las fuentes web. Fontawesome.
  • js/: Carpeta que almacena los archivos JavaScript.
    • bootstrap.bundle.min.js: Archivo Javascript Bootstrap 5.
    • cargarImg.js: Archivo Javascript Carga Imagenes y Circulos de colores de Carousel.
    • cargarParciales.js: Archivo Javascript Carga de Parciales HTML.
    • formularioModal.js: Archivo Javascript Formulario Modal.
    • navbarScrolled.js: Archivo Javascript Navbar efecto Scroll Background-color.
    • validacionFormulario.js: Archivo Javascript Validacion campos Formulario Modal.
  • images/: Carpeta para imágenes y recursos multimedia.
    • capturas/: Carpeta con captura de imagen SVG de Landing Page Full Screen.
    • muestras/: Carpeta con imagenes de muestras y paleta de colores propuesta y usada en Landing Page. Extension SVG optimizadas SVGO.
    • optimizadas/: Carpeta con imagenes optimizadas con SVGO usadas en la Landing Page.
    • testing/: Carpeta con capturas de imagenes de Testeo en Mobile-
  • parciales/: Almacena archivos HTML parciales reutilizables.
    • header.html: Encabezado de la página.
    • footer.html: Pie de página.
    • beneficios.html: Seccion Beneficios HTML.
    • instructor.html: Seccion Instructor HTML.
    • temario.html: Seccion Temario HTML.
    • testimonios.html: Seccion Testimonios HTML.
  • LICENSE.md: Archivo que especifica los términos de la licencia del proyecto.
  • README.md: Este archivo que proporciona información sobre el proyecto.

Estructura del Proyecto

|-- landing-page
|   |-- src
|   |   |-- css
|   |   |   |-- beneficios.css
|   |   |   |-- bootstrap.min.css
|   |   |   |-- estilos.css
|   |   |   |-- fontawesome.min.css
|   |   |   |-- footer.css
|   |   |   |-- header.css
|   |   |   |-- instructor.css
|   |   |   |-- temario.css
|   |   |   |-- testimonio.css
|   |   |   |-- media-queries.css
|   |   |-- fonts
|   |   |   |-- webfonts
|   |   |-- images
|   |   |   |-- muestras
|   |   |   |   |-- muestra.svg
|   |   |   |   |-- muestra.svg
|   |   |   |   |-- muestra.svg
|   |   |   |   |-- muestra.svg
|   |   |   |   |-- paleta.svg
|   |   |   |   |-- paleta.svg
|   |   |   |   |-- paleta.svg
|   |   |   |   |-- paleta.svg
|   |   |   |-- optimizadas
|   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
!   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
!   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
|   |   |   |   |-- optimizado.svg
|   |   |   |-- capturas
|   |   |   |   |-- full_screen-landing.optimizado.svg
|   |   |   |-- testing
|   |   |   |   |-- 320.optimizado.svg
|   |   |   |   |-- 375.optimizado.svg
|   |   |   |   |-- 375.optimizado.svg
|   |   |   |   |-- 640.optimizado.svg
|   |   |   |   |-- 684.optimizado.svg
|   |   |   |   |-- 734.optimizado.svg
|   |   |   |   |-- 992.optimizado.svg
|   |   |   |   |-- 1024.optimizado.svg
|   |   |   |   |-- 1024.optimizado.svg
|   |   |   |   |-- 1024.optimizado.svg
|   |   |   |   |-- 1024.optimizado.svg
|   |   |   |   |-- 1024.optimizado.svg
|   |   |   |   |-- 1024.optimizado.svg
|   |   |   |   |-- 1201.optimizado.svg
|   |   |   |   |-- 1280.optimizado.svg
|   |   |-- js
|   |   |   |-- bootstrap.bundle.min.js
|   |   |   |-- cargarImg.js
|   |   |   |-- cargarParciales.js
|   |   |   |-- formularioModal.js
|   |   |   |-- navbarScrolled.js
|   |   |   |-- validacionFormulario.js
|   |   |-- parciales
|   |   |   |-- beneficios.html
|   |   |   |-- footer.html
|   |   |   |-- header.html
|   |   |   |-- instructor.html
|   |   |   |-- temario.html
|   |   |   |-- testimonios.html
|   |   |-- index.html
|-- LICENSE.md
|-- README.md

Nota sobre nombres de imágenes: Por cuestiones de brevedad, algunos nombres de imágenes en el acapite Estructura del Proyecto pueden estar incompletos. Se recomienda dirigirse a la carpeta images o ver item ## Capturas de Pantalla para obtener detalles específicos sobre cada imagen.

Fuentes Utilizadas

En este proyecto, se han utilizado las siguientes fuentes:

• Font Awesome: Conjunto de iconos vectoriales y logotipos, ampliamente utilizado para agregar iconografía a proyectos web.

  • Sitio web: Font Awesome

• Roboto: Fuente sans-serif diseñada por Google. Se ha utilizado para la tipografía en este proyecto.

  • Sitio web: Google Fonts - Roboto

Capturas de Pantalla

Capturas Landing Page Full Screen

1. 

Capturas Desktop y Mobile

| N° | Descripción | Enlace |

| 1 | 320px Full Pantalla Nokia Lumia+520 | | | 2 | 375px Muestra Formulario Modal en ese ancho IPhone Expensive Portrait | | | 3 | 375px IPhone Expensive Portrait | | | 4 | 640px Full Pantalla Microsoft Lumia 550 | | | 5 | 684px Iphone Expensive Landscape | | | 6 | 734px Iphone Expensive Landscape | | | 7 | 992px Full Pantalla con Formulrio Modal | | | 8 | 1024 x 768px Desktop Laptop | | | 9 | 1024 x 1366px Laptop N° 1 | | | 10 | 1024 x 1366px Laptop N° 2 | | | 11 | 1024 x 1366px Laptop N° 3 | | | 12 | 1024 x 1366px Laptop N° 4 | | | 13 | 1024 x 1366px Laptop N° 5 | | | 14 | 1201px Formulario Modal en ese ancho de pantalla | | | 15 | 1280x800px Desktop Laptop | |

Herramientas Test Mobile

• Responsinator: Utilizado para simular la visualización en varios dispositivos móviles.
• Responsive Test Tools: Herramienta adicional para simular y evaluar la capacidad de respuesta del diseño en diferentes tamaños de pantalla.
• Dev Tools Google Chrome: Utilizado para inspeccionar y ajustar la apariencia en el navegador Chrome.

Licencia

Este proyecto está bajo la Licencia (Versión Limitada) - ver el archivo LICENSE.md para más detalles.

Caracteristicas - Información Adicional

La Landing Page utiliza Bootstrap 5, HTML5, Javascript y SVGO para facilitar el diseño responsive. Se recomienda revisar y personalizar los estilos y contenidos según las necesidades específicas del curso digital y la audiencia objetivo. ¡Gracias por elegir este proyecto! ¡Buena suerte con la venta del Curso Digital de Finanzas para emprendedores! 🚀