|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Arabian Post - Futuristic News Platform</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Montserrat:wght@300;600&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #FFD700; |
|
|
--secondary: #C0A080; |
|
|
--dark: #121212; |
|
|
--accent: #E25822; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: var(--dark); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.futuristic-text { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, var(--primary), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); |
|
|
} |
|
|
|
|
|
.news-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(255, 215, 0, 0.1), 0 10px 10px -5px rgba(255, 215, 0, 0.04); |
|
|
} |
|
|
|
|
|
.hover-scale { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.hover-scale:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.border-glow { |
|
|
border: 1px solid rgba(255, 215, 0, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.border-glow:hover { |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); |
|
|
} |
|
|
|
|
|
#vanta-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.animated-underline { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.animated-underline::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
background-color: var(--primary); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.animated-underline:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.parallax { |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
<div id="vanta-bg"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<span class="futuristic-text text-2xl font-bold gradient-text">ARABIAN POST</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#" class="px-3 py-2 text-sm font-medium text-white hover:text-yellow-400 animated-underline">Home</a> |
|
|
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">News</a> |
|
|
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Business</a> |
|
|
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Technology</a> |
|
|
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Culture</a> |
|
|
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Subscribe</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="p-2 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<i data-feather="search"></i> |
|
|
</button> |
|
|
<button class="md:hidden p-2 ml-2 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative pt-32 pb-20 md:pt-40 md:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-duration="1000"> |
|
|
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 futuristic-text glow"> |
|
|
<span class="gradient-text">THE FUTURE</span> OF NEWS |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-10"> |
|
|
Breaking news from Dubai and beyond. Experience journalism reimagined for the digital age. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="px-8 py-4 bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-lg font-bold hover:opacity-90 transition-all duration-300 transform hover:scale-105 border-glow"> |
|
|
Latest Headlines |
|
|
</button> |
|
|
<button class="px-8 py-4 bg-transparent border border-yellow-600 text-yellow-400 rounded-lg font-bold hover:bg-yellow-600 hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105"> |
|
|
Subscribe Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="bg-yellow-600 text-black py-3 overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center"> |
|
|
<span class="font-bold mr-4 whitespace-nowrap">BREAKING:</span> |
|
|
<div class="relative flex-1 overflow-hidden"> |
|
|
<div class="inline-block whitespace-nowrap animate-marquee"> |
|
|
<span class="mx-4">• UAE announces new economic initiatives to boost digital transformation •</span> |
|
|
<span class="mx-4">• Dubai Expo 2025 preparations enter final phase •</span> |
|
|
<span class="mx-4">• Middle East tech startups raise record $1.5B in Q3 •</span> |
|
|
<span class="mx-4">• New archaeological discovery in Saudi Arabia rewrites regional history •</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center futuristic-text" data-aos="fade-up"> |
|
|
<span class="gradient-text">FEATURED</span> STORIES |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="news-card bg-gray-900 rounded-xl overflow-hidden border-glow transition-all duration-300 hover:border-yellow-500" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/dubai/1024x576/1" alt="Dubai Skyline" class="w-full h-full object-cover hover-scale transition-transform duration-500"> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute top-4 left-4 bg-yellow-600 text-black px-3 py-1 rounded-full text-xs font-bold"> |
|
|
EXCLUSIVE |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-400 mb-2"> |
|
|
<span>POLITICS</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>2 HOURS AGO</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 hover:text-yellow-400 transition-colors duration-200"> |
|
|
UAE Unveils Ambitious 2050 Sustainability Plan |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
The government announces revolutionary green initiatives that will transform the country's energy landscape. |
|
|
</p> |
|
|
<div class="flex items-center text-yellow-400"> |
|
|
<span class="text-sm font-medium">Read More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-gray-900 rounded-xl overflow-hidden border-glow transition-all duration-300 hover:border-yellow-500" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/technology/1024x576/2" alt="Tech Innovation" class="w-full h-full object-cover hover-scale transition-transform duration-500"> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute top-4 left-4 bg-red-600 text-white px-3 py-1 rounded-full text-xs font-bold"> |
|
|
BREAKING |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-400 mb-2"> |
|
|
<span>TECHNOLOGY</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>5 HOURS AGO</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 hover:text-yellow-400 transition-colors duration-200"> |
|
|
Dubai-Based AI Startup Raises $150M Series B |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
The company's revolutionary language model could transform how businesses interact with customers across the Middle East. |
|
|
</p> |
|
|
<div class="flex items-center text-yellow-400"> |
|
|
<span class="text-sm font-medium">Read More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-gray-900 rounded-xl overflow-hidden border-glow transition-all duration-300 hover:border-yellow-500" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/culture/1024x576/3" alt="Cultural Event" class="w-full h-full object-cover hover-scale transition-transform duration-500"> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-bold"> |
|
|
ANALYSIS |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-400 mb-2"> |
|
|
<span>CULTURE</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>1 DAY AGO</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 hover:text-yellow-400 transition-colors duration-200"> |
|
|
How Contemporary Arab Artists Are Redefining Global Art Scene |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
From Dubai to New York, a new generation of Middle Eastern creatives is making waves with boundary-pushing work. |
|
|
</p> |
|
|
<div class="flex items-center text-yellow-400"> |
|
|
<span class="text-sm font-medium">Read More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12" data-aos="fade-up"> |
|
|
<button class="px-8 py-3 bg-transparent border border-yellow-600 text-yellow-400 rounded-lg font-bold hover:bg-yellow-600 hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105"> |
|
|
View All Stories |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2" data-aos="fade-right"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 futuristic-text"> |
|
|
<span class="gradient-text">VIDEO</span> SPOTLIGHT |
|
|
</h2> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Immerse yourself in our premium video content, bringing you closer to the stories that matter with stunning visuals and in-depth reporting. |
|
|
</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold text-white">Exclusive Interviews</h3> |
|
|
<p class="text-gray-400">Direct access to regional leaders and innovators</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold text-white">360° Documentaries</h3> |
|
|
<p class="text-gray-400">Immersive explorations of Middle Eastern culture</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold text-white">Data Visualizations</h3> |
|
|
<p class="text-gray-400">Complex stories made simple through animation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 relative" data-aos="fade-left"> |
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-xl overflow-hidden border-2 border-gray-700 hover:border-yellow-500 transition-all duration-300"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-yellow-600 bg-opacity-80 flex items-center justify-center hover:scale-110 transition-transform duration-300 cursor-pointer"> |
|
|
<i data-feather="play" class="w-10 h-10 text-white ml-1"></i> |
|
|
</div> |
|
|
</div> |
|
|
<img src="http://static.photos/dubai/1024x576/4" alt="Video Thumbnail" class="w-full h-full object-cover opacity-70 hover:opacity-50 transition-opacity duration-300"> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<h3 class="text-xl font-bold">Inside Dubai's Mega Project: The Mars Science City</h3> |
|
|
<span class="text-yellow-400 text-sm">12:45</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-yellow-900 to-yellow-700"> |
|
|
<div class="max-w-4xl mx-auto text-center" data-aos="zoom-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black futuristic-text"> |
|
|
STAY AHEAD WITH OUR <span class="gradient-text">NEWSLETTER</span> |
|
|
</h2> |
|
|
<p class="text-xl text-black mb-8"> |
|
|
Get exclusive content, early access to stories, and insights from our editors delivered straight to your inbox. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-6 py-4 rounded-lg bg-black bg-opacity-20 text-white placeholder-gray-300 border border-black border-opacity-30 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50"> |
|
|
<button class="px-8 py-4 bg-black text-yellow-400 rounded-lg font-bold hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105"> |
|
|
Subscribe |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-sm text-black mt-4 opacity-80"> |
|
|
We respect your privacy. Unsubscribe at any time. |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black text-gray-400 py-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-6 futuristic-text gradient-text">ARABIAN POST</h3> |
|
|
<p class="mb-6"> |
|
|
The leading digital news platform in the Middle East, bringing you fearless journalism and innovative storytelling. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300"> |
|
|
<i data-feather="youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-white mb-6">SECTIONS</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Politics</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Business</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Technology</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Culture</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Opinion</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Sports</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-white mb-6">COMPANY</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">About Us</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Careers</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Contact</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Ethics Policy</a></li> |
|
|
<li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Diversity Report</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-white mb-6">LOCATIONS</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i> |
|
|
<span>Dubai Media City, UAE</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i> |
|
|
<span>Riyadh, Saudi Arabia</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i> |
|
|
<span>Doha, Qatar</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i> |
|
|
<span>Cairo, Egypt</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p>© 2023 Arabian Post. All rights reserved.</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="hover:text-yellow-400 transition-colors duration-200">Privacy Policy</a> |
|
|
<a href="#" class="hover:text-yellow-400 transition-colors duration-200">Terms of Service</a> |
|
|
<a href="#" class="hover:text-yellow-400 transition-colors duration-200">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xffd700, |
|
|
backgroundColor: 0x121212, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = ` |
|
|
@keyframes marquee { |
|
|
0% { transform: translateX(0); } |
|
|
100% { transform: translateX(-50%); } |
|
|
} |
|
|
.animate-marquee { |
|
|
display: inline-block; |
|
|
animation: marquee 30s linear infinite; |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.news-card').forEach(card => { |
|
|
card.addEventListener('mousemove', (e) => { |
|
|
const rect = card.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
|
|
|
card.style.setProperty('--mouse-x', `${x}px`); |
|
|
card.style.setProperty('--mouse-y', `${y}px`); |
|
|
|
|
|
const glow = document.createElement('div'); |
|
|
glow.className = 'glow-effect'; |
|
|
glow.style.left = `${x}px`; |
|
|
glow.style.top = `${y}px`; |
|
|
card.appendChild(glow); |
|
|
|
|
|
setTimeout(() => { |
|
|
glow.remove(); |
|
|
}, 1000); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
