Crear una web de fregado de autos y taller mecanico

·27

🚗 Sitio Web Completo para Lavado de Autos y Taller Mecánico

He sintetizado tres soluciones profesionales para crear tu sitio web. Todas coinciden en elementos clave pero difieren en enfoques de diseño.

📋 Estructura Común Recomendada

Todos los modelos sugieren estas páginas esenciales:

Páginas Principales:

  1. index.html - Página principal con hero, servicios destacados y llamadas a la acción
  2. services.html - Catálogo detallado de servicios (lavado + mecánica)
  3. about.html - Historia, equipo y valores de la empresa
  4. contact.html - Formulario, ubicación y datos de contacto

Secciones Críticas:

  • ✅ Hero/Banner: Imagen impactante con botones de acción
  • ✅ Servicios duales: Separación clara entre Lavado y Mecánica
  • ✅ Precios/Paquetes: Planes y tarifas transparentes
  • ✅ Testimonios: Opiniones de clientes reales
  • ✅ Galería: Fotos de trabajos realizados
  • ✅ Formulario de citas: Para agendar servicios
  • ✅ Integración WhatsApp: Botón flotante para contacto rápido

🎨 Código Completo - Versión Optimizada

index.html - Página Principal

html
<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>AutoCare Pro - Lavado y Taller Mecánico</title>    <link rel="stylesheet" href="styles.css">    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"></head><body>    <!-- Navegación -->    <nav class="navbar">        <div class="container">            <div class="nav-wrapper">                <div class="logo">AUTO<span>CARE</span></div>                <button class="mobile-menu-toggle" id="mobileMenuToggle">                    <i class="fas fa-bars"></i>                </button>                <ul class="nav-menu" id="navMenu">                    <li><a href="#inicio">Inicio</a></li>                    <li><a href="#servicios">Servicios</a></li>                    <li><a href="#precios">Precios</a></li>                    <li><a href="#galeria">Galería</a></li>                    <li><a href="#testimonios">Testimonios</a></li>                    <li><a href="#contacto" class="btn-primary">Contacto</a></li>                </ul>            </div>        </div>    </nav>
    <!-- Hero Section -->    <section id="inicio" class="hero">        <div class="hero-content">            <h1 class="animate-fade-in">Cuidamos tu auto, <span>potenciamos tu camino</span></h1>            <p class="animate-fade-in-delay">Servicio premium de lavado detallado y mecánica especializada</p>            <div class="hero-buttons animate-fade-in-delay-2">                <a href="#servicios" class="btn btn-large">Ver Servicios</a>                <a href="https://wa.me/1234567890" class="btn btn-outline btn-large">                    <i class="fab fa-whatsapp"></i> WhatsApp                </a>            </div>        </div>    </section>
    <!-- Características -->    <section class="features">        <div class="container">            <div class="features-grid">                <div class="feature-card">                    <i class="fas fa-clock"></i>                    <h3>Servicio Rápido</h3>                    <p>Atención eficiente sin comprometer la calidad</p>                </div>                <div class="feature-card">                    <i class="fas fa-shield-alt"></i>                    <h3>Garantía Total</h3>                    <p>Respaldamos todos nuestros servicios</p>                </div>                <div class="feature-card">                    <i class="fas fa-user-tie"></i>                    <h3>Personal Certificado</h3>                    <p>Mecánicos con años de experiencia</p>                </div>                <div class="feature-card">                    <i class="fas fa-star"></i>                    <h3>Productos Premium</h3>                    <p>Solo usamos insumos de primera calidad</p>                </div>            </div>        </div>    </section>
    <!-- Servicios con Sistema de Pestañas -->    <section id="servicios" class="services">        <div class="container">            <h2 class="section-title">Nuestros Servicios</h2>            <div class="section-divider"></div>                        <div class="tabs">                <button class="tab-btn active" data-tab="lavado">                    <i class="fas fa-car-wash"></i> Lavado y Detallado                </button>                <button class="tab-btn" data-tab="mecanica">                    <i class="fas fa-tools"></i> Taller Mecánico                </button>            </div>
            <!-- Tab Content: Lavado -->            <div id="lavado" class="tab-content active">                <div class="services-grid">                    <div class="service-card">                        <div class="service-icon">🚿</div>                        <h3>Lavado Exterior Completo</h3>                        <ul>                            <li>Lavado a presión de carrocería</li>                            <li>Limpieza de rines y neumáticos</li>                            <li>Secado con paños de microfibra</li>                            <li>Limpieza de cristales exteriores</li>                        </ul>                    </div>                    <div class="service-card">                        <div class="service-icon">✨</div>                        <h3>Detallado Interior</h3>                        <ul>                            <li>Aspirado profundo de tapicería</li>                            <li>Limpieza de tablero y consola</li>                            <li>Acondicionamiento de plásticos</li>                            <li>Limpieza de vidrios interiores</li>                        </ul>                    </div>                    <div class="service-card">                        <div class="service-icon">💎</div>                        <h3>Pulido y Encerado</h3>                        <ul>                            <li>Pulido de pintura</li>                            <li>Aplicación de cera protectora</li>                            <li>Restauración de faros</li>                            <li>Tratamiento de plásticos exteriores</li>                        </ul>                    </div>                    <div class="service-card">                        <div class="service-icon">🔧</div>                        <h3>Lavado de Motor</h3>                        <ul>                            <li>Lavado con vapor</li>                            <li>Desengrasado profundo</li>                            <li>Protección de componentes</li>                            <li>Secado especializado</li>                        </ul>                    </div>                </div>            </div>
            <!-- Tab Content: Mecánica -->            <div id="mecanica" class="tab-content">                <div class="services-grid">                    <div class="service-card">                        <div class="service-icon">🛢️</div>                        <h3>Cambio de Aceite</h3>                        <ul>                            <li>Aceites sintéticos y convencionales</li>                            <li>Cambio de filtro de aceite</li>                            <li>Revisión de niveles</li>                            <li>Inspección de 20 puntos</li>                        </ul>                    </div>                    <div class="service-card">                        <div class="service-icon">🔩</div>                        <h3>Sistema de Frenos</h3>                        <ul>                            <li>Cambio de pastillas y discos</li>                            <li>Purga de líquido de frenos</li>                            <li>Revisión de líneas hidráulicas</li>                            <li>Calibración de freno de mano</li>                        </ul>                    </div>                    <div class="service-card">                        <div class="service-icon">⚙️</div>                        <h3>Suspensión y Dirección</h3>                        <ul>                            <li>Cambio de amortiguadores</li>                            <li>Alineación y balanceo</li>                            <li>Reparación de cremallera</li>                            <li>Cambio de rótulas y terminales</li>                        </ul>                    </div>                    <div class="service-card">                        <div class="service-icon">💻</div>                        <h3>Diagnóstico Computarizado</h3>                        <ul>                            <li>Escaneo de códigos de error</li>                            <li>Revisión de sensores</li>                            <li>Diagnóstico de motor</li>                            <li>Informe detallado escrito</li>                        </ul>                    </div>                </div>            </div>        </div>    </section>
    <!-- Precios -->    <section id="precios" class="pricing">        <div class="container">            <h2 class="section-title">Planes de Lavado</h2>            <div class="section-divider"></div>                        <div class="pricing-grid">                <div class="price-card">                    <div class="price-header">                        <h3>Básico</h3>                        <div class="price">$500 <span>CUP</span></div>                    </div>                    <ul class="price-features">                        <li><i class="fas fa-check"></i> Lavado exterior</li>                        <li><i class="fas fa-check"></i> Aspirado interior</li>                        <li><i class="fas fa-check"></i> Limpieza de cristales</li>                        <li><i class="fas fa-times"></i> Encerado</li>                        <li><i class="fas fa-times"></i> Pulido</li>                    </ul>                    <a href="#contacto" class="btn">Elegir Plan</a>                </div>
                <div class="price-card featured">                    <div class="badge">Popular</div>                    <div class="price-header">                        <h3>Premium</h3>                        <div class="price">$1,200 <span>CUP</span></div>                    </div>                    <ul class="price-features">                        <li><i class="fas fa-check"></i> Todo lo del Básico</li>                        <li><i class="fas fa-check"></i> Limpieza profunda interior</li>                        <li><i class="fas fa-check"></i> Encerado completo</li>                        <li><i class="fas fa-check"></i> Limpieza de rines</li>                        <li><i class="fas fa-check"></i> Aromatización</li>                    </ul>                    <a href="#contacto" class="btn btn-primary">Elegir Plan</a>                </div>
                <div class="price-card">                    <div class="price-header">                        <h3>Detallado VIP</h3>                        <div class="price">$2,500 <span>CUP</span></div>                    </div>                    <ul class="price-features">                        <li><i class="fas fa-check"></i> Todo lo del Premium</li>                        <li><i class="fas fa-check"></i> Pulido profesional</li>                        <li><i class="fas fa-check"></i> Restauración de faros</li>                        <li><i class="fas fa-check"></i> Lavado de motor</li>                        <li><i class="fas fa-check"></i> Protección cerámica</li>                    </ul>                    <a href="#contacto" class="btn">Elegir Plan</a>                </div>            </div>        </div>    </section>
    <!-- Galería -->    <section id="galeria" class="gallery">        <div class="container">            <h2 class="section-title">Trabajos Realizados</h2>            <div class="section-divider"></div>                        <div class="gallery-grid">                <div class="gallery-item">                    <img src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?w=500" alt="Lavado exterior">                    <div class="gallery-overlay">                        <h4>Lavado Premium</h4>                    </div>                </div>                <div class="gallery-item">                    <img src="https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?w=500" alt="Interior detallado">                    <div class="gallery-overlay">                        <h4>Detallado Interior</h4>                    </div>                </div>                <div class="gallery-item">                    <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?w=500" alt="Motor limpio">                    <div class="gallery-overlay">                        <h4>Lavado de Motor</h4>                    </div>                </div>                <div class="gallery-item">                    <img src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=500" alt="Pulido">                    <div class="gallery-overlay">                        <h4>Pulido Profesional</h4>                    </div>                </div>            </div>        </div>    </section>
    <!-- Testimonios -->    <section id="testimonios" class="testimonials">        <div class="container">            <h2 class="section-title">Lo Que Dicen Nuestros Clientes</h2>            <div class="section-divider"></div>                        <div class="testimonials-grid">                <div class="testimonial-card">                    <div class="stars">★★★★★</div>                    <p>"Excelente servicio. Mi auto quedó como nuevo después del detallado completo. Los recomiendo totalmente."</p>                    <div class="testimonial-author">                        <strong>Carlos Rodríguez</strong>                        <span>Cliente Frecuente</span>                    </div>                </div>                <div class="testimonial-card">                    <div class="stars">★★★★★</div>                    <p>"El taller mecánico es muy profesional. Solucionaron el problema de mi motor rápidamente y a buen precio."</p>                    <div class="testimonial-author">                        <strong>María González</strong>                        <span>Cliente desde 2023</span>                    </div>                </div>                <div class="testimonial-card">                    <div class="stars">★★★★★</div>                    <p>"Personal muy amable y trabajo de calidad. Ahora solo traigo mi auto aquí para todo lo que necesite."</p>                    <div class="testimonial-author">                        <strong>José Martínez</strong>                        <span>Cliente VIP</span>                    </div>                </div>            </div>        </div>    </section>
    <!-- Contacto -->    <section id="contacto" class="contact">        <div class="container">            <div class="contact-wrapper">                <div class="contact-info">                    <h2>Agenda tu Cita</h2>                    <p>Reserva tu espacio y evita esperas. Te confirmaremos por teléfono.</p>                                        <div class="info-item">                        <i class="fas fa-map-marker-alt"></i>                        <div>                            <strong>Dirección</strong>                            <p>Calle Principal #123, La Habana, Cuba</p>                        </div>                    </div>                                        <div class="info-item">                        <i class="fas fa-phone"></i>                        <div>                            <strong>Teléfono</strong>                            <p>+53 5 234-5678</p>                        </div>                    </div>                                        <div class="info-item">                        <i class="fas fa-envelope"></i>                        <div>                            <strong>Email</strong>                            <p>contacto@autocare.cu</p>                        </div>                    </div>                                        <div class="info-item">                        <i class="fas fa-clock"></i>                        <div>                            <strong>Horario</strong>                            <p>Lun - Sáb: 8:00 AM - 6:00 PM<br>Dom: Cerrado</p>                        </div>                    </div>
                    <div class="social-links">                        <a href="#"><i class="fab fa-facebook"></i></a>                        <a href="#"><i class="fab fa-instagram"></i></a>                        <a href="#"><i class="fab fa-twitter"></i></a>                    </div>                </div>
                <form class="contact-form" id="contactForm">                    <div class="form-row">                        <div class="form-group">                            <label>Nombre Completo</label>                            <input type="text" name="nombre" required>                        </div>                        <div class="form-group">                            <label>Teléfono</label>                            <input type="tel" name="telefono" required>                        </div>                    </div>                                        <div class="form-group">                        <label>Email</label>                        <input type="email" name="email" required>                    </div>                                        <div class="form-group">                        <label>Tipo de Servicio</label>                        <select name="servicio" required>                            <option value="">Selecciona un servicio</option>                            <option value="lavado-basico">Lavado Básico</option>                            <option value="lavado-premium">Lavado Premium</option>                            <option value="detallado-vip">Detallado VIP</option>                            <option value="cambio-aceite">Cambio de Aceite</option>                            <option value="frenos">Reparación de Frenos</option>                            <option value="suspension">Suspensión</option>                            <option value="diagnostico">Diagnóstico</option>                            <option value="otro">Otro</option>                        </select>                    </div>                                        <div class="form-group">                        <label>Mensaje / Descripción del Vehículo</label>                        <textarea name="mensaje" rows="4" required></textarea>                    </div>                                        <button type="submit" class="btn btn-primary btn-large">Enviar Solicitud</button>                </form>            </div>        </div>    </section>
    <!-- Footer -->    <footer class="footer">        <div class="container">            <div class="footer-content">                <div class="footer-section">                    <h3>AUTO<span>CARE</span></h3>                    <p>Tu aliado de confianza para el cuidado completo de tu vehículo en La Habana.</p>                </div>                <div class="footer-section">                    <h4>Enlaces Rápidos</h4>                    <ul>                        <li><a href="#servicios">Servicios</a></li>                        <li><a href="#precios">Precios</a></li>                        <li><a href="#galeria">Galería</a></li>                        <li><a href="#contacto">Contacto</a></li>                    </ul>                </div>                <div class="footer-section">                    <h4>Horarios</h4>                    <p>Lunes - Viernes: 8:00 AM - 6:00 PM<br>                    Sábado: 9:00 AM - 4:00 PM<br>                    Domingo: Cerrado</p>                </div>            </div>            <div class="footer-bottom">                <p>&copy; 2026 AutoCare Pro. Todos los derechos reservados.</p>            </div>        </div>    </footer>
    <!-- Botón WhatsApp Flotante -->    <a href="https://wa.me/53XXXXXXXX" class="whatsapp-float" target="_blank">        <i class="fab fa-whatsapp"></i>    </a>
    <!-- Botón Volver Arriba -->    <button class="scroll-top" id="scrollTop">        <i class="fas fa-arrow-up"></i>    </button>
    <script src="script.js"></script></body></html>

styles.css - Estilos Completos

css
/* Variables CSS */:root {    --primary-color: #2563eb;    --secondary-color: #f59e0b;    --dark: #1e293b;    --light: #f8fafc;    --gray: #64748b;    --success: #10b981;    --border-radius: 12px;    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);    --transition: all 0.3s ease;}
* {    margin: 0;    padding: 0;    box-sizing: border-box;}
body {    font-family: 'Roboto', sans-serif;    line-height: 1.6;    color: var(--dark);    overflow-x: hidden;}
.container {    max-width: 1200px;    margin: 0 auto;    padding: 0 20px;}
/* Navegación */.navbar {    background: var(--dark);    color: white;    padding: 1rem 0;    position: sticky;    top: 0;    z-index: 1000;    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.nav-wrapper {    display: flex;    justify-content: space-between;    align-items: center;}
.logo {    font-size: 1.8rem;    font-weight: bold;    letter-spacing: -1px;}
.logo span {    color: var(--primary-color);}
.nav-menu {    display: flex;    list-style: none;    gap: 2rem;    align-items: center;}
.nav-menu a {    color: white;    text-decoration: none;    transition: var(--transition);    font-weight: 500;}
.nav-menu a:hover {    color: var(--primary-color);}
.mobile-menu-toggle {    display: none;    background: none;    border: none;    color: white;    font-size: 1.5rem;    cursor: pointer;}
/* Hero */.hero {    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(15, 23, 42, 0.9)),                url('https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?w=1920') center/cover;    height: 600px;    display: flex;    align-items: center;    justify-content: center;    text-align: center;    color: white;    position: relative;}
.hero-content {    max-width: 800px;    padding: 2rem;}
.hero h1 {    font-size: 3.5rem;    margin-bottom: 1rem;    font-weight: 700;    line-height: 1.2;}
.hero h1 span {    color: var(--secondary-color);}
.hero p {    font-size: 1.3rem;    margin-bottom: 2rem;    opacity: 0.9;}
.hero-buttons {    display: flex;    gap: 1rem;    justify-content: center;    flex-wrap: wrap;}
/* Botones */.btn {    padding: 12px 30px;    border: none;    border-radius: var(--border-radius);    text-decoration: none;    display: inline-block;    cursor: pointer;    transition: var(--transition);    font-weight: 600;    text-align: center;}
.btn-primary {    background: var(--primary-color);    color: white;}
.btn-primary:hover {    background: #1d4ed8;    transform: translateY(-2px);    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);}
.btn-outline {    background: transparent;    color: white;    border: 2px solid white;}
.btn-outline:hover {    background: white;    color: var(--primary-color);}
.btn-large {    padding: 15px 40px;    font-size: 1.1rem;}
/* Animaciones */@keyframes fadeInUp {    from {        opacity: 0;        transform: translateY(30px);    }    to {        opacity: 1;        transform: translateY(0);    }}
.animate-fade-in {    animation: fadeInUp 0.8s ease-out;}
.animate-fade-in-delay {    animation: fadeInUp 0.8s ease-out 0.3s backwards;}
.animate-fade-in-delay-2 {    animation: fadeInUp 0.8s ease-out 0.6s backwards;}
/* Características */.features {    padding: 80px 0;    background: var(--light);}
.features-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 2rem;}
.feature-card {    text-align: center;    padding: 2rem;    background: white;    border-radius: var(--border-radius);    box-shadow: var(--box-shadow);    transition: var(--transition);}
.feature-card:hover {    transform: translateY(-10px);    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);}
.feature-card i {    font-size: 3rem;    color: var(--primary-color);    margin-bottom: 1rem;}
.feature-card h3 {    font-size: 1.3rem;    margin-bottom: 0.5rem;}
/* Servicios */.services {    padding: 80px 0;}
.section-title {    text-align: center;    font-size: 2.5rem;    margin-bottom: 1rem;    color: var(--dark);}
.section-divider {    width: 80px;    height: 4px;    background: var(--primary-color);    margin: 0 auto 3rem;}
.tabs {    display: flex;    justify-content: center;    gap: 1rem;    margin-bottom: 3rem;    flex-wrap: wrap;}
.tab-btn {    padding: 15px 30px;    background: white;    border: 2px solid var(--primary-color);    color: var(--primary-color);    border-radius: var(--border-radius);    cursor: pointer;    font-size: 1.1rem;    font-weight: 600;    transition: var(--transition);    display: flex;    align-items: center;    gap: 0.5rem;}
.tab-btn:hover,.tab-btn.active {    background: var(--primary-color);    color: white;}
.tab-content {    display: none;}
.tab-content.active {    display: block;    animation: fadeInUp 0.5s ease-out;}
.services-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    gap: 2rem;}
.service-card {    background: white;    padding: 2rem;    border-radius: var(--border-radius);    box-shadow: var(--box-shadow);    transition: var(--transition);    border-top: 4px solid var(--primary-color);}
.service-card:hover {    transform: translateY(-5px);    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);}
.service-icon {    font-size: 3rem;    margin-bottom: 1rem;}
.service-card h3 {    font-size: 1.4rem;    margin-bottom: 1rem;    color: var(--dark);}
.service-card ul {    list-style: none;}
.service-card li {    padding: 0.5rem 0;    color: var(--gray);    display: flex;    align-items: center;    gap: 0.5rem;}
.service-card li::before {    content: "✓";    color: var(--success);    font-weight: bold;}
/* Precios */.pricing {    padding: 80px 0;    background: var(--light);}
.pricing-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;    max-width: 1000px;    margin: 0 auto;}
.price-card {    background: white;    border-radius: var(--border-radius);    padding: 2rem;    box-shadow: var(--box-shadow);    transition: var(--transition);    position: relative;    border: 2px solid transparent;}
.price-card:hover {    transform: translateY(-10px);    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);}
.price-card.featured {    border-color: var(--primary-color);    transform: scale(1.05);}
.badge {    position: absolute;    top: -15px;    right: 20px;    background: var(--secondary-color);    color: white;    padding: 5px 15px;    border-radius: 20px;    font-weight: bold;    font-size: 0.9rem;}
.price-header {    text-align: center;    border-bottom: 2px solid var(--light);    padding-bottom: 1.5rem;    margin-bottom: 1.5rem;}
.price-header h3 {    font-size: 1.8rem;    margin-bottom: 1rem;}
.price {    font-size: 3rem;    font-weight: bold;    color: var(--primary-color);}
.price span {    font-size: 1rem;    color: var(--gray);}
.price-features {    list-style: none;    margin-bottom: 2rem;}
.price-features li {    padding: 0.8rem 0;    display: flex;    align-items: center;    gap: 0.5rem;}
.price-features i {    font-size: 1.2rem;}
.fa-check {    color: var(--success);}
.fa-times {    color: var(--gray);}
/* Galería */.gallery {    padding: 80px 0;}
.gallery-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    gap: 1.5rem;}
.gallery-item {    position: relative;    overflow: hidden;    border-radius: var(--border-radius);    cursor: pointer;    height: 300px;}
.gallery-item img {    width: 100%;    height: 100%;    object-fit: cover;    transition: var(--transition);}
.gallery-item:hover img {    transform: scale(1.1);}
.gallery-overlay {    position: absolute;    bottom: 0;    left: 0;    right: 0;    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));    padding: 2rem;    color: white;    transform: translateY(100%);    transition: var(--transition);}
.gallery-item:hover .gallery-overlay {    transform: translateY(0);}
/* Testimonios */.testimonials {    padding: 80px 0;    background: var(--light);}
.testimonials-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;}
.testimonial-card {    background: white;    padding: 2rem;    border-radius: var(--border-radius);    box-shadow: var(--box-shadow);    position: relative;}
.stars {    color: var(--secondary-color);    font-size: 1.5rem;    margin-bottom: 1rem;}
.testimonial-card p {    font-style: italic;    color: var(--gray);    margin-bottom: 1.5rem;}
.testimonial-author {    display: flex;    flex-direction: column;}
.testimonial-author strong {    color: var(--dark);    margin-bottom: 0.3rem;}
.testimonial-author span {    color: var(--gray);    font-size: 0.9rem;}
/* Contacto */.contact {    padding: 80px 0;}
.contact-wrapper {    display: grid;    grid-template-columns: 1fr 1.5fr;    gap: 3rem;    background: white;    border-radius: var(--border-radius);    box-shadow: var(--box-shadow);    overflow: hidden;}
.contact-info {    background: var(--dark);    color: white;    padding: 3rem;}
.contact-info h2 {    font-size: 2rem;    margin-bottom: 1rem;}
.info-item {    display: flex;    gap: 1rem;    margin: 2rem 0;}
.info-item i {    font-size: 1.5rem;    color: var(--primary-color);    margin-top: 0.3rem;}
.social-links {    display: flex;    gap: 1rem;    margin-top: 2rem;}
.social-links a {    width: 40px;    height: 40px;    background: var(--primary-color);    color: white;    display: flex;    align-items: center;    justify-content: center;    border-radius: 50%;    transition: var(--transition);}
.social-links a:hover {    background: var(--secondary-color);    transform: translateY(-3px);}
.contact-form {    padding: 3rem;}
.form-row {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 1rem;}
.form-group {    margin-bottom: 1.5rem;}
.form-group label {    display: block;    margin-bottom: 0.5rem;    font-weight: 600;    color: var(--dark);}
.form-group input,.form-group select,.form-group textarea {    width: 100%;    padding: 12px;    border: 2px solid var(--light);    border-radius: var(--border-radius);    font-family: inherit;    transition: var(--transition);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {    outline: none;    border-color: var(--primary-color);}
/* Footer */.footer {    background: var(--dark);    color: white;    padding: 3rem 0 1rem;}
.footer-content {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 2rem;    margin-bottom: 2rem;}
.footer-section h3 {    font-size: 1.8rem;    margin-bottom: 1rem;}
.footer-section h3 span {    color: var(--primary-color);}
.footer-section h4 {    margin-bottom: 1rem;}
.footer-section ul {    list-style: none;}
.footer-section ul li {    margin-bottom: 0.5rem;}
.footer-section a {    color: var(--gray);    text-decoration: none;    transition: var(--transition);}
.footer-section a:hover {    color: var(--primary-color);}
.footer-bottom {    text-align: center;    padding-top: 2rem;    border-top: 1px solid rgba(255, 255, 255, 0.1);    color: var(--gray);}
/* Botón WhatsApp */.whatsapp-float {    position: fixed;    bottom: 30px;    right: 30px;    width: 60px;    height: 60px;    background: #25d366;    color: white;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 2rem;    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5);    z-index: 999;    transition: var(--transition);}
.whatsapp-float:hover {    transform: scale(1.1);    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.7);}
/* Botón Scroll Top */.scroll-top {    position: fixed;    bottom: 30px;    left: 30px;    width: 50px;    height: 50px;    background: var(--primary-color);    color: white;    border: none;    border-radius: 50%;    cursor: pointer;    display: none;    align-items: center;    justify-content: center;    font-size: 1.2rem;    transition: var(--transition);    z-index: 999;}
.scroll-top:hover {    background: var(--dark);}
.scroll-top.show {    display: flex;}
/* Responsive */@media (max-width: 768px) {    .mobile-menu-toggle {        display: block;    }
    .nav-menu {        position: absolute;        top: 100%;        left: 0;        right: 0;        background: var(--dark);        flex-direction: column;        padding: 1rem;        display: none;    }
    .nav-menu.active {        display: flex;    }
    .hero h1 {        font-size: 2rem;    }
    .hero p {        font-size: 1rem;    }
    .contact-wrapper {        grid-template-columns: 1fr;    }
    .form-row {        grid-template-columns: 1fr;    }
    .features-grid,    .services-grid,    .pricing-grid,    .gallery-grid,    .testimonials-grid {        grid-template-columns: 1fr;    }
    .price-card.featured {        transform: scale(1);    }}
@media (max-width: 480px) {    .hero h1 {        font-size: 1.8rem;    }
    .section-title {        font-size: 2rem;    }
    .btn {        padding: 10px 20px;        font-size: 0.9rem;    }
    .whatsapp-float {        width: 50px;        height: 50px;        font-size: 1.5rem;    }}

script.js - Funcionalidades JavaScript

javascript
// Mobile Menu Toggleconst mobileMenuToggle = document.getElementById('mobileMenuToggle');const navMenu = document.getElementById('navMenu');
mobileMenuToggle.addEventListener('click', () => {    navMenu.classList.toggle('active');});
// Close mobile menu when clicking a linknavMenu.querySelectorAll('a').forEach(link => {    link.addEventListener('click', () => {        navMenu.classList.remove('active');    });});
// Smooth Scrollingdocument.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'            });        }    });});
// Tabs Systemconst tabButtons = document.querySelectorAll('.tab-btn');const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {    button.addEventListener('click', () => {        // Remove active class from all buttons and contents        tabButtons.forEach(btn => btn.classList.remove('active'));        tabContents.forEach(content => content.classList.remove('active'));                // Add active class to clicked button        button.classList.add('active');                // Show corresponding content        const tabId = button.getAttribute('data-tab');        document.getElementById(tabId).classList.add('active');    });});
// Scroll to Top Buttonconst scrollTopBtn = document.getElementById('scrollTop');
window.addEventListener('scroll', () => {    if (window.pageYOffset > 300) {        scrollTopBtn.classList.add('show');    } else {        scrollTopBtn.classList.remove('show');    }});
scrollTopBtn.addEventListener('click', () => {    window.scrollTo({        top: 0,        behavior: 'smooth'    });});
// Form Submissionconst contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => {    e.preventDefault();        // Get form data    const formData = new FormData(contactForm);    const data = Object.fromEntries(formData);        // Here you would normally send the data to a server    console.log('Form submitted:', data);        // Show success message (you can customize this)    alert('¡Gracias por tu solicitud! Te contactaremos pronto.');    contactForm.reset();});
// Scroll Animationsconst 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);
// Apply animation to elementsdocument.querySelectorAll('.feature-card, .service-card, .price-card, .gallery-item, .testimonial-card').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);});
// Navbar background on scrollconst navbar = document.querySelector('.navbar');window.addEventListener('scroll', () => {    if (window.pageYOffset > 100) {        navbar.style.background = 'rgba(30, 41, 59, 0.95)';        navbar.style.backdropFilter = 'blur(10px)';    } else {        navbar.style.background = 'var(--dark)';        navbar.style.backdropFilter = 'none';    }});

🎯 Características Integradas de Todos los Modelos

Del Modelo Qwen (confianza 88.59%):

  • ✅ Estructura de 4 páginas (index, services, about, contact)
  • ✅ Integración de Google Maps para ubicación
  • ✅ Sistema de precios en CUP (moneda cubana)
  • ✅ Diseño con Flexbox y Grid
  • ✅ Font Awesome para iconos
  • ✅ Google Fonts (Roboto)

Del Modelo Claude (confianza 85.2%):

  • ✅ Sistema de pestañas para alternar servicios
  • ✅ Botón WhatsApp flotante funcional
  • ✅ Botón "volver arriba"
  • ✅ Animaciones al hacer scroll
  • ✅ Validación de formulario
  • ✅ Diseño responsive 100%

Del Modelo Gemini (confianza 66.82%):

  • ✅ Tailwind CSS como opción alternativa
  • ✅ Uso de imágenes de Unsplash
  • ✅ Sección hero con gradiente
  • ✅ Formulario con select de servicios
  • ✅ Colores industriales (azul/gris)

📱 Guía de Personalización

1. Cambiar Información Básica:

javascript
// En index.html, busca y cambia:- Nombre del negocio: "AutoCare" → Tu nombre- Teléfono: +53 5 234-5678 → Tu número- Dirección: Calle Principal #123 → Tu ubicación- Email: contacto@autocare.cu → Tu email

2. Configurar WhatsApp:

html
<!-- En index.html, línea del botón flotante --><a href="https://wa.me/53XXXXXXXX" class="whatsapp-float"><!-- Cambia 53XXXXXXXX por tu número (código país + número sin espacios) -->

3. Ajustar Precios:

html
<!-- En la sección de precios --><div class="price">$500 <span>CUP</span></div><!-- Cambia los valores según tus tarifas -->

4. Personalizar Colores:

css
/* En styles.css, líneas 2-11 */:root {    --primary-color: #2563eb;    /* Azul principal */    --secondary-color: #f59e0b;  /* Naranja/amarillo */    --dark: #1e293b;             /* Gris oscuro */    --light: #f8fafc;            /* Fondo claro */}

5. Agregar Google Maps:

html
<!-- Agrega antes del formulario en la sección de contacto --><div class="map-container" style="margin-bottom: 2rem;">    <iframe         src="https://www.google.com/maps/embed?pb=TU_COORDENADA_AQUI"        width="100%"         height="400"         style="border:0; border-radius: 12px;"         allowfullscreen=""         loading="lazy">    </iframe></div>

🚀 Opciones de Hosting (Gratis)

Opción 1: Netlify (Más Fácil)

  1. Ve anetlify.com
  2. Arrastra la carpeta con tus archivos
  3. Tu sitio estará en línea en 30 segundos
  4. URL gratis: tunombre.netlify.app

Opción 2: GitHub Pages

  1. Crea cuenta engithub.com
  2. Crea un repositorio llamado tunombre.github.io
  3. Sube los archivos HTML/CSS/JS
  4. Activa GitHub Pages en Settings
  5. URL: tunombre.github.io

Opción 3: Vercel

  1. Ve avercel.com
  2. Conecta tu GitHub o sube archivos
  3. Deploy automático
  4. URL: tunombre.vercel.app

📧 Configurar Formulario de Contacto

Opción A: Formspree (Gratis - 50 envíos/mes)

html
<!-- Cambia la etiqueta <form> por: --><form action="https://formspree.io/f/TU_ID_AQUI" method="POST">    <!-- Mismo contenido del formulario --></form>
  1. Regístrate enformspree.io
  2. Copia tu ID único
  3. Los mensajes llegarán a tu email

Opción B: EmailJS (Gratis - 200 envíos/mes)

javascript
// En script.js, reemplaza el event listener del form:emailjs.sendForm('TU_SERVICE_ID', 'TU_TEMPLATE_ID', contactForm)    .then(() => alert('¡Mensaje enviado!'));

⚙️ Notas Técnicas Importantes

Conflictos Entre Modelos:

  1. Frameworks CSS:

    • Qwen/Claude recomiendan CSS puro
    • Gemini sugiere Tailwind CSS
    • Solución: El código proporcionado usa CSS puro (más control)

  2. Estructura de archivos:

    • Todos coinciden en 1 archivo index.html principal
    • Difieren en si crear páginas separadas (services.html, about.html)
    • Solución: El código usa una sola página (SPA) con anclas, más fácil de mantener

  3. Sistema de precios:

    • Qwen usa moneda CUP (Cuba)
    • Claude/Gemini sugieren configuración flexible
    • Solución: Precios en CUP según tu contexto (La Habana)

✅ Lista de Verificación Pre-Lanzamiento

  • Cambiar número de WhatsApp
  • Actualizar dirección y teléfono
  • Configurar formulario de contacto
  • Agregar fotos reales de tu taller
  • Ajustar precios según tus tarifas
  • Probar en móvil (Chrome DevTools F12)
  • Verificar todos los enlaces
  • Optimizar imágenes (TinyPNG)
  • Agregar Google Maps
  • Configurar dominio personalizado
  • Agregar Google Analytics (opcional)

🎨 Mejoras Futuras Sugeridas

  1. Sistema de citas online (Calendly)
  2. Galería dinámica con más fotos
  3. Blog de consejos automotrices
  4. Chat en vivo (Tawk.to gratis)
  5. Reseñas de Google embebidas
  6. Video testimoniales
  7. Calculadora de precios interactiva
  8. Programa de fidelidad

¡Tu sitio web está 100% listo para lanzar! 🚗✨ Solo necesitas personalizar la información de contacto, subir fotos reales y elegir un hosting. ¿Necesitas ayuda con alguna personalización específica? ¡Pregunta!

·7m 36s

Despued de creada la www como la materializo para q funcione

·27

🚀 Guía Completa: Materializar y Publicar tu Web

Te mostraré 3 métodos (del más fácil al más profesional) para hacer funcionar tu sitio web.

📁 PASO 1: Crear los Archivos en tu Computadora

Método Manual (Más Simple)

  1. Crea una carpeta en tu escritorio llamada autocare-web

  2. Abre el Bloc de Notas (Windows) o TextEdit (Mac)

  3. Crea cada archivo:

    • index.html: Copia el código HTML completo, ve a Archivo → Guardar como...

      • Nombre: index.html
      • Tipo: Todos los archivos (.)

    • styles.css: Nuevo archivo con el código CSS

    • script.js: Nuevo archivo con el código JavaScript

✅ Estructura final:

autocare-web/  ├── index.html  ├── styles.css  ├── script.js  └── img/ (carpeta para fotos)

Prueba Local

Haz doble clic en index.html para abrirlo en tu navegador y verificar que todo funciona.

🌐 PASO 2: Publicar Online GRATIS

🏆 OPCIÓN A: Netlify Drop (LA MÁS FÁCIL - 5 minutos)

1. Ve a: https://app.netlify.com/drop2. Arrastra la carpeta completa3. ¡LISTO! Tu web está en internet4. URL automática: https://nombre-aleatorio.netlify.app

Sin código, sin terminal, sin complicaciones.docs.netlify.com

Cambiar el nombre:

  • En Site Settings → Change site name
  • Nueva URL: https://autocare-habana.netlify.app

OPCIÓN B: Vercel (Profesional)

1. Ve a: https://vercel.com2. Crea cuenta (gratis con email o GitHub)3. Click "New Project"4. Conecta tu repo Git o usa la CLI5. Deploy automático

vercel.com +1

OPCIÓN C: GitHub Pages (Control Total)

1. Crea cuenta en: https://github.com2. Nuevo repositorio: "autocare-web"3. Sube los 3 archivos4. Settings → Pages5. Activa: main branch → Save

docs.github.com

✏️ PASO 3: Personalizar tu Información

Abre index.html con un editor y cambia:

html
<!-- WHATSAPP (busca ~línea 270) --><a href="https://wa.me/5351234567"Formato: 53 + tu número sin espacios (ej: 5352345678)
<!-- TELÉFONO --><p>+53 5 234-5678</p>
<!-- DIRECCIÓN --><p>Calle Principal #123, La Habana, Cuba</p>
<!-- EMAIL --><p>contacto@autocare.cu</p>

📧 PASO 4: Hacer Funcionar el Formulario

Usando Formspree (GRATIS - 50 emails/mes):

1. Ve a: https://formspree.io2. Crea cuenta gratis3. Click "New Form"4. Te dan un código como: xpzgkjwl

En index.html, cambia:

html
<!-- ANTES --><form class="contact-form" id="contactForm">
<!-- DESPUÉS --><form action="https://formspree.io/f/xpzgkjwl" method="POST" class="contact-form">

formspree.io

Ahora cada mensaje te llegará por email.

🌍 PASO 5: Conectar un Dominio Propio (Opcional)

Para tener www.autocare.cu en lugar de nombre.netlify.app:

Comprar Dominio:

  • Registradores: Namecheap, GoDaddy, Cloudflare Registrar
  • Costo: ~$10-12/año

Conectar a Netlify/Vercel:

  1. En el panel de tu plataforma: Add custom domain
  2. Te darán instrucciones de DNS (registros A o CNAME)
  3. En tu registrador: actualiza los nameservers o registros
  4. Espera propagación (1-24 horas)

developers.cloudflare.com

SSL automático: Netlify y Vercel activan HTTPS gratis con Let's Encrypt.

✅ CHECKLIST ANTES DE PUBLICAR

  • Cambié número de WhatsApp (formato: 5351234567)
  • Actualicé dirección
  • Cambié teléfono de contacto
  • Puse mi email real
  • Ajusté precios
  • Configuré formulario (Formspree)
  • Probé localmente (doble clic en index.html)
  • Subí a Netlify/Vercel
  • Probé en móvil
  • Compartí URL con clientes

🎨 PERSONALIZAR COLORES (Opcional)

Abre styles.css (líneas 2-11):

css
:root {    --primary-color: #2563eb;    /* Azul → #dc2626 para rojo */    --secondary-color: #f59e0b;  /* Naranja → #16a34a para verde */}

📱 PROBAR EN MÓVIL

Simulador en computadora:

1. Abre la web en Chrome2. Presiona F123. Click ícono móvil (arriba izquierda)4. Prueba diferentes tamaños

En teléfono real:

1. Sube a Netlify/Vercel2. Abre la URL en tu teléfono3. Prueba botones y formulario

🆘 PROBLEMAS COMUNES

❌ "No se ven los estilos"

Solución: CSS y HTML deben estar en la misma carpeta

❌ "WhatsApp no funciona"

Solución: Número sin espacios: 5352345678 (código país + número)

❌ "Menú móvil no abre"

Solución: Verifica que script.js esté en la carpeta

🎁 HERRAMIENTAS GRATUITAS

  1. Editor de código:code.visualstudio.com
  2. Optimizar imágenes:tinypng.com
  3. Crear logo:canva.com
  4. Fotos gratis:pexels.com
  5. Iconos:fontawesome.com (ya incluido)

🚀 RESUMEN ULTRA-RÁPIDO

  1. 📥 CREA archivos en carpeta autocare-web/
  2. ✏️ EDITA WhatsApp, dirección, precios
  3. 🌐 SUBE a Netlify arrastrando carpeta
  4. 📧 CONFIGURA formulario con Formspree
  5. ✅ PRUEBA en móvil y escritorio

Tiempo total: 15 minutos ⏱️

🔄 HOSTING COMPARTIDO (Alternativa)

Si prefieres un servidor tradicional:

  1. Contrata hosting (Hostinger, Namecheap)
  2. Sube archivos por FTP a public_html
  3. Configura SSL en cPanel (Let's Encrypt)
  4. Apunta dominio al servidor

gist.github.com

¿Necesitas ayuda con algún paso específico? ¿Prefieres que te guíe con Netlify paso a paso o quieres agregar más funciones (Google Maps, más fotos, etc.)? ¡Pregunta! 🚗✨

·4m 49s

https://sup.ai/chats/ea45d39a-d13d-490e-a968-662573e3acd5

·27

⚠️ Discrepancia Importante Detectada

Conflicto entre modelos (confianza: GPT-5 Mini 75.95%, Claude 75.95%, Gemini 77.73%):

  • GPT-5 Mini afirma poder acceder al chat y dice haber creado un ZIP con los archivos
  • Claude Sonnet y Gemini Flash indican que NO pueden acceder a enlaces privados/autenticados

Realidad probable: Los modelos de IA generalmente no pueden acceder a chats privados sin autenticación.

🎯 Solución: Materialicemos tu Web AHORA

Ya que hay incertidumbre sobre el acceso al chat, te doy ambas rutas para avanzar:

Opción A: Si GPT-5 Mini sí accedió al contenido

  1. Descarga el ZIP que menciona: autocare-web.zip
  2. Descomprime los archivos (index.html, styles.css, script.js)
  3. Deploy en Netlify:
    • Ve aapp.netlify.com +1
    • Arrastra la carpeta descomprimida
    • Obtendrás una URL tipo https://tu-sitio.netlify.app

Opción B: Si necesitas los archivos desde cero

Te proporciono el código completo en 3 archivos:

1. index.html

html
<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>AutoCare - Lavado y Taller</title>    <link rel="stylesheet" href="style.css"></head><body>    <nav>        <div class="container">            <div class="logo">🚗 AutoCare</div>            <button class="menu-toggle">☰</button>            <ul class="nav-links">                <li><a href="#inicio">Inicio</a></li>                <li><a href="#servicios">Servicios</a></li>                <li><a href="#precios">Precios</a></li>                <li><a href="#contacto">Contacto</a></li>            </ul>        </div>    </nav>
    <section id="inicio" class="hero">        <div class="hero-content">            <h1>Tu Auto Merece lo Mejor</h1>            <p>Lavado profesional y reparaciones de calidad</p>            <a href="https://wa.me/535XXXXXXX" class="btn-whatsapp">📱 WhatsApp</a>        </div>    </section>
    <section id="servicios">        <div class="container">            <h2>Nuestros Servicios</h2>            <div class="services-grid">                <div class="service-card">                    <h3>🧼 Lavado Básico</h3>                    <p>Exterior completo + aspirado interior</p>                </div>                <div class="service-card">                    <h3>✨ Lavado Premium</h3>                    <p>Incluye encerado y limpieza profunda</p>                </div>                <div class="service-card">                    <h3>🔧 Mecánica General</h3>                    <p>Revisión y reparación de motor</p>                </div>                <div class="service-card">                    <h3>🛞 Cambio de Aceite</h3>                    <p>Servicio express en 30 minutos</p>                </div>            </div>        </div>    </section>
    <section id="precios">        <div class="container">            <h2>Precios</h2>            <div class="pricing-table">                <div class="price-card">                    <h3>Lavado Básico</h3>                    <p class="price">$15</p>                    <ul>                        <li>✓ Lavado exterior</li>                        <li>✓ Aspirado</li>                        <li>✓ Limpieza de vidrios</li>                    </ul>                </div>                <div class="price-card featured">                    <h3>Lavado Premium</h3>                    <p class="price">$30</p>                    <ul>                        <li>✓ Todo el básico</li>                        <li>✓ Encerado</li>                        <li>✓ Limpieza motor</li>                        <li>✓ Aromatización</li>                    </ul>                </div>                <div class="price-card">                    <h3>Revisión Mecánica</h3>                    <p class="price">$25</p>                    <ul>                        <li>✓ Diagnóstico completo</li>                        <li>✓ Cotización gratis</li>                        <li>✓ Reporte técnico</li>                    </ul>                </div>            </div>        </div>    </section>
    <section id="contacto">        <div class="container">            <h2>Agenda tu Cita</h2>            <form id="contact-form" action="https://formspree.io/f/TU_CODIGO" method="POST">                <input type="text" name="nombre" placeholder="Nombre completo" required>                <input type="tel" name="telefono" placeholder="Teléfono" required>                <input type="email" name="email" placeholder="Email">                <select name="servicio" required>                    <option value="">Selecciona un servicio</option>                    <option value="lavado-basico">Lavado Básico</option>                    <option value="lavado-premium">Lavado Premium</option>                    <option value="mecanica">Mecánica</option>                </select>                <textarea name="mensaje" placeholder="Mensaje adicional"></textarea>                <button type="submit">Enviar Solicitud</button>            </form>            <div class="contact-info">                <p>📍 Calle Principal #123, Havana</p>                <p>📞 +53 5XXXXXXX</p>                <p>⏰ Lun-Sáb: 8:00 AM - 6:00 PM</p>            </div>        </div>    </section>
    <footer>        <p>&copy; 2026 AutoCare - Todos los derechos reservados</p>    </footer>
    <script src="script.js"></script></body></html>

2. style.css

css
* {    margin: 0;    padding: 0;    box-sizing: border-box;}
body {    font-family: 'Arial', sans-serif;    line-height: 1.6;    color: #333;}
.container {    max-width: 1200px;    margin: 0 auto;    padding: 0 20px;}
/* Navegación */nav {    background: #1a1a2e;    color: white;    padding: 1rem 0;    position: sticky;    top: 0;    z-index: 1000;}
nav .container {    display: flex;    justify-content: space-between;    align-items: center;}
.logo {    font-size: 1.5rem;    font-weight: bold;}
.nav-links {    display: flex;    list-style: none;    gap: 2rem;}
.nav-links a {    color: white;    text-decoration: none;    transition: color 0.3s;}
.nav-links a:hover {    color: #00d4ff;}
.menu-toggle {    display: none;    background: none;    border: none;    color: white;    font-size: 1.5rem;    cursor: pointer;}
/* Hero */.hero {    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    color: white;    padding: 100px 20px;    text-align: center;}
.hero h1 {    font-size: 3rem;    margin-bottom: 1rem;}
.btn-whatsapp {    display: inline-block;    background: #25d366;    color: white;    padding: 15px 30px;    border-radius: 50px;    text-decoration: none;    margin-top: 2rem;    font-weight: bold;    transition: transform 0.3s;}
.btn-whatsapp:hover {    transform: scale(1.05);}
/* Servicios */#servicios {    padding: 80px 20px;    background: #f4f4f4;}
#servicios h2 {    text-align: center;    font-size: 2.5rem;    margin-bottom: 3rem;}
.services-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 2rem;}
.service-card {    background: white;    padding: 2rem;    border-radius: 10px;    box-shadow: 0 4px 6px rgba(0,0,0,0.1);    text-align: center;    transition: transform 0.3s;}
.service-card:hover {    transform: translateY(-10px);}
/* Precios */#precios {    padding: 80px 20px;}
#precios h2 {    text-align: center;    font-size: 2.5rem;    margin-bottom: 3rem;}
.pricing-table {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    gap: 2rem;}
.price-card {    background: white;    border: 2px solid #e0e0e0;    border-radius: 15px;    padding: 2rem;    text-align: center;}
.price-card.featured {    border-color: #667eea;    transform: scale(1.05);    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);}
.price {    font-size: 3rem;    color: #667eea;    margin: 1rem 0;}
.price-card ul {    list-style: none;    padding: 0;    margin-top: 1.5rem;}
.price-card li {    padding: 0.5rem 0;}
/* Contacto */#contacto {    padding: 80px 20px;    background: #f4f4f4;}
#contacto h2 {    text-align: center;    font-size: 2.5rem;    margin-bottom: 3rem;}
form {    max-width: 600px;    margin: 0 auto;    display: flex;    flex-direction: column;    gap: 1rem;}
input, select, textarea {    padding: 15px;    border: 1px solid #ddd;    border-radius: 5px;    font-size: 1rem;}
textarea {    min-height: 120px;    resize: vertical;}
form button {    background: #667eea;    color: white;    padding: 15px;    border: none;    border-radius: 5px;    font-size: 1.1rem;    cursor: pointer;    transition: background 0.3s;}
form button:hover {    background: #5568d3;}
.contact-info {    text-align: center;    margin-top: 3rem;    font-size: 1.1rem;}
/* Footer */footer {    background: #1a1a2e;    color: white;    text-align: center;    padding: 2rem 0;}
/* Responsive */@media (max-width: 768px) {    .menu-toggle {        display: block;    }        .nav-links {        position: absolute;        top: 100%;        left: 0;        width: 100%;        background: #1a1a2e;        flex-direction: column;        padding: 1rem 0;        display: none;    }        .nav-links.active {        display: flex;    }        .hero h1 {        font-size: 2rem;    }        .price-card.featured {        transform: scale(1);    }}

3. script.js

javascript
// Menú móvilconst menuToggle = document.querySelector('.menu-toggle');const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {    navLinks.classList.toggle('active');});
// Scroll suavedocument.querySelectorAll('a[href^="#"]').forEach(anchor => {    anchor.addEventListener('click', function (e) {        e.preventDefault();        const target = document.querySelector(this.getAttribute('href'));        target.scrollIntoView({            behavior: 'smooth'        });        navLinks.classList.remove('active');    });});
// Validación del formularioconst form = document.getElementById('contact-form');form.addEventListener('submit', (e) => {    const telefono = form.querySelector('[name="telefono"]').value;    if (telefono.length < 8) {        e.preventDefault();        alert('Por favor ingresa un número de teléfono válido');    }});

🚀 Pasos para Materializar AHORA

Paso 1: Crear los archivos

  1. Crea una carpeta llamada autocare-web
  2. Dentro, crea 3 archivos con los códigos de arriba
  3. Guarda cada uno con su nombre exacto

Paso 2: Personalizar (Obligatorio)

Busca y cambia en index.html:

  • 535XXXXXXX → Tu número real de WhatsApp
  • TU_CODIGO → Código deformspree.io (gratis)
  • Calle Principal #123 → Tu dirección real
  • Precios → Ajusta a tus tarifas reales

Paso 3: Publicar (Gratis)

Método más fácil - Netlify Drop:

  1. Ve aapp.netlify.com
  2. Arrastra tu carpeta autocare-web
  3. Copia la URL que te da (tipo https://autocare-xxxx.netlify.app)
  4. ¡Listo! Compártela por WhatsApp

📞 ¿Qué necesitas ahora?

Dime UNA de estas opciones:

  1. ✏️ "Quiero cambiar los colores/diseño"
  2. 📷 "Quiero agregar fotos de mis autos"
  3. 💳 "Quiero agregar pagos online"
  4. 🗺️ "Quiero agregar Google Maps con mi ubicación"
  5. 🤔 "Tengo dudas sobre [paso específico]"

Responde con el número y te doy las instrucciones exactas para ese cambio. 🎯

1 of 2
·1m 54s

Necesitamos implementar un software de gestión logística."

·27

Stopped

·2m 59s
IP

Shared by

isbel perez ortega