|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>A Healthy World Without Nuclear Threats</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.earth-spin { |
|
|
animation: spin 30s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
.radioactive-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.7; } |
|
|
50% { opacity: 0.3; } |
|
|
100% { opacity: 0.7; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="text-green-600"> |
|
|
<i class="fas fa-globe-americas text-3xl"></i> |
|
|
</div> |
|
|
<span class="font-semibold text-gray-900 text-xl">NuclearFree World</span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#about" class="text-gray-700 hover:text-green-600 transition">About</a> |
|
|
<a href="#solutions" class="text-gray-700 hover:text-green-600 transition">Solutions</a> |
|
|
<a href="#impact" class="text-gray-700 hover:text-green-600 transition">Impact</a> |
|
|
<a href="#action" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition">Take Action</a> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="text-gray-700 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white py-20"> |
|
|
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">A Healthy World Without Nuclear Weapons</h1> |
|
|
<p class="text-xl mb-8">Join the movement to eliminate nuclear threats and create a safer, cleaner future for generations to come.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-green-600 px-6 py-3 rounded-md font-semibold hover:bg-gray-100 transition">Sign the Petition</button> |
|
|
<button class="border-2 border-white px-6 py-3 rounded-md font-semibold hover:bg-white hover:text-green-600 transition">Learn More</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.pixabay.com/photo/2016/08/24/14/29/earth-1617121_1280.jpg" alt="Earth" class="w-64 h-64 earth-spin rounded-full shadow-xl"> |
|
|
<div class="absolute -bottom-5 -right-5 bg-red-500 text-white p-3 rounded-full shadow-lg"> |
|
|
<i class="fas fa-ban text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">The Nuclear Threat in Numbers</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-lg text-center"> |
|
|
<div class="text-red-500 mb-4"> |
|
|
<i class="fas fa-bomb text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-4xl font-bold mb-2">13,080</h3> |
|
|
<p class="text-gray-600">Nuclear warheads in global stockpiles</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-8 rounded-lg text-center"> |
|
|
<div class="text-yellow-500 mb-4"> |
|
|
<i class="fas fa-radiation-alt text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-4xl font-bold mb-2">250,000+</h3> |
|
|
<p class="text-gray-600">Tons of high-level radioactive waste worldwide</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-8 rounded-lg text-center"> |
|
|
<div class="text-green-500 mb-4"> |
|
|
<i class="fas fa-clock text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-4xl font-bold mb-2">100,000</h3> |
|
|
<p class="text-gray-600">Years some nuclear waste remains hazardous</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
|
<h2 class="text-3xl font-bold mb-6">Why We Need a Nuclear-Free Future</h2> |
|
|
<p class="text-gray-700 mb-4">Nuclear weapons pose an existential threat to humanity, while nuclear waste creates environmental hazards that last for millennia. The production, testing, and potential use of these weapons have devastating consequences for human health and the planet.</p> |
|
|
<p class="text-gray-700 mb-6">A world without nuclear weapons is not only possible but necessary for our survival. By transitioning to clean energy alternatives and promoting global disarmament, we can create a safer, healthier future.</p> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-heartbeat text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-gray-700">Reduced cancer rates from radioactive contamination</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-lg"> |
|
|
<div class="relative h-64 mb-4 overflow-hidden rounded-md"> |
|
|
<img src="https://cdn.pixabay.com/photo/2017/01/31/22/32/nuclear-power-plant-2028033_1280.jpg" alt="Nuclear power plant" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-red-500 bg-opacity-30 flex items-center justify-center"> |
|
|
<div class="bg-white p-3 rounded-full radioactive-pulse"> |
|
|
<i class="fas fa-radiation-alt text-red-500 text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">The Hidden Dangers</h3> |
|
|
<p class="text-gray-600">Nuclear facilities and waste storage sites pose long-term environmental and health risks, even during peacetime operations.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="solutions" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4">Pathways to a Nuclear-Free World</h2> |
|
|
<p class="text-xl text-gray-600 text-center mb-12 max-w-3xl mx-auto">Practical solutions that can help us eliminate nuclear threats and manage existing waste responsibly</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover transition duration-300"> |
|
|
<div class="h-48 bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-solar-panel text-6xl text-yellow-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-3">Renewable Energy</h3> |
|
|
<p class="text-gray-600 mb-4">Transitioning to solar, wind, and other renewable energy sources reduces reliance on nuclear power and its associated waste.</p> |
|
|
<a href="#" class="text-green-600 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover transition duration-300"> |
|
|
<div class="h-48 bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-handshake text-6xl text-blue-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-3">Global Treaties</h3> |
|
|
<p class="text-gray-600 mb-4">Strengthening international agreements like the Treaty on the Prohibition of Nuclear Weapons to eliminate stockpiles.</p> |
|
|
<a href="#" class="text-green-600 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover transition duration-300"> |
|
|
<div class="h-48 bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-recycle text-6xl text-purple-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-3">Waste Management</h3> |
|
|
<p class="text-gray-600 mb-4">Developing advanced technologies to safely contain and potentially recycle existing nuclear waste materials.</p> |
|
|
<a href="#" class="text-green-600 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="impact" class="py-16 bg-green-600 text-white"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">The Benefits of a Nuclear-Free World</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white text-green-600 p-3 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-leaf text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Environmental Restoration</h3> |
|
|
<p>Eliminating nuclear testing and waste storage would allow contaminated ecosystems to recover, protecting biodiversity and reducing radiation exposure in food chains.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white text-green-600 p-3 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-shield-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Global Security</h3> |
|
|
<p>Reducing nuclear arsenals decreases the risk of accidental launches, terrorist acquisition, and geopolitical tensions escalating to nuclear war.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white text-green-600 p-3 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-heart text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Public Health</h3> |
|
|
<p>Communities near nuclear facilities and test sites would experience lower rates of cancer, birth defects, and other radiation-related illnesses.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white text-green-600 p-3 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-coins text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Economic Savings</h3> |
|
|
<p>Billions currently spent on nuclear weapons maintenance and waste storage could be redirected to healthcare, education, and clean energy development.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="action" class="py-20 bg-white"> |
|
|
<div class="max-w-4xl mx-auto px-4 text-center"> |
|
|
<div class="bg-gray-50 rounded-xl p-8 md:p-12 shadow-lg"> |
|
|
<h2 class="text-3xl font-bold mb-6">Join the Movement for a Nuclear-Free Future</h2> |
|
|
<p class="text-xl text-gray-600 mb-8">Your voice matters. Together, we can pressure governments and corporations to prioritize human health and environmental safety over nuclear weapons and dangerous waste.</p> |
|
|
|
|
|
<div class="max-w-md mx-auto"> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
<div> |
|
|
<input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
<div> |
|
|
<select class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
<option>Select country</option> |
|
|
<option>United States</option> |
|
|
<option>United Kingdom</option> |
|
|
<option>Canada</option> |
|
|
<option>Australia</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-green-700 transition">Join Now</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
|
|
<button class="flex items-center justify-center space-x-2 bg-blue-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-700 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
<span>Share on Twitter</span> |
|
|
</button> |
|
|
<button class="flex items-center justify-center space-x-2 bg-blue-800 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-900 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
<span>Share on Facebook</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">NuclearFree World</h3> |
|
|
<p class="text-gray-400">Working towards a healthy planet free from nuclear threats and radioactive waste.</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Learn More</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Nuclear Weapons Facts</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Waste Disposal Issues</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Alternative Energy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Success Stories</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Get Involved</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Volunteer</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Donate</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Organize Events</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact Officials</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Newsletter</h4> |
|
|
<p class="text-gray-400 mb-4">Stay updated on our progress and campaigns.</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full"> |
|
|
<button class="bg-green-600 text-white px-4 py-2 rounded-r-md hover:bg-green-700"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 NuclearFree World. All rights reserved. | <a href="#" class="hover:text-white">Privacy Policy</a> | <a href="#" class="hover:text-white">Terms of Service</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('.md\\:hidden button'); |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
|
|
|
alert('Mobile menu would open here in a complete implementation'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Enjii/https-github-com-shirendev1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
