Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
creylopez
/
MiWeb
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

Añado singlepage

Celestino Rey 4 tháng trước cách đây
mục cha
dafd3e03a8
commit
2fe1132e4d
4 tập tin đã thay đổi với 1408 bổ sung và 0 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 139 0
      Contenido/README.md
  2. 346 0
      Contenido/index.html
  3. 302 0
      Contenido/script.js
  4. 621 0
      Contenido/styles.css

+ 139 - 0
Contenido/README.md
Xem Tập Tin 

@@ -0,0 +1,139 @@
 
+# Plantilla Web de Una Sola Página
 
+
 
+Una plantilla HTML5 moderna y responsiva para sitios web de una sola página, perfecta para empresas, portfolios o proyectos personales.
 
+
 
+## 🚀 Características
 
+
 
+- **HTML5 Semántico**: Estructura moderna y accesible
 
+- **Diseño Responsivo**: Se adapta perfectamente a todos los dispositivos
 
+- **Navegación Suave**: Scroll suave entre secciones
 
+- **Animaciones Modernas**: Efectos visuales atractivos
 
+- **Formularios Funcionales**: Validación y manejo de envíos
 
+- **Optimizado SEO**: Meta etiquetas y estructura optimizada
 
+
 
+## 📁 Estructura del Proyecto
 
+
 
+```
 
+SinglePage/
 
+├── index.html      # Página principal
 
+├── styles.css      # Estilos CSS
 
+├── script.js       # Funcionalidad JavaScript
 
+└── README.md       # Documentación
 
+```
 
+
 
+## 🎨 Secciones Incluidas
 
+
 
+1. **Top Bar**: Información de contacto y redes sociales
 
+2. **Navigation Bar**: Logo y menú de navegación
 
+3. **Hero Section**: Mensaje principal con llamada a la acción
 
+4. **About Us**: Información sobre la empresa
 
+5. **Services**: Cuadrícula de servicios ofrecidos
 
+6. **Projects**: Portafolio de proyectos destacados
 
+7. **Testimonials**: Testimonios de clientes
 
+8. **Contact**: Formulario de contacto e información
 
+9. **Footer**: Enlaces adicionales y newsletter
 
+
 
+## 🛠 Tecnologías Utilizadas
 
+
 
+- **HTML5**: Estructura semántica
 
+- **CSS3**: Diseño moderno con Grid y Flexbox
 
+- **JavaScript Vanilla**: Interactividad sin dependencias
 
+- **Google Fonts**: Tipografía Inter
 
+- **Iconos**: Emojis para compatibilidad universal
 
+
 
+## 📱 Características de Responsividad
 
+
 
+- Menú hamburguesa para móviles
 
+- Cuadrículas adaptables
 
+- Tipografía escalable
 
+- Imágenes optimizadas
 
+- Touch-friendly interactions
 
+
 
+## ⚡ Funcionalidades JavaScript
 
+
 
+- Navegación suave entre secciones
 
+- Menú móvil toggle
 
+- Animaciones al hacer scroll
 
+- Validación de formularios
 
+- Sistema de notificaciones
 
+- Lazy loading de imágenes
 
+- Efecto parallax en hero section
 
+
 
+## 🎯 Personalización
 
+
 
+### Cambiar Colores
 
+Edita las variables CSS en `styles.css`:
 
+
 
+```css
 
+:root {
 
+    --primary-color: #2563eb;
 
+    --secondary-color: #1e293b;
 
+    --accent-color: #3b82f6;
 
+    /* ... */
 
+}
 
+```
 
+
 
+### Modificar Contenido
 
+Edita directamente el HTML en `index.html`:
 
+- Cambiar textos y títulos
 
+- Reemplazar imágenes (usa URLs reales)
 
+- Ajustar información de contacto
 
+- Modificar servicios y proyectos
 
+
 
+### Añadir Nuevas Secciones
 
+1. Crea una nueva sección en HTML:
 
+```html
 
+<section id="nueva-seccion" class="section">
 
+    <div class="container">
 
+        <!-- Contenido aquí -->
 
+    </div>
 
+</section>
 
+```
 
+
 
+2. Añade el enlace en el menú de navegación:
 
+```html
 
+<li><a href="#nueva-seccion" class="nav-link">Nueva Sección</a></li>
 
+```
 
+
 
+## 🚀 Puesta en Producción
 
+
 
+1. **Reemplazar imágenes placeholder** con tus propias imágenes
 
+2. **Actualizar información de contacto** real
 
+3. **Configurar formularios** para que envíen a tu backend
 
+4. **Optimizar imágenes** para mejor rendimiento
 
+5. **Añadir analytics** si es necesario
 
+
 
+## 🌐 Navegación
 
+
 
+La navegación es automática:
 
+- Los enlaces con `href="#seccion"` hacen scroll suave
 
+- El menú se resalta automáticamente según la sección visible
 
+- En móviles, el menú se convierte en hamburguesa
 
+
 
+## 📧 Formularios
 
+
 
+Los formularios incluyen:
 
+- Validación del lado del cliente
 
+- Notificaciones de éxito/error
 
+- Diseño responsivo
 
+- Preparados para integración con backend
 
+
 
+## 🎨 Estilos Adicionales
 
+
 
+La plantilla incluye:
 
+- Hover effects en cards
 
+- Transiciones suaves
 
+- Sombras y gradientes modernos
 
+- Diseño limpio y profesional
 
+
 
+## 📝 Licencia
 
+
 
+Esta plantilla es de uso libre. Siéntete libre de modificarla y usarla en tus proyectos.
 
+
 
+## 🤝 Contribuciones
 
+
 
+¡Las contribuciones son bienvenidas! Si encuentras algún error o tienes sugerencias de mejora, no dudes en contactarme.
 
+
 
+---
 
+
 
+**Creado con ❤️ usando HTML5, CSS3 y JavaScript Vanilla**

+ 346 - 0
Contenido/index.html
Xem Tập Tin 

@@ -0,0 +1,346 @@
 
+<!DOCTYPE html>
 
+<html lang="es">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Mi Empresa - Página Principal</title>
 
+    <link rel="stylesheet" href="styles.css">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
+</head>
 
+<body>
 
+    <!-- Top Bar with Contact Information -->
 
+    <header class="top-bar">
 
+        <div class="container">
 
+            <div class="contact-info">
 
+                <span>📞 +34 900 123 456</span>
 
+                <span>✉️ info@miempresa.com</span>
 
+                <span>📍 Calle Principal 123, Madrid</span>
 
+            </div>
 
+            <div class="social-links">
 
+                <a href="#" aria-label="Facebook">📘</a>
 
+                <a href="#" aria-label="Twitter">🐦</a>
 
+                <a href="#" aria-label="LinkedIn">💼</a>
 
+                <a href="#" aria-label="Instagram">📷</a>
 
+            </div>
 
+        </div>
 
+    </header>
 
+
 
+    <!-- Navigation Bar -->
 
+    <nav class="navbar">
 
+        <div class="container">
 
+            <div class="nav-brand">
 
+                <img src="https://via.placeholder.com/150x50/2563eb/ffffff?text=LOGO" alt="Logo de la empresa" class="logo">
 
+            </div>
 
+            <ul class="nav-menu">
 
+                <li><a href="#inicio" class="nav-link">Inicio</a></li>
 
+                <li><a href="#nosotros" class="nav-link">Nosotros</a></li>
 
+                <li><a href="#servicios" class="nav-link">Servicios</a></li>
 
+                <li><a href="#proyectos" class="nav-link">Proyectos</a></li>
 
+                <li><a href="#testimonios" class="nav-link">Testimonios</a></li>
 
+                <li><a href="#contacto" class="nav-link">Contacto</a></li>
 
+            </ul>
 
+            <div class="hamburger">
 
+                <span></span>
 
+                <span></span>
 
+                <span></span>
 
+            </div>
 
+        </div>
 
+    </nav>
 
+
 
+    <main>
 
+        <!-- Hero Section -->
 
+        <section id="inicio" class="hero">
 
+            <div class="container">
 
+                <div class="hero-content">
 
+                    <h1>Soluciones Innovadoras para tu Negocio</h1>
 
+                    <p>Transformamos tus ideas en realidad con tecnología de vanguardia y un equipo experto dedicado a tu éxito.</p>
 
+                    <div class="hero-buttons">
 
+                        <a href="#contacto" class="btn btn-primary">Contactar Ahora</a>
 
+                        <a href="#servicios" class="btn btn-secondary">Ver Servicios</a>
 
+                    </div>
 
+                </div>
 
+                <div class="hero-image">
 
+                    <img src="https://via.placeholder.com/600x400/f3f4f6/6b7280?text=Hero+Image" alt="Imagen principal">
 
+                </div>
 
+            </div>
 
+        </section>
 
+
 
+        <!-- About Us Section -->
 
+        <section id="nosotros" class="section">
 
+            <div class="container">
 
+                <div class="section-header">
 
+                    <h2>Sobre Nosotros</h2>
 
+                    <p>Con más de 10 años de experiencia, somos líderes en el sector tecnológico</p>
 
+                </div>
 
+                <div class="about-content">
 
+                    <div class="about-text">
 
+                        <h3>Innovación y Excelencia</h3>
 
+                        <p>Somos una empresa dedicada a proporcionar soluciones tecnológicas de alta calidad. Nuestro equipo de expertos está comprometido con la innovación y la excelencia en cada proyecto que emprendemos.</p>
 
+                        <p>Trabajamos estrechamente con nuestros clientes para entender sus necesidades y ofrecer soluciones personalizadas que impulsen su crecimiento y éxito en el mercado digital.</p>
 
+                        <ul class="features-list">
 
+                            <li>✅ Más de 500 proyectos completados</li>
 
+                            <li>✅ Equipo de 50+ especialistas</li>
 
+                            <li>✅ Clientes en más de 20 países</li>
 
+                            <li>✅ Soporte 24/7</li>
 
+                        </ul>
 
+                    </div>
 
+                    <div class="about-image">
 
+                        <img src="https://via.placeholder.com/500x400/e5e7eb/6b7280?text=Nuestro+Equipo" alt="Nuestro equipo">
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+
 
+        <!-- Services Section -->
 
+        <section id="servicios" class="section section-alt">
 
+            <div class="container">
 
+                <div class="section-header">
 
+                    <h2>Nuestros Servicios</h2>
 
+                    <p>Ofrecemos soluciones integrales adaptadas a tus necesidades</p>
 
+                </div>
 
+                <div class="services-grid">
 
+                    <div class="service-card">
 
+                        <div class="service-icon">💻</div>
 
+                        <h3>Desarrollo Web</h3>
 
+                        <p>Creación de sitios web modernos y responsivos con las últimas tecnologías y mejores prácticas.</p>
 
+                    </div>
 
+                    <div class="service-card">
 
+                        <div class="service-icon">📱</div>
 
+                        <h3>Aplicaciones Móviles</h3>
 
+                        <p>Desarrollo de aplicaciones nativas y multiplataforma para iOS y Android.</p>
 
+                    </div>
 
+                    <div class="service-card">
 
+                        <div class="service-icon">☁️</div>
 
+                        <h3>Soluciones Cloud</h3>
 
+                        <p>Migración y gestión de infraestructura en la nube para maximizar la eficiencia.</p>
 
+                    </div>
 
+                    <div class="service-card">
 
+                        <div class="service-icon">🔒</div>
 
+                        <h3>Ciberseguridad</h3>
 
+                        <p>Protección integral de tus sistemas y datos contra amenazas digitales.</p>
 
+                    </div>
 
+                    <div class="service-card">
 
+                        <div class="service-icon">📊</div>
 
+                        <h3>Análisis de Datos</h3>
 
+                        <p>Transformación de datos en insights valiosos para la toma de decisiones.</p>
 
+                    </div>
 
+                    <div class="service-card">
 
+                        <div class="service-icon">🤖</div>
 
+                        <h3>Inteligencia Artificial</h3>
 
+                        <p>Implementación de soluciones de IA para automatizar y optimizar procesos.</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+
 
+        <!-- Projects Section -->
 
+        <section id="proyectos" class="section">
 
+            <div class="container">
 
+                <div class="section-header">
 
+                    <h2>Proyectos Destacados</h2>
 
+                    <p>Conoce algunos de nuestros trabajos más recientes</p>
 
+                </div>
 
+                <div class="projects-grid">
 
+                    <div class="project-card">
 
+                        <img src="https://via.placeholder.com/400x300/d1d5db/6b7280?text=Proyecto+1" alt="Proyecto 1">
 
+                        <div class="project-info">
 
+                            <h3>Plataforma E-commerce</h3>
 
+                            <p>Desarrollo de tienda online con sistema de pagos integrado y gestión de inventario.</p>
 
+                            <a href="#" class="btn btn-outline">Ver Detalles</a>
 
+                        </div>
 
+                    </div>
 
+                    <div class="project-card">
 
+                        <img src="https://via.placeholder.com/400x300/d1d5db/6b7280?text=Proyecto+2" alt="Proyecto 2">
 
+                        <div class="project-info">
 
+                            <h3>App de Gestión</h3>
 
+                            <p>Aplicación móvil para gestión de proyectos y colaboración en equipo.</p>
 
+                            <a href="#" class="btn btn-outline">Ver Detalles</a>
 
+                        </div>
 
+                    </div>
 
+                    <div class="project-card">
 
+                        <img src="https://via.placeholder.com/400x300/d1d5db/6b7280?text=Proyecto+3" alt="Proyecto 3">
 
+                        <div class="project-info">
 
+                            <h3>Portal Corporativo</h3>
 
+                            <p>Sitio web corporativo con sistema de gestión de contenidos y área de clientes.</p>
 
+                            <a href="#" class="btn btn-outline">Ver Detalles</a>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+
 
+        <!-- Testimonials Section -->
 
+        <section id="testimonios" class="section section-alt">
 
+            <div class="container">
 
+                <div class="section-header">
 
+                    <h2>Testimonios de Clientes</h2>
 
+                    <p>Lo que dicen nuestros clientes sobre nosotros</p>
 
+                </div>
 
+                <div class="testimonials-grid">
 
+                    <div class="testimonial-card">
 
+                        <div class="testimonial-content">
 
+                            <p>"Excelente equipo profesional. Lograron entender nuestras necesidades y entregaron una solución superando nuestras expectativas."</p>
 
+                        </div>
 
+                        <div class="testimonial-author">
 
+                            <img src="https://via.placeholder.com/60x60/3b82f6/ffffff?text=JD" alt="Juan Díaz">
 
+                            <div>
 
+                                <h4>Juan Díaz</h4>
 
+                                <p>CEO, TechStart</p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="testimonial-card">
 
+                        <div class="testimonial-content">
 
+                            <p>"La calidad del trabajo y el soporte post-venta son excepcionales. Recomendados 100% para proyectos tecnológicos."</p>
 
+                        </div>
 
+                        <div class="testimonial-author">
 
+                            <img src="https://via.placeholder.com/60x60/10b981/ffffff?text=MG" alt="María García">
 
+                            <div>
 
+                                <h4>María García</h4>
 
+                                <p>Directora de Marketing, DigitalPro</p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="testimonial-card">
 
+                        <div class="testimonial-content">
 
+                            <p>"Transformaron completamente nuestra presencia digital. El ROI del proyecto ha sido increíble desde el primer mes."</p>
 
+                        </div>
 
+                        <div class="testimonial-author">
 
+                            <img src="https://via.placeholder.com/60x60/f59e0b/ffffff?text=CM" alt="Carlos Martínez">
 
+                            <div>
 
+                                <h4>Carlos Martínez</h4>
 
+                                <p>Gerente, RetailCorp</p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+
 
+        <!-- Contact Section -->
 
+        <section id="contacto" class="section">
 
+            <div class="container">
 
+                <div class="section-header">
 
+                    <h2>Contacto</h2>
 
+                    <p>Estamos listos para ayudarte. ¡Hablemos!</p>
 
+                </div>
 
+                <div class="contact-content">
 
+                    <div class="contact-info">
 
+                        <h3>Información de Contacto</h3>
 
+                        <div class="contact-item">
 
+                            <span class="contact-icon">📍</span>
 
+                            <div>
 
+                                <h4>Dirección</h4>
 
+                                <p>Calle Principal 123, 28001 Madrid, España</p>
 
+                            </div>
 
+                        </div>
 
+                        <div class="contact-item">
 
+                            <span class="contact-icon">📞</span>
 
+                            <div>
 
+                                <h4>Teléfono</h4>
 
+                                <p>+34 900 123 456</p>
 
+                            </div>
 
+                        </div>
 
+                        <div class="contact-item">
 
+                            <span class="contact-icon">✉️</span>
 
+                            <div>
 
+                                <h4>Email</h4>
 
+                                <p>info@miempresa.com</p>
 
+                            </div>
 
+                        </div>
 
+                        <div class="contact-item">
 
+                            <span class="contact-icon">🕐</span>
 
+                            <div>
 
+                                <h4>Horario</h4>
 
+                                <p>Lunes - Viernes: 9:00 - 18:00</p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="contact-form">
 
+                        <h3>Envíanos un Mensaje</h3>
 
+                        <form>
 
+                            <div class="form-group">
 
+                                <input type="text" placeholder="Nombre completo" required>
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <input type="email" placeholder="Email" required>
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <input type="tel" placeholder="Teléfono">
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <select>
 
+                                    <option value="">Selecciona un servicio</option>
 
+                                    <option value="web">Desarrollo Web</option>
 
+                                    <option value="mobile">Aplicaciones Móviles</option>
 
+                                    <option value="cloud">Soluciones Cloud</option>
 
+                                    <option value="security">Ciberseguridad</option>
 
+                                    <option value="data">Análisis de Datos</option>
 
+                                    <option value="ai">Inteligencia Artificial</option>
 
+                                </select>
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <textarea placeholder="Tu mensaje" rows="5" required></textarea>
 
+                            </div>
 
+                            <button type="submit" class="btn btn-primary">Enviar Mensaje</button>
 
+                        </form>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+    </main>
 
+
 
+    <!-- Footer -->
 
+    <footer class="footer">
 
+        <div class="container">
 
+            <div class="footer-content">
 
+                <div class="footer-section">
 
+                    <h3>Mi Empresa</h3>
 
+                    <p>Líderes en soluciones tecnológicas innovadoras para empresas de todos los tamaños.</p>
 
+                    <div class="social-links">
 
+                        <a href="#" aria-label="Facebook">📘</a>
 
+                        <a href="#" aria-label="Twitter">🐦</a>
 
+                        <a href="#" aria-label="LinkedIn">💼</a>
 
+                        <a href="#" aria-label="Instagram">📷</a>
 
+                    </div>
 
+                </div>
 
+                <div class="footer-section">
 
+                    <h3>Enlaces Rápidos</h3>
 
+                    <ul>
 
+                        <li><a href="#inicio">Inicio</a></li>
 
+                        <li><a href="#nosotros">Nosotros</a></li>
 
+                        <li><a href="#servicios">Servicios</a></li>
 
+                        <li><a href="#proyectos">Proyectos</a></li>
 
+                        <li><a href="#contacto">Contacto</a></li>
 
+                    </ul>
 
+                </div>
 
+                <div class="footer-section">
 
+                    <h3>Servicios</h3>
 
+                    <ul>
 
+                        <li><a href="#">Desarrollo Web</a></li>
 
+                        <li><a href="#">Aplicaciones Móviles</a></li>
 
+                        <li><a href="#">Soluciones Cloud</a></li>
 
+                        <li><a href="#">Ciberseguridad</a></li>
 
+                        <li><a href="#">Análisis de Datos</a></li>
 
+                    </ul>
 
+                </div>
 
+                <div class="footer-section">
 
+                    <h3>Newsletter</h3>
 
+                    <p>Suscríbete para recibir las últimas noticias y ofertas.</p>
 
+                    <form class="newsletter-form">
 
+                        <input type="email" placeholder="Tu email">
 
+                        <button type="submit" class="btn btn-primary">Suscribir</button>
 
+                    </form>
 
+                </div>
 
+            </div>
 
+            <div class="footer-bottom">
 
+                <p>&copy; 2024 Mi Empresa. Todos los derechos reservados.</p>
 
+            </div>
 
+        </div>
 
+    </footer>
 
+
 
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 302 - 0
Contenido/script.js
Xem Tập Tin 

@@ -0,0 +1,302 @@
 
+// Mobile Navigation Toggle
 
+const hamburger = document.querySelector('.hamburger');
 
+const navMenu = document.querySelector('.nav-menu');
 
+
 
+hamburger.addEventListener('click', () => {
 
+    hamburger.classList.toggle('active');
 
+    navMenu.classList.toggle('active');
 
+});
 
+
 
+// Close mobile menu when clicking on a link
 
+document.querySelectorAll('.nav-link').forEach(link => {
 
+    link.addEventListener('click', () => {
 
+        hamburger.classList.remove('active');
 
+        navMenu.classList.remove('active');
 
+    });
 
+});
 
+
 
+// Smooth scrolling for navigation links
 
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 
+    anchor.addEventListener('click', function (e) {
 
+        e.preventDefault();
 
+        const target = document.querySelector(this.getAttribute('href'));
 
+        if (target) {
 
+            target.scrollIntoView({
 
+                behavior: 'smooth',
 
+                block: 'start'
 
+            });
 
+        }
 
+    });
 
+});
 
+
 
+// Active navigation link on scroll
 
+window.addEventListener('scroll', () => {
 
+    let current = '';
 
+    const sections = document.querySelectorAll('section');
 
+    
+    sections.forEach(section => {
 
+        const sectionTop = section.offsetTop;
 
+        const sectionHeight = section.clientHeight;
 
+        if (scrollY >= (sectionTop - 200)) {
 
+            current = section.getAttribute('id');
 
+        }
 
+    });
 
+
 
+    document.querySelectorAll('.nav-link').forEach(link => {
 
+        link.classList.remove('active');
 
+        if (link.getAttribute('href').slice(1) === current) {
 
+            link.classList.add('active');
 
+        }
 
+    });
 
+});
 
+
 
+// Header background on scroll
 
+window.addEventListener('scroll', () => {
 
+    const navbar = document.querySelector('.navbar');
 
+    if (window.scrollY > 50) {
 
+        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
 
+        navbar.style.backdropFilter = 'blur(10px)';
 
+    } else {
 
+        navbar.style.background = 'white';
 
+        navbar.style.backdropFilter = 'none';
 
+    }
 
+});
 
+
 
+// Form submission handling
 
+const contactForm = document.querySelector('.contact-form form');
 
+if (contactForm) {
 
+    contactForm.addEventListener('submit', function(e) {
 
+        e.preventDefault();
 
+        
+        // Get form data
 
+        const formData = new FormData(this);
 
+        const name = this.querySelector('input[type="text"]').value;
 
+        const email = this.querySelector('input[type="email"]').value;
 
+        const phone = this.querySelector('input[type="tel"]').value;
 
+        const service = this.querySelector('select').value;
 
+        const message = this.querySelector('textarea').value;
 
+        
+        // Simple validation
 
+        if (!name || !email || !message) {
 
+            showNotification('Por favor, completa todos los campos obligatorios.', 'error');
 
+            return;
 
+        }
 
+        
+        // Email validation
 
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+        if (!emailRegex.test(email)) {
 
+            showNotification('Por favor, introduce un email válido.', 'error');
 
+            return;
 
+        }
 
+        
+        // Simulate form submission (replace with actual endpoint)
 
+        showNotification('¡Mensaje enviado con éxito! Nos pondremos en contacto contigo pronto.', 'success');
 
+        this.reset();
 
+    });
 
+}
 
+
 
+// Newsletter form handling
 
+const newsletterForm = document.querySelector('.newsletter-form');
 
+if (newsletterForm) {
 
+    newsletterForm.addEventListener('submit', function(e) {
 
+        e.preventDefault();
 
+        const email = this.querySelector('input[type="email"]').value;
 
+        
+        if (!email) {
 
+            showNotification('Por favor, introduce tu email.', 'error');
 
+            return;
 
+        }
 
+        
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+        if (!emailRegex.test(email)) {
 
+            showNotification('Por favor, introduce un email válido.', 'error');
 
+            return;
 
+        }
 
+        
+        // Simulate newsletter subscription
 
+        showNotification('¡Gracias por suscribirte a nuestro newsletter!', 'success');
 
+        this.reset();
 
+    });
 
+}
 
+
 
+// Notification system
 
+function showNotification(message, type = 'info') {
 
+    // Remove existing notifications
 
+    const existingNotification = document.querySelector('.notification');
 
+    if (existingNotification) {
 
+        existingNotification.remove();
 
+    }
 
+    
+    // Create notification element
 
+    const notification = document.createElement('div');
 
+    notification.className = `notification notification-${type}`;
 
+    notification.textContent = message;
 
+    
+    // Add styles
 
+    notification.style.cssText = `
 
+        position: fixed;
 
+        top: 20px;
 
+        right: 20px;
 
+        padding: 15px 20px;
 
+        border-radius: 8px;
 
+        color: white;
 
+        font-weight: 500;
 
+        z-index: 10000;
 
+        transform: translateX(100%);
 
+        transition: transform 0.3s ease;
 
+        max-width: 300px;
 
+    `;
 
+    
+    // Set background color based on type
 
+    switch(type) {
 
+        case 'success':
 
+            notification.style.background = '#10b981';
 
+            break;
 
+        case 'error':
 
+            notification.style.background = '#ef4444';
 
+            break;
 
+        default:
 
+            notification.style.background = '#3b82f6';
 
+    }
 
+    
+    // Add to page
 
+    document.body.appendChild(notification);
 
+    
+    // Animate in
 
+    setTimeout(() => {
 
+        notification.style.transform = 'translateX(0)';
 
+    }, 100);
 
+    
+    // Remove after 5 seconds
 
+    setTimeout(() => {
 
+        notification.style.transform = 'translateX(100%)';
 
+        setTimeout(() => {
 
+            notification.remove();
 
+        }, 300);
 
+    }, 5000);
 
+}
 
+
 
+// Intersection Observer for animations
 
+const observerOptions = {
 
+    threshold: 0.1,
 
+    rootMargin: '0px 0px -50px 0px'
 
+};
 
+
 
+const observer = new IntersectionObserver((entries) => {
 
+    entries.forEach(entry => {
 
+        if (entry.isIntersecting) {
 
+            entry.target.style.opacity = '1';
 
+            entry.target.style.transform = 'translateY(0)';
 
+        }
 
+    });
 
+}, observerOptions);
 
+
 
+// Observe elements for animation
 
+document.addEventListener('DOMContentLoaded', () => {
 
+    const animatedElements = document.querySelectorAll('.service-card, .project-card, .testimonial-card');
 
+    
+    animatedElements.forEach(el => {
 
+        el.style.opacity = '0';
 
+        el.style.transform = 'translateY(30px)';
 
+        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
 
+        observer.observe(el);
 
+    });
 
+});
 
+
 
+// Lazy loading for images
 
+const imageObserver = new IntersectionObserver((entries) => {
 
+    entries.forEach(entry => {
 
+        if (entry.isIntersecting) {
 
+            const img = entry.target;
 
+            img.style.opacity = '0';
 
+            img.style.transition = 'opacity 0.5s ease';
 
+            
+            img.onload = () => {
 
+                img.style.opacity = '1';
 
+            };
 
+            
+            // Force load if not already loaded
 
+            if (img.complete) {
 
+                img.style.opacity = '1';
 
+            }
 
+            
+            imageObserver.unobserve(img);
 
+        }
 
+    });
 
+});
 
+
 
+// Observe all images
 
+document.addEventListener('DOMContentLoaded', () => {
 
+    const images = document.querySelectorAll('img');
 
+    images.forEach(img => imageObserver.observe(img));
 
+});
 
+
 
+// Parallax effect for hero section
 
+window.addEventListener('scroll', () => {
 
+    const scrolled = window.pageYOffset;
 
+    const hero = document.querySelector('.hero');
 
+    if (hero) {
 
+        hero.style.transform = `translateY(${scrolled * 0.5}px)`;
 
+    }
 
+});
 
+
 
+// Add loading animation
 
+window.addEventListener('load', () => {
 
+    document.body.style.opacity = '0';
 
+    document.body.style.transition = 'opacity 0.5s ease';
 
+    
+    setTimeout(() => {
 
+        document.body.style.opacity = '1';
 
+    }, 100);
 
+});
 
+
 
+// Counter animation for statistics
 
+function animateCounter(element, target, duration = 2000) {
 
+    let start = 0;
 
+    const increment = target / (duration / 16);
 
+    
+    const timer = setInterval(() => {
 
+        start += increment;
 
+        if (start >= target) {
 
+            element.textContent = target;
 
+            clearInterval(timer);
 
+        } else {
 
+            element.textContent = Math.floor(start);
 
+        }
 
+    }, 16);
 
+}
 
+
 
+// Initialize counters when in viewport
 
+const counterObserver = new IntersectionObserver((entries) => {
 
+    entries.forEach(entry => {
 
+        if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
 
+            const target = parseInt(entry.target.textContent);
 
+            entry.target.classList.add('counted');
 
+            animateCounter(entry.target, target);
 
+        }
 
+    });
 
+}, { threshold: 0.5 });
 
+
 
+// Add hover effects to cards
 
+document.addEventListener('DOMContentLoaded', () => {
 
+    const cards = document.querySelectorAll('.service-card, .project-card, .testimonial-card');
 
+    
+    cards.forEach(card => {
 
+        card.addEventListener('mouseenter', function() {
 
+            this.style.transform = 'translateY(-10px) scale(1.02)';
 
+        });
 
+        
+        card.addEventListener('mouseleave', function() {
 
+            this.style.transform = 'translateY(0) scale(1)';
 
+        });
 
+    });
 
+});
 
+
 
+// Add active class to current navigation item
 
+document.addEventListener('DOMContentLoaded', () => {
 
+    const currentPath = window.location.hash || '#inicio';
 
+    const activeLink = document.querySelector(`.nav-link[href="${currentPath}"]`);
 
+    if (activeLink) {
 
+        activeLink.classList.add('active');
 
+    }
 
+});

+ 621 - 0
Contenido/styles.css
Xem Tập Tin 

@@ -0,0 +1,621 @@
 
+/* Reset and Base Styles */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+
 
+body {
 
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
+    line-height: 1.6;
 
+    color: #333;
 
+    overflow-x: hidden;
 
+}
 
+
 
+.container {
 
+    max-width: 1200px;
 
+    margin: 0 auto;
 
+    padding: 0 20px;
 
+}
 
+
 
+/* Top Bar */
 
+.top-bar {
 
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
 
+    color: white;
 
+    padding: 10px 0;
 
+    font-size: 14px;
 
+}
 
+
 
+.top-bar .container {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+
 
+.contact-info {
 
+    display: flex;
 
+    gap: 20px;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+.social-links {
 
+    display: flex;
 
+    gap: 15px;
 
+}
 
+
 
+.social-links a {
 
+    color: white;
 
+    text-decoration: none;
 
+    font-size: 18px;
 
+    transition: transform 0.3s ease;
 
+}
 
+
 
+.social-links a:hover {
 
+    transform: translateY(-2px);
 
+}
 
+
 
+/* Navigation Bar */
 
+.navbar {
 
+    background: white;
 
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 
+    position: sticky;
 
+    top: 0;
 
+    z-index: 1000;
 
+}
 
+
 
+.navbar .container {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    padding: 15px 20px;
 
+}
 
+
 
+.logo {
 
+    height: 50px;
 
+    width: auto;
 
+}
 
+
 
+.nav-menu {
 
+    display: flex;
 
+    list-style: none;
 
+    gap: 30px;
 
+}
 
+
 
+.nav-link {
 
+    text-decoration: none;
 
+    color: #333;
 
+    font-weight: 500;
 
+    transition: color 0.3s ease;
 
+    position: relative;
 
+}
 
+
 
+.nav-link:hover {
 
+    color: #2563eb;
 
+}
 
+
 
+.nav-link::after {
 
+    content: '';
 
+    position: absolute;
 
+    bottom: -5px;
 
+    left: 0;
 
+    width: 0;
 
+    height: 2px;
 
+    background: #2563eb;
 
+    transition: width 0.3s ease;
 
+}
 
+
 
+.nav-link:hover::after {
 
+    width: 100%;
 
+}
 
+
 
+.hamburger {
 
+    display: none;
 
+    flex-direction: column;
 
+    cursor: pointer;
 
+}
 
+
 
+.hamburger span {
 
+    width: 25px;
 
+    height: 3px;
 
+    background: #333;
 
+    margin: 3px 0;
 
+    transition: 0.3s;
 
+}
 
+
 
+/* Hero Section */
 
+.hero {
 
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
 
+    color: white;
 
+    padding: 80px 0;
 
+    min-height: 600px;
 
+    display: flex;
 
+    align-items: center;
 
+}
 
+
 
+.hero .container {
 
+    display: grid;
 
+    grid-template-columns: 1fr 1fr;
 
+    gap: 60px;
 
+    align-items: center;
 
+}
 
+
 
+.hero-content h1 {
 
+    font-size: 3rem;
 
+    font-weight: 700;
 
+    margin-bottom: 20px;
 
+    line-height: 1.2;
 
+}
 
+
 
+.hero-content p {
 
+    font-size: 1.2rem;
 
+    margin-bottom: 30px;
 
+    opacity: 0.9;
 
+}
 
+
 
+.hero-buttons {
 
+    display: flex;
 
+    gap: 20px;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+.hero-image img {
 
+    width: 100%;
 
+    height: auto;
 
+    border-radius: 10px;
 
+    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
 
+}
 
+
 
+/* Buttons */
 
+.btn {
 
+    display: inline-block;
 
+    padding: 12px 30px;
 
+    text-decoration: none;
 
+    border-radius: 50px;
 
+    font-weight: 600;
 
+    transition: all 0.3s ease;
 
+    cursor: pointer;
 
+    border: none;
 
+    font-size: 16px;
 
+}
 
+
 
+.btn-primary {
 
+    background: white;
 
+    color: #2563eb;
 
+}
 
+
 
+.btn-primary:hover {
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
 
+}
 
+
 
+.btn-secondary {
 
+    background: transparent;
 
+    color: white;
 
+    border: 2px solid white;
 
+}
 
+
 
+.btn-secondary:hover {
 
+    background: white;
 
+    color: #2563eb;
 
+}
 
+
 
+.btn-outline {
 
+    background: transparent;
 
+    color: #2563eb;
 
+    border: 2px solid #2563eb;
 
+}
 
+
 
+.btn-outline:hover {
 
+    background: #2563eb;
 
+    color: white;
 
+}
 
+
 
+/* Sections */
 
+.section {
 
+    padding: 80px 0;
 
+}
 
+
 
+.section-alt {
 
+    background: #f8fafc;
 
+}
 
+
 
+.section-header {
 
+    text-align: center;
 
+    margin-bottom: 60px;
 
+}
 
+
 
+.section-header h2 {
 
+    font-size: 2.5rem;
 
+    font-weight: 700;
 
+    margin-bottom: 15px;
 
+    color: #1e293b;
 
+}
 
+
 
+.section-header p {
 
+    font-size: 1.2rem;
 
+    color: #64748b;
 
+    max-width: 600px;
 
+    margin: 0 auto;
 
+}
 
+
 
+/* About Section */
 
+.about-content {
 
+    display: grid;
 
+    grid-template-columns: 1fr 1fr;
 
+    gap: 60px;
 
+    align-items: center;
 
+}
 
+
 
+.about-text h3 {
 
+    font-size: 1.8rem;
 
+    margin-bottom: 20px;
 
+    color: #1e293b;
 
+}
 
+
 
+.about-text p {
 
+    margin-bottom: 20px;
 
+    color: #475569;
 
+}
 
+
 
+.features-list {
 
+    list-style: none;
 
+    margin-top: 30px;
 
+}
 
+
 
+.features-list li {
 
+    padding: 10px 0;
 
+    color: #475569;
 
+    font-weight: 500;
 
+}
 
+
 
+.about-image img {
 
+    width: 100%;
 
+    height: auto;
 
+    border-radius: 10px;
 
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 
+}
 
+
 
+/* Services Section */
 
+.services-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 
+    gap: 30px;
 
+}
 
+
 
+.service-card {
 
+    background: white;
 
+    padding: 40px 30px;
 
+    border-radius: 15px;
 
+    text-align: center;
 
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+}
 
+
 
+.service-card:hover {
 
+    transform: translateY(-10px);
 
+    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
 
+}
 
+
 
+.service-icon {
 
+    font-size: 3rem;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.service-card h3 {
 
+    font-size: 1.5rem;
 
+    margin-bottom: 15px;
 
+    color: #1e293b;
 
+}
 
+
 
+.service-card p {
 
+    color: #64748b;
 
+}
 
+
 
+/* Projects Section */
 
+.projects-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 
+    gap: 30px;
 
+}
 
+
 
+.project-card {
 
+    background: white;
 
+    border-radius: 15px;
 
+    overflow: hidden;
 
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 
+    transition: transform 0.3s ease;
 
+}
 
+
 
+.project-card:hover {
 
+    transform: translateY(-5px);
 
+}
 
+
 
+.project-card img {
 
+    width: 100%;
 
+    height: 250px;
 
+    object-fit: cover;
 
+}
 
+
 
+.project-info {
 
+    padding: 30px;
 
+}
 
+
 
+.project-info h3 {
 
+    font-size: 1.5rem;
 
+    margin-bottom: 15px;
 
+    color: #1e293b;
 
+}
 
+
 
+.project-info p {
 
+    color: #64748b;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+/* Testimonials Section */
 
+.testimonials-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 
+    gap: 30px;
 
+}
 
+
 
+.testimonial-card {
 
+    background: white;
 
+    padding: 30px;
 
+    border-radius: 15px;
 
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 
+}
 
+
 
+.testimonial-content {
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.testimonial-content p {
 
+    color: #475569;
 
+    font-style: italic;
 
+    font-size: 1.1rem;
 
+}
 
+
 
+.testimonial-author {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 15px;
 
+}
 
+
 
+.testimonial-author img {
 
+    width: 60px;
 
+    height: 60px;
 
+    border-radius: 50%;
 
+}
 
+
 
+.testimonial-author h4 {
 
+    color: #1e293b;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+.testimonial-author p {
 
+    color: #64748b;
 
+    font-size: 0.9rem;
 
+}
 
+
 
+/* Contact Section */
 
+.contact-content {
 
+    display: grid;
 
+    grid-template-columns: 1fr 1fr;
 
+    gap: 60px;
 
+}
 
+
 
+.contact-info h3 {
 
+    font-size: 1.8rem;
 
+    margin-bottom: 30px;
 
+    color: #1e293b;
 
+}
 
+
 
+.contact-item {
 
+    display: flex;
 
+    align-items: flex-start;
 
+    gap: 15px;
 
+    margin-bottom: 25px;
 
+}
 
+
 
+.contact-icon {
 
+    font-size: 1.5rem;
 
+    color: #2563eb;
 
+    min-width: 30px;
 
+}
 
+
 
+.contact-item h4 {
 
+    color: #1e293b;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+.contact-item p {
 
+    color: #64748b;
 
+}
 
+
 
+.contact-form {
 
+    background: white;
 
+    padding: 40px;
 
+    border-radius: 15px;
 
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 
+}
 
+
 
+.contact-form h3 {
 
+    font-size: 1.8rem;
 
+    margin-bottom: 30px;
 
+    color: #1e293b;
 
+}
 
+
 
+.form-group {
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.form-group input,
 
+.form-group select,
 
+.form-group textarea {
 
+    width: 100%;
 
+    padding: 15px;
 
+    border: 2px solid #e2e8f0;
 
+    border-radius: 8px;
 
+    font-size: 16px;
 
+    transition: border-color 0.3s ease;
 
+}
 
+
 
+.form-group input:focus,
 
+.form-group select:focus,
 
+.form-group textarea:focus {
 
+    outline: none;
 
+    border-color: #2563eb;
 
+}
 
+
 
+/* Footer */
 
+.footer {
 
+    background: #1e293b;
 
+    color: white;
 
+    padding: 60px 0 20px;
 
+}
 
+
 
+.footer-content {
 
+    display: grid;
 
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
+    gap: 40px;
 
+    margin-bottom: 40px;
 
+}
 
+
 
+.footer-section h3 {
 
+    font-size: 1.3rem;
 
+    margin-bottom: 20px;
 
+    color: white;
 
+}
 
+
 
+.footer-section p {
 
+    color: #94a3b8;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.footer-section ul {
 
+    list-style: none;
 
+}
 
+
 
+.footer-section ul li {
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.footer-section ul li a {
 
+    color: #94a3b8;
 
+    text-decoration: none;
 
+    transition: color 0.3s ease;
 
+}
 
+
 
+.footer-section ul li a:hover {
 
+    color: white;
 
+}
 
+
 
+.newsletter-form {
 
+    display: flex;
 
+    gap: 10px;
 
+    margin-top: 20px;
 
+}
 
+
 
+.newsletter-form input {
 
+    flex: 1;
 
+    padding: 12px;
 
+    border: none;
 
+    border-radius: 5px;
 
+}
 
+
 
+.footer-bottom {
 
+    border-top: 1px solid #334155;
 
+    padding-top: 20px;
 
+    text-align: center;
 
+    color: #94a3b8;
 
+}
 
+
 
+/* Responsive Design */
 
+@media (max-width: 768px) {
 
+    .hamburger {
 
+        display: flex;
 
+    }
 
+    
+    .nav-menu {
 
+        position: fixed;
 
+        left: -100%;
 
+        top: 70px;
 
+        flex-direction: column;
 
+        background-color: white;
 
+        width: 100%;
 
+        text-align: center;
 
+        transition: 0.3s;
 
+        box-shadow: 0 10px 27px rgba(0,0,0,0.05);
 
+        padding: 20px 0;
 
+    }
 
+    
+    .nav-menu.active {
 
+        left: 0;
 
+    }
 
+    
+    .hero .container {
 
+        grid-template-columns: 1fr;
 
+        text-align: center;
 
+    }
 
+    
+    .hero-content h1 {
 
+        font-size: 2rem;
 
+    }
 
+    
+    .hero-buttons {
 
+        justify-content: center;
 
+    }
 
+    
+    .about-content,
 
+    .contact-content {
 
+        grid-template-columns: 1fr;
 
+    }
 
+    
+    .services-grid,
 
+    .projects-grid,
 
+    .testimonials-grid {
 
+        grid-template-columns: 1fr;
 
+    }
 
+    
+    .contact-info {
 
+        display: none;
 
+    }
 
+    
+    .top-bar .container {
 
+        flex-direction: column;
 
+        gap: 10px;
 
+        text-align: center;
 
+    }
 
+    
+    .footer-content {
 
+        grid-template-columns: 1fr;
 
+        text-align: center;
 
+    }
 
+    
+    .newsletter-form {
 
+        flex-direction: column;
 
+    }
 
+}
 
+
 
+@media (max-width: 480px) {
 
+    .section {
 
+        padding: 60px 0;
 
+    }
 
+    
+    .hero {
 
+        padding: 60px 0;
 
+    }
 
+    
+    .section-header h2 {
 
+        font-size: 2rem;
 
+    }
 
+    
+    .hero-content h1 {
 
+        font-size: 1.8rem;
 
+    }
 
+    
+    .service-card,
 
+    .contact-form {
 
+        padding: 25px 20px;
 
+    }
 
+}