<!DOCTYPE html>
<html lang="nl" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digitaal Museum</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { box-sizing: border-box; }
.museum-frame { border: 2px solid #333; background: linear-gradient(145deg, #1a1a1a, #0f0f0f); }
.image-placeholder { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); border: 1px solid #404040; transition: all 0.3s ease; }
.image-placeholder:hover { border-color: #666; transform: translateY(-2px); }
.text-block { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
</style>
</head>
<body class="bg-black text-white min-h-full font-mono">
<div class="min-h-full p-8">
<div class="max-w-6xl mx-auto">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl md:text-6xl font-bold tracking-wider mb-4 text-gray-100">MURACO MATO</h1>
<div class="w-32 h-0.5 bg-gray-400 mx-auto"></div>
</header>
<!-- Image Gallery -->
<section class="mb-16">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Werk 1 -->
<div class="museum-frame aspect-[4/5] rounded-lg overflow-hidden">
<img src="werk1.jpg" alt="Werk I van Muraco Mato" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="flex items-center justify-center h-full text-gray-400" style="display: none;">
<div class="text-center">
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" /></svg>
<p class="text-sm">Werk I</p>
</div>
</div>
</div>
<!-- Werk 2 -->
<div class="museum-frame aspect-[4/5] rounded-lg overflow-hidden">
<img src="werk2.jpg" alt="Werk II van Muraco Mato" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="flex items-center justify-center h-full text-gray-400" style="display: none;">
<div class="text-center">
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" /></svg>
<p class="text-sm">Werk II</p>
</div>
</div>
</div>
<!-- Werk 3 -->
<div class="museum-frame aspect-[4/5] rounded-lg overflow-hidden">
<img src="werk3.jpg" alt="Werk III van Muraco Mato" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="flex items-center justify-center h-full text-gray-400" style="display: none;">
<div class="text-center">
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" /></svg>
<p class="text-sm">Werk III</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 pt-8 border-t border-gray-800 text-center">
<p class="text-gray-500 text-sm">© 2024 Muraco Mato - Digitale Galerie</p>
</footer>
</div>
</div>
</body>
</html>