¡Hola Mundo!

Esta es mi primera página en Neocities.

!DOCTYPE html> Sitio Web Avanzado

Creamos el Futuro Digital

Diseño web avanzado, interfaces interactivas y experiencias de usuario optimizadas de última generación.

Ver Proyectos

Proyectos Destacados

E-Commerce App

Plataforma de comercio electrónico con pasarela de pagos integrada y carga perezosa.

Dashboard Analytics

Panel de control avanzado con gráficas en tiempo real y arquitectura de microservicios.

AI Platform

Interfaz de usuario optimizada para modelos de lenguaje y generación de imágenes.

Cuéntame tu proyecto

:root { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #1d1d1f; --text-secondary: #6e6e73; --accent: #0071e3; --gradient: linear-gradient(135deg, #0071e3, #c724b1); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Modo oscuro automático basado en el sistema del usuario */ @media (prefers-color-scheme: dark) { :root { --bg-primary: #000000; --bg-secondary: #161617; --text-primary: #f5f5f7; --text-secondary: #86868b; --card-shadow: 0 10px 30px rgba(255, 255, 255, 0.03); } } * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; transition: var(--transition); } /* Navbar Avanzada */ .navbar { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 7%; background: rgba(var(--bg-primary), 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; border-bottom: 1px solid rgba(128, 128, 128, 0.1); } .logo { font-size: 1.5rem; font-weight: 700; } .logo span { color: var(--accent); } .nav-links { display: flex; list-style: none; gap: 30px; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-weight: 500; transition: var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); } /* Hero Section con degradado de texto */ .hero-section { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; } .hero-content h1 { font-size: 4rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; } .text-gradient { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-content p { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 40px ease; } .btn-primary { display: inline-block; padding: 14px 30px; background: var(--accent); color: white; text-decoration: none; border-radius: 30px; font-weight: 600; transition: var(--transition); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 113, 227, 0.3); } /* Sección Proyectos (CSS Grid) */ .projects-section, .contact-section { padding: 100px 7%; background-color: var(--bg-secondary); } h2 { font-size: 2.5rem; margin-bottom: 50px; text-align: center; } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .card { background: var(--bg-primary); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); transition: var(--transition); } .card:hover { transform: translateY(-10px); } .card-image { height: 200px; background: var(--gradient); opacity: 0.8; } .card-content { padding: 25px; } .card-content h3 { margin-bottom: 10px; } .card-content p { color: var(--text-secondary); font-size: 0.95rem; } /* Formulario con Inputs Animados */ .contact-section { background: var(--bg-primary); } .contact-form { max-width: 500px; margin: 0 auto; } .input-group { position: relative; margin-bottom: 30px; } .input-group input { width: 100%; padding: 15px; background: var(--bg-secondary); border: 2px solid transparent; border-radius: 10px; color: var(--text-primary); outline: none; font-size: 1rem; transition: var(--transition); } .input-group input:focus { border-color: var(--accent); } .input-group label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; transition: var(--transition); } .input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label { top: -10px; left: 10px; font-size: 0.8rem; background: var(--bg-primary); padding: 0 5px; color: var(--accent); } .btn-submit { width: 100%; padding: 15px; border: none; background: var(--text-primary); color: var(--bg-primary); border-radius: 10px; font-weight: 600; cursor: pointer; transition: var(--transition); } .btn-submit:hover { opacity: 0.9; } /* Responsive Menu Hamburguesa */ .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .menu-toggle span { width: 25px; height: 3px; background: var(--text-primary); transition: var(--transition); } @media (max-width: 768px) { .menu-toggle { display: flex; } .nav-links { position: fixed; top: 70px; right: -100%; flex-direction: column; background: var(--bg-primary); width: 100%; height: calc(100vh - 70px); text-align: center; padding-top: 50px; transition: var(--transition); } .nav-links.active { right: 0; } .hero-content h1 { font-size: 2.5rem; } }const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); // Animación básica de las líneas del botón const spans = menuToggle.querySelectorAll('span'); spans[0].style.transform = navLinks.classList.contains('active') ? 'rotate(45deg) translate(5px, 5px)' : 'none'; spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1'; spans[2].style.transform = navLinks.classList.contains('active') ? 'rotate(-45deg) translate(6px, -6px)' : 'none'; }); // Resaltar sección activa en el menú al hacer scroll (Intersection Observer) const sections = document.querySelectorAll('header, section'); const navItems = document.querySelectorAll('.nav-links a'); const options = { threshold: 0.6 // Se activa cuando el 60% de la sección es visible }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const id = entry.target.getAttribute('id'); navItems.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === `#${id}`) { link.classList.add('active'); } }); } }); }, options); sections.forEach(section => observer.observe(section)); // Interceptación avanzada del formulario (Simulación de envío) const form = document.getElementById('form-contacto'); form.addEventListener('submit', (e) => { e.preventDefault(); // Evita que la página se recargue const submitBtn = form.querySelector('.btn-submit'); submitBtn.textContent = 'Enviando...'; submitBtn.disabled = true; // Simulamos una petición al servidor (API) setTimeout(() => { alert('¡Mensaje enviado con éxito! (Simulación)'); form.reset(); submitBtn.textContent = 'Enviar Mensaje'; submitBtn.disabled = false; }, 1500); });