9f708cc983
- Hero con animación de partículas y efecto typewriter - Sección de servicios con animación scroll-reveal - Estadísticas animadas con contadores progresivos - Galería de proyectos con overlay hover - Sección de contacto con enlaces - Footer completo - Diseño responsive mobile-first - Soporte prefers-reduced-motion
219 lines
11 KiB
HTML
219 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DevLab.lat — Laboratorio de Desarrollo</title>
|
|
<meta name="description" content="DevLab.lat — Laboratorio de desarrollo web moderno. Creamos experiencias digitales innovadoras con tecnología de punta.">
|
|
<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;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar" role="navigation" aria-label="Navegación principal">
|
|
<div class="nav-container">
|
|
<a href="#" class="logo" aria-label="DevLab.lat inicio">DevLab<span>.lat</span></a>
|
|
<button class="hamburger" aria-label="Abrir menú" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<ul class="nav-links" role="menubar">
|
|
<li role="none"><a href="#hero" role="menuitem">Inicio</a></li>
|
|
<li role="none"><a href="#servicios" role="menuitem">Servicios</a></li>
|
|
<li role="none"><a href="#stats" role="menuitem">Estadísticas</a></li>
|
|
<li role="none"><a href="#proyectos" role="menuitem">Proyectos</a></li>
|
|
<li role="none"><a href="#contacto" role="menuitem">Contacto</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<section id="hero" class="hero">
|
|
<canvas id="particles-canvas" aria-hidden="true"></canvas>
|
|
<div class="hero-overlay"></div>
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">DevLab<span>.lat</span></h1>
|
|
<p class="typewriter" data-text="Laboratorio de desarrollo web moderno" aria-label="Laboratorio de desarrollo web moderno"></p>
|
|
<p class="hero-desc">Creamos experiencias digitales innovadoras con tecnología de punta.</p>
|
|
<div class="hero-actions">
|
|
<a href="#servicios" class="btn btn-primary">Descubrir</a>
|
|
<a href="#contacto" class="btn btn-secondary">Contactar</a>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-indicator" aria-hidden="true">
|
|
<span></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="servicios" class="section servicios">
|
|
<div class="section-header reveal">
|
|
<h2>Servicios</h2>
|
|
<p class="section-sub">Transformamos ideas en productos digitales</p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<article class="service-card reveal" data-delay="0">
|
|
<div class="card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
<path d="M12 6v12M6 12h12"/><rect x="2" y="2" width="20" height="20" rx="3"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Desarrollo Web</h3>
|
|
<p>Aplicaciones web modernas con las mejores tecnologías del ecosistema frontend y backend.</p>
|
|
</article>
|
|
<article class="service-card reveal" data-delay="100">
|
|
<div class="card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<h3>UI/UX Design</h3>
|
|
<p>Interfaces intuitivas y experiencias de usuario memorables centradas en las personas.</p>
|
|
</article>
|
|
<article class="service-card reveal" data-delay="200">
|
|
<div class="card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Optimización</h3>
|
|
<p>Rendimiento, SEO y accesibilidad para que tu producto llegue más lejos y más rápido.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="stats" class="section stats">
|
|
<div class="section-header reveal">
|
|
<h2>En números</h2>
|
|
<p class="section-sub">Nuestra trayectoria en datos</p>
|
|
</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-item reveal" data-delay="0">
|
|
<span class="stat-number" data-target="150" data-suffix="+">0</span>
|
|
<span class="stat-label">Proyectos entregados</span>
|
|
</div>
|
|
<div class="stat-item reveal" data-delay="100">
|
|
<span class="stat-number" data-target="48" data-suffix="">0</span>
|
|
<span class="stat-label">Clientes satisfechos</span>
|
|
</div>
|
|
<div class="stat-item reveal" data-delay="200">
|
|
<span class="stat-number" data-target="12" data-suffix="">0</span>
|
|
<span class="stat-label">Años de experiencia</span>
|
|
</div>
|
|
<div class="stat-item reveal" data-delay="300">
|
|
<span class="stat-number" data-target="99" data-suffix="%">0</span>
|
|
<span class="stat-label">Satisfacción</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="proyectos" class="section proyectos">
|
|
<div class="section-header reveal">
|
|
<h2>Proyectos</h2>
|
|
<p class="section-sub">Algunos de nuestros trabajos recientes</p>
|
|
</div>
|
|
<div class="proyectos-grid">
|
|
<article class="proyecto-card reveal" data-delay="0">
|
|
<div class="proyecto-img">
|
|
<div class="proyecto-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
<path d="M3 3h18v18H3zM9 3v18M3 9h18"/>
|
|
</svg>
|
|
</div>
|
|
<div class="proyecto-overlay">
|
|
<h3>Nebula Dashboard</h3>
|
|
<p>Panel de análisis en tiempo real</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="proyecto-card reveal" data-delay="100">
|
|
<div class="proyecto-img">
|
|
<div class="proyecto-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="proyecto-overlay">
|
|
<h3>Chronos App</h3>
|
|
<p>Gestión de tiempo inteligente</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="proyecto-card reveal" data-delay="200">
|
|
<div class="proyecto-img">
|
|
<div class="proyecto-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="proyecto-overlay">
|
|
<h3>Void Platform</h3>
|
|
<p>Infraestructura cloud escalable</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contacto" class="section contacto">
|
|
<div class="contacto-content reveal">
|
|
<h2>¿Listo para construir algo increíble?</h2>
|
|
<p>Trabajemos juntos para llevar tu idea al siguiente nivel.</p>
|
|
<div class="contacto-links">
|
|
<a href="mailto:hola@devlab.lat" class="btn btn-primary contact-btn" aria-label="Enviar correo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/>
|
|
</svg>
|
|
hola@devlab.lat
|
|
</a>
|
|
<a href="https://github.com/devlab" target="_blank" rel="noopener noreferrer" class="btn btn-secondary contact-btn" aria-label="GitHub">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
<a href="https://linkedin.com/company/devlab" target="_blank" rel="noopener noreferrer" class="btn btn-secondary contact-btn" aria-label="LinkedIn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
LinkedIn
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<a href="#" class="logo">DevLab<span>.lat</span></a>
|
|
<p>Laboratorio de desarrollo web moderno.</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<h4>Navegación</h4>
|
|
<ul>
|
|
<li><a href="#hero">Inicio</a></li>
|
|
<li><a href="#servicios">Servicios</a></li>
|
|
<li><a href="#stats">Estadísticas</a></li>
|
|
<li><a href="#proyectos">Proyectos</a></li>
|
|
<li><a href="#contacto">Contacto</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-tech">
|
|
<h4>Stack</h4>
|
|
<ul>
|
|
<li>HTML5 & CSS3</li>
|
|
<li>JavaScript ES2024</li>
|
|
<li>IntersectionObserver</li>
|
|
<li>Canvas API</li>
|
|
<li>CSS Container Queries</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 DevLab.lat — Todos los derechos reservados.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="main.js" defer></script>
|
|
</body>
|
|
</html>
|