Spaces:
Running
Running
File size: 14,988 Bytes
2f691a1 64e7f04 | 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 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location of Heaven</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
.heaven-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.heaven-text {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="min-h-screen overflow-x-hidden">
<!-- Hero Section with Vanta.js Globe -->
<div id="vanta-bg" class="min-h-screen flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="relative z-10 text-center px-4 py-20 max-w-4xl mx-auto">
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-white" data-aos="fade-down">
The <span class="heaven-text">Location</span> of Heaven
</h1>
<p class="text-xl md:text-2xl text-gray-200 mb-10" data-aos="fade-up" data-aos-delay="200">
Discover the celestial coordinates of paradise beyond the stars
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400">
<button class="px-8 py-3 bg-white text-indigo-800 rounded-full font-semibold hover:bg-opacity-90 transition-all">
Explore Now
</button>
<button class="px-8 py-3 border-2 border-white text-white rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all">
<i data-feather="compass" class="inline mr-2"></i> Guide Me
</button>
</div>
</div>
</div>
<!-- Celestial Coordinates Section -->
<section class="py-20 px-4 heaven-gradient">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4" data-aos="fade-up">
Celestial Coordinates
</h2>
<div class="w-24 h-1 bg-white mx-auto mb-6" data-aos="fade-up" data-aos-delay="100"></div>
<p class="text-lg text-gray-200 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
The precise location of heaven has been mapped across cultures and religions throughout history
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Christian Heaven -->
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8 text-white" data-aos="fade-up">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
<i data-feather="cross" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-3">Christian Heaven</h3>
<p class="text-gray-200 mb-4">Located in the highest of the celestial spheres, beyond the firmament</p>
<div class="text-sm font-mono bg-black bg-opacity-30 p-3 rounded">
<span class="text-indigo-300">Coordinates:</span> RA 17h 45m 40.04s | Dec -29° 00' 28.1"
</div>
</div>
<!-- Islamic Jannah -->
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8 text-white" data-aos="fade-up" data-aos-delay="200">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
<i data-feather="moon" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-3">Islamic Jannah</h3>
<p class="text-gray-200 mb-4">Above the seven heavens, beneath the throne of Allah</p>
<div class="text-sm font-mono bg-black bg-opacity-30 p-3 rounded">
<span class="text-indigo-300">Coordinates:</span> RA 18h 03m 50.88s | Dec +30° 09' 10.8"
</div>
</div>
<!-- Hindu Svarga -->
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8 text-white" data-aos="fade-up" data-aos-delay="400">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
<i data-feather="sun" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-3">Hindu Svarga</h3>
<p class="text-gray-200 mb-4">On Mount Meru, the axis of the universe</p>
<div class="text-sm font-mono bg-black bg-opacity-30 p-3 rounded">
<span class="text-indigo-300">Coordinates:</span> RA 12h 51m 26.00s | Dec +27° 07' 42.0"
</div>
</div>
</div>
</div>
</section>
<!-- Astronomical Visualization -->
<section class="py-20 bg-black text-white">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" data-aos="fade-up">
Astronomical Visualization
</h2>
<div class="w-24 h-1 bg-indigo-500 mx-auto mb-6" data-aos="fade-up" data-aos-delay="100"></div>
<p class="text-lg text-gray-400 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
Modern astronomy attempts to map the celestial locations described in ancient texts
</p>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div data-aos="fade-right">
<div class="bg-gray-900 rounded-xl overflow-hidden">
<img src="http://static.photos/space/1024x576/42" alt="Celestial Map" class="w-full h-auto">
</div>
</div>
<div data-aos="fade-left" data-aos-delay="200">
<h3 class="text-2xl font-bold mb-4">Mapping the Divine</h3>
<p class="text-gray-400 mb-6">
Using advanced telescopes and celestial mapping technology, researchers have identified potential
locations that align with ancient descriptions of heaven across various cultures.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
<i data-feather="check" class="w-4 h-4 text-white"></i>
</div>
</div>
<p class="ml-3 text-gray-300">Alignment with ancient star charts</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
<i data-feather="check" class="w-4 h-4 text-white"></i>
</div>
</div>
<p class="ml-3 text-gray-300">Cosmic microwave background analysis</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
<i data-feather="check" class="w-4 h-4 text-white"></i>
</div>
</div>
<p class="ml-3 text-gray-300">Quantum entanglement patterns</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Journey to Heaven Section -->
<section class="py-20 bg-gradient-to-b from-indigo-900 to-purple-900 text-white">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" data-aos="fade-up">
Begin Your Journey
</h2>
<div class="w-24 h-1 bg-white mx-auto mb-6" data-aos="fade-up" data-aos-delay="100"></div>
<p class="text-lg text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
Prepare for the ultimate voyage to discover the location of heaven
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8" data-aos="fade-up">
<div class="text-5xl font-bold text-indigo-300 mb-4">01</div>
<h3 class="text-xl font-bold mb-3">Spiritual Preparation</h3>
<p class="text-gray-300 mb-6">Purify your soul through meditation and virtuous living</p>
<button class="px-6 py-2 border border-white text-white rounded-full text-sm font-medium hover:bg-white hover:bg-opacity-10 transition-all">
Learn More
</button>
</div>
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8" data-aos="fade-up" data-aos-delay="200">
<div class="text-5xl font-bold text-indigo-300 mb-4">02</div>
<h3 class="text-xl font-bold mb-3">Astronomical Study</h3>
<p class="text-gray-300 mb-6">Understand the celestial coordinates and navigation</p>
<button class="px-6 py-2 border border-white text-white rounded-full text-sm font-medium hover:bg-white hover:bg-opacity-10 transition-all">
Learn More
</button>
</div>
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8" data-aos="fade-up" data-aos-delay="400">
<div class="text-5xl font-bold text-indigo-300 mb-4">03</div>
<h3 class="text-xl font-bold mb-3">Transcendental Voyage</h3>
<p class="text-gray-300 mb-6">Embark on the journey beyond physical constraints</p>
<button class="px-6 py-2 border border-white text-white rounded-full text-sm font-medium hover:bg-white hover:bg-opacity-10 transition-all">
Learn More
</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-white py-12 px-4">
<div class="max-w-6xl mx-auto">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Location of Heaven</h3>
<p class="text-gray-400">
Exploring the celestial coordinates of paradise across cultures and religions.
</p>
</div>
<div>
<h4 class="font-bold mb-4">Explorations</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Christian Heaven</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Islamic Jannah</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Hindu Svarga</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Buddhist Pure Lands</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Star Charts</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Sacred Texts</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Expeditions</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="youtube"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
<p>© 2023 Location of Heaven. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js globe
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x667eea,
backgroundColor: 0x0,
size: 1.00
});
// Initialize AOS animation
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html>
|