Sitio web profesional para una empresa de fletes y mudanzas, desarrollado con HTML, CSS y JavaScript, enfocado en una experiencia de usuario clara, moderna y confiable.
📌 Descripción del proyecto
Fletes y Mudanzas Express es un sitio web informativo que permite:
Presentar los servicios de la empresa
Solicitar cotizaciones de forma sencilla
Mostrar información de contacto
Ofrecer una navegación clara entre secciones
El diseño aplica psicología del color, animaciones suaves y una estructura limpia, ideal para clientes reales o portafolio profesional.
🧠 Psicología del color aplicada Color Uso Significado Azul Header, footer, botones principales Confianza, seguridad, profesionalismo Verde Confirmaciones y acciones Éxito, tranquilidad Amarillo Hover y énfasis Atención, energía Blanco Fondo Claridad y limpieza 🗂️ Estructura del proyecto Proyecto-Fletes/ │ ├── index.html # Página principal ├── servicios.html # Información de servicios ├── cotizar.html # Formulario de cotización ├── contacto.html # Datos de contacto │ ├── style.css # Estilos y animaciones ├── script.js # Funcionalidad JavaScript │ └── README.md # Documentación del proyecto
📄 Páginas incluidas 🏠 index.html
Página principal
Llamadas a la acción
Resumen de servicios
Navegación principal
🚚 servicios.html
Descripción detallada de los servicios
Diseño tipo tarjetas (cards)
Animaciones al cargar
🧾 cotizar.html
Formulario de cotización
Validación básica con JavaScript
Mensaje de confirmación dinámico
📞 contacto.html
Información de contacto
Diseño limpio y accesible
🎨 Tecnologías utilizadas
HTML5 → Estructura semántica
CSS3 →
Flexbox
Animaciones (@keyframes)
Diseño responsive
JavaScript (Vanilla) →
Manejo de eventos
Validación de formulario
Mensajes dinámicos
⚙️ Funcionalidades JavaScript
Prevención de recarga al enviar formularios
Mensaje de confirmación al enviar cotización
Reinicio automático del formulario
Compatible con múltiples páginas
📱 Responsive Design
El sitio está optimizado para:
Computadoras
Tablets
Dispositivos móviles
Gracias al uso de media queries y layouts flexibles.
🚀 Cómo ejecutar el proyecto
Descarga o clona el repositorio
Abre el archivo index.html en tu navegador
Navega entre las páginas usando el menú
No requiere servidor ni dependencias externas
🎯 Nivel del proyecto
✔ Proyecto escolar ✔ Portafolio profesional ✔ Base para cliente real ✔ Escalable a backend (Node, PHP, etc.)
🔮 Posibles mejoras futuras
Conexión a base de datos
Envío real de formularios
SPA con JavaScript
Integración con WhatsApp
SEO avanzado
👨💻 Autor
Desarrollado como proyecto de práctica en Desarrollo Web Frontend Enfocado en buenas prácticas, diseño UX y código limpio.