# 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**