(En VS Code, se recomienda la extensión Office Viewer(Markdown Editor)v3.1.8 para el README)
Página GitHub Pages: Viajes Chile
- Introducción
- Estructura HTML
- Encabezado
- Sección Quiénes Somos
- Sección Destacados
- Sección de Contacto
- Pie de Página
- Dependencias de JavaScript
Este documento proporciona documentación para el código HTML del sitio web Viajes Chile. El sitio está diseñado para una agencia de viajes e incluye secciones para el hogar, sobre nosotros, destinos destacados, información de contacto y enlaces a redes sociales.
- charset: UTF-8
- viewport: width=device-width, initial-scale=1.0
- Título del sitio web: "Viajes Chile"
- El favicon es una imagen PNG ubicada en el directorio "./assets/img/".
- Se utiliza Bootstrap 5.3.2 para el estilo.
- Los estilos personalizados se definen en el archivo "./assets/css/style.css".
- Barra de navegación fija con un logotipo de marca y enlaces de navegación.
- Los enlaces de navegación incluyen Inicio, Quiénes Somos, Destacados, Contacto y Redes Sociales.
- Barra de navegación receptiva para pantallas más pequeñas.
- Carrusel de imágenes con imágenes panorámicas con un intervalo de 5 segundos para desplazamiento automático.
- Botones de navegación para control manual.
- Sección que presenta "¿Quiénes Somos?".
- Tres columnas que proporcionan información sobre la experiencia de la agencia de viajes, incluyendo iconos de un avión, una montaña y una ruta.
- Sección que destaca destinos destacados.
- Tarjetas para cada destino con una imagen, título y descripción.
- Sección para el contacto del usuario con un formulario.
- Campos del formulario incluyen Nombre, Asunto y Mensaje.
- Botón de envío para enviar el formulario.
- Sección de pie de página que contiene el nombre de la empresa ("VIAJES CHILE") y enlaces a redes sociales.
- Iconos de redes sociales incluyen GitHub, LinkedIn, Twitter y Facebook.
- jQuery (versión 3.7.1) se utiliza para la funcionalidad de JavaScript.
- Popper.js (versión 2.11.8) para la posición de tooltips y popovers.
- Bootstrap (versión 5.3.2) para el diseño receptivo y funcionalidad adicional de JavaScript.
- Se incluye JavaScript personalizado desde el archivo "./assets/js/script.js".
Se importa la fuente "Raleway" desde Google Fonts con los pesos 400 y 700.
Se establecen estilos iniciales para el cuerpo y otros elementos con márgenes y rellenos a cero.
- Se utiliza la fuente "Raleway" como la fuente principal.
- El fondo del cuerpo es negro (#000000) y el color del texto es blanco (#ffffff).
- La barra de navegación tiene posición fija en la parte superior, transición de color de fondo y se ajusta al ancho de la pantalla.
- Enlaces de navegación en color blanco (#FFFFFF).
- La marca (logo) de la barra de navegación tiene un margen a la izquierda.
- Espaciado superior de 50px.
- Espaciado superior de 50px.
- Imágenes de las tarjetas se ajustan a una altura máxima de 150px con object-fit: cover.
- Los cuerpos de las tarjetas tienen un fondo azul claro (#0DCAF0) y texto blanco (#FFFFFF).
- El texto de la tarjeta tiene un margen inferior de 50px.
- Espaciado superior de 50px.
- Los elementos del formulario tienen un margen inferior de 10px.
- La altura del área de texto del formulario es de 200px.
- Margen superior de 3px.
- Los botones en general tienen un margen inferior de 25px.
- El botón de envío del formulario tiene un fondo azul claro (#0DCAF0) y texto blanco (#ffffff).
- Fondo del pie de página de color azul claro (#0DCAF0).
- Espaciado superior de 20px y espaciado inferior de 15px.
- Título del pie de página tiene un margen a la izquierda.
- A partir de 768px (pantallas medianas y más grandes):
- Alineación del elemento con la clase "ms-auto" se ajusta a la derecha.
- Estilos específicos para los iconos de redes sociales con colores personalizados.
- Estilos personalizados para los tooltips con fondo y texto de color definidos.
Este documento proporciona una descripción de los estilos CSS utilizados en el sitio web Viajes Chile. Consulte las secciones respectivas para obtener información detallada sobre cada conjunto de estilos.
Se importa la fuente "Raleway" desde Google Fonts con los pesos 400 y 700.
Se establecen estilos iniciales para el cuerpo y otros elementos con márgenes y rellenos a cero.
- Se utiliza la fuente "Raleway" como la fuente principal.
- El fondo del cuerpo es negro (#000000) y el color del texto es blanco (#ffffff).
- La barra de navegación tiene posición fija en la parte superior, transición de color de fondo y se ajusta al ancho de la pantalla.
- Enlaces de navegación en color blanco (#FFFFFF).
- La marca (logo) de la barra de navegación tiene un margen a la izquierda.
- Espaciado superior de 50px.
- Espaciado superior de 50px.
- Imágenes de las tarjetas se ajustan a una altura máxima de 150px con object-fit: cover.
- Los cuerpos de las tarjetas tienen un fondo azul claro (#0DCAF0) y texto blanco (#FFFFFF).
- El texto de la tarjeta tiene un margen inferior de 50px.
- Espaciado superior de 50px.
- Los elementos del formulario tienen un margen inferior de 10px.
- La altura del área de texto del formulario es de 200px.
- Margen superior de 3px.
- Los botones en general tienen un margen inferior de 25px.
- El botón principal tiene un fondo azul claro (#0DCAF0) y texto blanco (#ffffff).
- Fondo azul claro (#0DCAF0).
- Diseño de columna y fila con el nombre de la empresa ("VIAJES CHILE") y enlaces a redes sociales.
- Enlaces de redes sociales en blanco (#FFFFFF).
- Ajustes específicos para tamaños de pantalla más pequeños.
- Márgenes, flexbox y ajustes de altura para dispositivos móviles.
Se utiliza el efecto de desplazamiento suave al hacer clic en enlaces internos del sitio.
$(document).ready(function () {
let $root = $("html, body");
$('a[href^="#"]').click(function () {
$root.animate(
{
scrollTop: $($.attr(this, "href")).offset().top - 100,
},
500
);
return false;
});
# Cambio de color en la barra de navegación durante el desplazamiento
$(function () {
$(window).scroll(function () {
let navegador = $(".navbar");
if ($(this).scrollTop() > 100) {
navegador.css("background", "#0DCAF0");
} else {
navegador.css("background", "none");
}
});
});
});# Asegurarse de que el DOM esté completamente cargado antes de ejecutar el código
document.addEventListener('DOMContentLoaded', function() {
# Seleccionar el formulario de contacto por su ID
let form = document.querySelector('#Contacto form');
# Agregar un Event Listener para el evento de envío del formulario
form.addEventListener('submit', function(event) {
# Prevenir el comportamiento predeterminado de envío del formulario
event.preventDefault();
# Mostrar un mensaje de alerta indicando que el mensaje fue enviado correctamente
alert('Su mensaje ha sido enviado correctamente');
});
});Inicialización de Tooltips para el Botón de Enviar y opción pause establecida en false en el carrusel.
# Asegurarse de que el DOM esté completamente cargado antes de ejecutar el código
document.addEventListener('DOMContentLoaded', function() {
# Seleccionar el botón de enviar por su ID
var button = document.querySelector('#Contacto button');
# Configurar atributos para el tooltip en el botón de enviar
button.setAttribute('data-toggle', 'tooltip');
button.setAttribute('data-placement', 'right');
button.setAttribute('title', 'Haz clic para enviar tu mensaje');
# Inicializar todos los tooltips en el documento usando jQuery
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
})
//Nueva instancia del carrusel con la opción pause establecida en false
// El carrusel no se pausará cuando el mouse esté encima.
let carousel = new bootstrap.Carousel(document.querySelector('#carouselExample'), {
pause: false
});