File size: 7,225 Bytes
ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 f5c55d7 ded4c00 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery - Dimensional Drop</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
.gallery-item {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.gallery-item:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.25);
}
.parallax-bg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body class="bg-black text-white font-sans overflow-x-hidden" id="vanta-bg">
<header class="fixed w-full z-50">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold tracking-tighter">Dimensional<span class="text-blue-400">Drop</span></div>
<div class="hidden md:flex space-x-8">
<a href="index.html#about" class="hover:text-blue-400 transition">About</a>
<a href="index.html#features" class="hover:text-blue-400 transition">Features</a>
<a href="gallery.html" class="hover:text-blue-400 transition">Gallery</a>
<a href="contact.html" class="hover:text-blue-400 transition">Contact</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</nav>
</header>
<main class="pt-20">
<section class="py-20">
<div class="container mx-auto px-6">
<h1 class="text-4xl md:text-6xl font-bold mb-12 text-center">Our <span class="text-blue-400">3D Gallery</span></h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Gallery Item 1 -->
<div class="gallery-item bg-black/70 backdrop-blur-sm rounded-xl overflow-hidden border border-blue-400/20">
<img src="http://static.photos/technology/640x360/1" alt="3D Design 1" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-blue-400">Digital Universe</h3>
<p class="opacity-80">Exploring the boundaries of virtual space with dynamic lighting.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="gallery-item bg-black/70 backdrop-blur-sm rounded-xl overflow-hidden border border-blue-400/20">
<img src="http://static.photos/abstract/640x360/2" alt="3D Design 2" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-blue-400">Abstract Dimensions</h3>
<p class="opacity-80">Geometric patterns creating depth and movement.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="gallery-item bg-black/70 backdrop-blur-sm rounded-xl overflow-hidden border border-blue-400/20">
<img src="http://static.photos/futuristic/640x360/3" alt="3D Design 3" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-blue-400">Futuristic Portal</h3>
<p class="opacity-80">A gateway to immersive digital experiences.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="gallery-item bg-black/70 backdrop-blur-sm rounded-xl overflow-hidden border border-blue-400/20">
<img src="http://static.photos/scifi/640x360/4" alt="3D Design 4" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-blue-400">Sci-Fi Landscape</h3>
<p class="opacity-80">Otherworldly environments with realistic textures.</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="gallery-item bg-black/70 backdrop-blur-sm rounded-xl overflow-hidden border border-blue-400/20">
<img src="http://static.photos/geometry/640x360/5" alt="3D Design 5" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-blue-400">Geometric Wonder</h3>
<p class="opacity-80">Complex structures with clean, mathematical precision.</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="gallery-item bg-black/70 backdrop-blur-sm rounded-xl overflow-hidden border border-blue-400/20">
<img src="http://static.photos/minimal/640x360/6" alt="3D Design 6" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-blue-400">Minimal Space</h3>
<p class="opacity-80">Simplicity meeting depth in a harmonious composition.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="py-12 border-t border-blue-900/30">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-xl font-bold tracking-tighter mb-4 md:mb-0">Dimensional<span class="text-blue-400">Drop</span></div>
<div class="text-sm opacity-70">MADE WITH PEACH WORLDS</div>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js globe background
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x0
});
// Initialize feather icons
feather.replace();
// Simple scroll animation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html> |