Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prototipo Impacto v3 - Slider & Scroll</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
/* Animación de Revelado */
.reveal { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
/* Estilos del Slider */
.slide { display: none; animation: fade 1.5s ease-in-out; }
.slide.active { display: block; }
@keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }
/* Efecto Scroll en Hero */
.scroll-zoom { transition: transform 0.5s ease-out; }
.hero-overlay {
background: linear-gradient(rgba(0,15,40,0.8), rgba(0,15,40,0.4));
}
/* Botón WhatsApp con Pulso */
.wa-pulse { animation: pulse-green 2s infinite; }
@keyframes pulse-green {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
</style>
</head>
<body class="bg-white">
<!-- BOTÓN WHATSAPP -->
<a href="#" class="fixed bottom-6 right-6 z-[100] bg-[#25D366] text-white p-4 rounded-full shadow-2xl wa-pulse flex items-center gap-2">
<span class="hidden md:block font-bold text-xs pl-2">COTIZA AQUÍ 24H</span>
<i class="fab fa-whatsapp text-3xl"></i>
</a>
<!-- SECCIÓN 1: HERO SLIDER CON MOVIMIENTO -->
<header class="relative h-[90vh] md:h-screen overflow-hidden bg-black">
<!-- Slide 1 -->
<div class="slide active absolute inset-0">
<img src="https://images.pexels.com/photos/257736/pexels-photo-257736.jpeg?auto=compress&cs=tinysrgb&w=1920"
class="scroll-zoom absolute inset-0 w-full h-full object-cover opacity-60" alt="Fábrica">
<div class="absolute inset-0 hero-overlay flex items-center px-6 md:px-20">
<div class="max-w-4xl text-white">
<h1 class="text-5xl md:text-8xl font-extrabold leading-none mb-6">NOSOTROS <br> <span class="text-blue-400 italic">FABRICAMOS</span></h1>
<p class="text-xl md:text-2xl font-light opacity-80">Líderes en suministros industriales con más de 20 años de trayectoria.</p>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide absolute inset-0">
<img src="https://images.pexels.com/photos/224924/pexels-photo-224924.jpeg?auto=compress&cs=tinysrgb&w=1920"
class="scroll-zoom absolute inset-0 w-full h-full object-cover opacity-60" alt="Logística">
<div class="absolute inset-0 hero-overlay flex items-center px-6 md:px-20">
<div class="max-w-4xl text-white">
<h1 class="text-5xl md:text-8xl font-extrabold leading-none mb-6">PRESENCIA <br> <span class="text-red-500">NACIONAL</span></h1>
<p class="text-xl md:text-2xl font-light opacity-80">Socio estratégico de instituciones del Estado vía Perú Compras.</p>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="slide absolute inset-0">
<img src="https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920"
class="scroll-zoom absolute inset-0 w-full h-full object-cover opacity-60" alt="Medida">
<div class="absolute inset-0 hero-overlay flex items-center px-6 md:px-20">
<div class="max-w-4xl text-white">
<h1 class="text-5xl md:text-8xl font-extrabold leading-none mb-6">DISEÑO <br> <span class="text-green-400 uppercase">A MEDIDA</span></h1>
<p class="text-xl md:text-2xl font-light opacity-80">Convertimos sus planos y pliegos técnicos en productos reales.</p>
</div>
</div>
</div>
<!-- Indicador de Scroll -->
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-white text-center animate-bounce">
<p class="text-[10px] tracking-[0.3em] uppercase mb-2">Desliza para ver más</p>
<i class="fas fa-chevron-down"></i>
</div>
</header>
<!-- SECCIÓN 2: AUTORIDAD -->
<section class="py-20 bg-gray-50 border-b">
<div class="container mx-auto px-6 text-center">
<div class="flex flex-wrap justify-center items-center gap-16 grayscale opacity-40">
<span class="text-2xl font-black">PERÚ COMPRAS</span>
<span class="text-2xl font-black">OSCE</span>
<span class="text-2xl font-black text-red-600">ESTADO PERUANO</span>
</div>
</div>
</section>
<!-- SECCIÓN 3: CATÁLOGO CON MOVIMIENTO -->
<section class="py-32 container mx-auto px-6">
<div class="mb-20 reveal">
<h2 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-4">Nuestro Catálogo</h2>
<div class="h-1 w-20 bg-blue-600"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-20">
<!-- Producto con imagen estable -->
<div class="reveal">
<div class="overflow-hidden rounded-3xl bg-gray-100 mb-8 aspect-video">
<img src="https://images.pexels.com/photos/6195129/pexels-photo-6195129.jpeg?auto=compress&cs=tinysrgb&w=800"
class="w-full h-full object-cover hover:scale-110 transition-transform duration-1000" alt="Producto">
</div>
<h3 class="text-3xl font-bold mb-4">Suministros de Limpieza Industrial</h3>
<p class="text-gray-500 mb-6">Fabricación de escobas tipo Relima, cepillos y herramientas de alta resistencia para mantenimiento público.</p>
<button class="bg-black text-white px-8 py-3 rounded-full font-bold text-xs tracking-widest hover:bg-blue-600 transition">DETALLES TÉCNICOS</button>
</div>
<div class="reveal" style="transition-delay: 0.2s;">
<div class="overflow-hidden rounded-3xl bg-slate-900 mb-8 aspect-video flex items-center justify-center">
<i class="fas fa-microchip text-7xl text-blue-500 opacity-30"></i>
</div>
<h3 class="text-3xl font-bold mb-4">Fabricación Especializada</h3>
<p class="text-gray-500 mb-6">Desarrollamos prototipos según TDR y pliegos técnicos para licitaciones específicas del estado.</p>
<button class="bg-black text-white px-8 py-3 rounded-full font-bold text-xs tracking-widest hover:bg-blue-600 transition">CONSULTAR DISEÑO</button>
</div>
</div>
</section>
<footer class="bg-slate-900 py-32 text-center text-white">
<p class="text-xs tracking-[0.5em] opacity-40 uppercase">© 2026 Proveedor Industrial Líder</p>
</footer>
<script>
// Lógica del Slider
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].classList.add("active");
setTimeout(showSlides, 5000); // Cambia cada 5 segundos
}
// Lógica de Scroll Reveal y Zoom
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('active');
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Efecto de Zoom al bajar (Scroll Animation)
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const zoomImages = document.querySelectorAll('.scroll-zoom');
zoomImages.forEach(img => {
img.style.transform = `scale(${1 + scrolled * 0.0005})`;
});
});
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
12
Requests
6
Domains
1123KB
Transfer Size
1470KB
Content Size
781.0ms
Dom Content Loaded
996.0ms
First Paint
985.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...