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>Proveedores Ortiz - Líderes en Fabricación Industrial</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; }
.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); }
.slide { display: none; animation: fade 1.2s ease-in-out; }
.slide.active { display: block; }
@keyframes fade { from { opacity: 0.5; } to { opacity: 1; } }
.hero-overlay { background: linear-gradient(rgba(0,25,60,0.9), rgba(0,25,60,0.5)); }
.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-[#fcfcfc] text-slate-900">
<!-- BOTÓN WHATSAPP 24H -->
<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 group">
<span class="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 font-bold text-xs whitespace-nowrap">COTIZA AQUÍ 24H</span>
<i class="fab fa-whatsapp text-3xl"></i>
</a>
<!-- HEADER / NAVIGATION -->
<nav class="absolute top-0 w-full z-50 py-6 px-6 md:px-20 flex justify-between items-center text-white">
<div class="text-2xl font-extrabold tracking-tighter">
PROVEEDORES <span class="text-blue-400">ORTIZ</span>
</div>
<div class="hidden md:flex gap-8 text-xs font-bold tracking-widest uppercase">
<a href="#nosotros" class="hover:text-blue-400 transition">Nosotros</a>
<a href="#catalogo" class="hover:text-blue-400 transition">Productos</a>
<a href="#contacto" class="hover:text-blue-400 transition">Contacto</a>
</div>
</nav>
<!-- SLIDER DE ALTO IMPACTO -->
<header class="relative h-screen overflow-hidden bg-slate-900">
<!-- 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="absolute inset-0 w-full h-full object-cover opacity-50" alt="Fábrica Ortiz">
<div class="absolute inset-0 hero-overlay flex items-center px-6 md:px-20">
<div class="max-w-4xl text-white">
<span class="bg-blue-600 px-3 py-1 text-[10px] font-black tracking-[0.3em] uppercase mb-6 inline-block">Socio Estratégico Estatal</span>
<h1 class="text-6xl md:text-8xl font-extrabold mb-6 leading-none">PROVEEDORES <br> <span class="text-blue-400">ORTIZ</span></h1>
<p class="text-xl md:text-2xl font-light border-l-4 border-blue-500 pl-6">Líderes en fabricación y distribución a medida para el Estado Peruano.</p>
</div>
</div>
</div>
<!-- Slide 2 -->
<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="absolute inset-0 w-full h-full object-cover opacity-50" alt="Producción Ortiz">
<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-6xl md:text-8xl font-extrabold mb-6">CALIDAD <br> <span class="text-red-500">A MEDIDA</span></h1>
<p class="text-xl md:text-2xl font-light border-l-4 border-red-500 pl-6">Fabricamos productos bajo pliegos técnicos específicos con entrega nacional.</p>
</div>
</div>
</div>
</header>
<!-- AUTORIDAD / PERÚ COMPRAS -->
<section class="py-12 bg-white border-b">
<div class="container mx-auto px-6 text-center">
<p class="text-[10px] font-black text-gray-400 uppercase tracking-[0.5em] mb-8">Proveedores autorizados por</p>
<div class="flex flex-wrap justify-center items-center gap-12 md:gap-24 opacity-40 grayscale hover:opacity-100 hover:grayscale-0 transition-all">
<span class="text-2xl font-black">PERÚ COMPRAS</span>
<span class="text-2xl font-black italic">RNP VIGENTE</span>
<span class="text-2xl font-black">ESTADO PERUANO</span>
</div>
</div>
</section>
<!-- PRODUCTOS DESTACADOS -->
<section id="catalogo" 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 italic tracking-tighter">Nuestra Fabricación</h2>
<p class="text-gray-500 mt-4 max-w-xl text-lg">En <span class="font-bold text-slate-900">Proveedores Ortiz</span>, cada producto pasa por un riguroso control de calidad industrial.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<!-- Producto 1 -->
<div class="bg-white p-6 rounded-3xl shadow-sm hover:shadow-2xl transition-all border border-gray-50 reveal">
<div class="h-72 rounded-2xl overflow-hidden mb-6">
<img src="https://proserlim.pe/wp-content/uploads/2021/08/escoba-paja-negra.jpg" class="w-full h-full object-cover transition-transform hover:scale-110 duration-700" alt="Escoba Ortiz">
</div>
<h3 class="font-bold text-2xl mb-2 italic">Línea de Limpieza Técnica</h3>
<p class="text-gray-500 text-sm mb-6">Escobas tipo Relima y suministros reforzados para mantenimiento de instituciones.</p>
<button class="w-full py-4 border-2 border-slate-900 font-bold text-xs tracking-widest hover:bg-slate-900 hover:text-white transition">SOLICITAR COTIZACIÓN</button>
</div>
<!-- Producto 2 -->
<div class="bg-white p-6 rounded-3xl shadow-sm hover:shadow-2xl transition-all border border-gray-50 reveal" style="transition-delay: 0.2s;">
<div class="h-72 rounded-2xl overflow-hidden mb-6 bg-slate-900 flex flex-col items-center justify-center text-blue-400">
<i class="fas fa-tools text-6xl mb-4"></i>
<span class="text-xs font-bold uppercase tracking-widest">Taller Propio</span>
</div>
<h3 class="font-bold text-2xl mb-2 italic">Proyectos Especiales</h3>
<p class="text-gray-500 text-sm mb-6">Desarrollamos soluciones a medida según los requerimientos técnicos de su licitación.</p>
<button class="w-full py-4 border-2 border-slate-900 font-bold text-xs tracking-widest hover:bg-slate-900 hover:text-white transition">CONSULTAR DISEÑO</button>
</div>
<!-- Producto 3 -->
<div class="bg-white p-6 rounded-3xl shadow-sm hover:shadow-2xl transition-all border border-gray-50 reveal" style="transition-delay: 0.4s;">
<div class="h-72 rounded-2xl overflow-hidden mb-6">
<img src="https://images.pexels.com/photos/4481259/pexels-photo-4481259.jpeg?auto=compress&cs=tinysrgb&w=800" class="w-full h-full object-cover" alt="Logística Ortiz">
</div>
<h3 class="font-bold text-2xl mb-2 italic">Abastecimiento Masivo</h3>
<p class="text-gray-500 text-sm mb-6">Capacidad logística de Proveedores Ortiz para entregas masivas en todo el Perú.</p>
<button class="w-full py-4 border-2 border-slate-900 font-bold text-xs tracking-widest hover:bg-slate-900 hover:text-white transition">VER STOCK</button>
</div>
</div>
</section>
<!-- METODOLOGÍA -->
<section id="nosotros" class="py-32 bg-slate-900 text-white">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-24 items-center">
<div class="reveal">
<h2 class="text-5xl font-extrabold mb-10 italic">Presencia Ortiz</h2>
<div class="space-y-10">
<div class="flex gap-6">
<span class="text-blue-400 font-black text-4xl">01</span>
<div>
<h4 class="font-bold text-xl mb-2">Visión Corporativa</h4>
<p class="text-gray-400">Somos proveedores líderes con una visión clara de servicio al Estado.</p>
</div>
</div>
<div class="flex gap-6">
<span class="text-blue-400 font-black text-4xl">02</span>
<div>
<h4 class="font-bold text-xl mb-2">Capacidad de Fábrica</h4>
<p class="text-gray-400">Nuestro taller nos permite crear productos a medida sin intermediarios.</p>
</div>
</div>
<div class="flex gap-6">
<span class="text-blue-400 font-black text-4xl">03</span>
<div>
<h4 class="font-bold text-xl mb-2">Garantía Perú Compras</h4>
<p class="text-gray-400">Cumplimos con todos los plazos y normas técnicas exigidas.</p>
</div>
</div>
</div>
</div>
<div class="bg-blue-600 p-16 rounded-[40px] reveal">
<h3 class="text-4xl font-bold mb-6 italic text-white">Liderazgo que genera confianza.</h3>
<p class="text-blue-100 text-lg leading-relaxed mb-10">En Proveedores Ortiz, entendemos que cada licitación es un compromiso con el desarrollo del país.</p>
<button class="bg-white text-blue-600 px-10 py-4 rounded-full font-bold uppercase text-xs tracking-[0.2em] shadow-xl">Contactar ahora</button>
</div>
</div>
</div>
</section>
<footer class="py-20 text-center bg-white">
<div class="text-xl font-black mb-4">PROVEEDORES <span class="text-blue-600">ORTIZ</span></div>
<p class="text-[10px] font-bold text-gray-300 uppercase tracking-[0.6em]">Especialistas en Licitaciones Estatales</p>
</footer>
<script>
// Lógica de Slider
let slideIndex = 0;
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, 4500);
}
showSlides();
// Lógica de Reveal
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));
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
12
Requests
7
Domains
871KB
Transfer Size
1218KB
Content Size
550.0ms
Dom Content Loaded
704.0ms
First Paint
1,069.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...