|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>The Wonderful World of Poop</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> |
|
|
<style> |
|
|
.poop-bg { |
|
|
background-color: #8B4513; |
|
|
} |
|
|
.poop-text { |
|
|
color: #5D4037; |
|
|
} |
|
|
.poop-card { |
|
|
background-color: #D7CCC8; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.poop-btn { |
|
|
background-color: #6D4C41; |
|
|
color: white; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.poop-btn:hover { |
|
|
background-color: #5D4037; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-amber-50"> |
|
|
|
|
|
<nav class="poop-bg text-white py-4 px-6 shadow-lg"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="droplet" class="w-8 h-8"></i> |
|
|
<span class="text-2xl font-bold">PoopFacts</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="hover:text-amber-200">Home</a> |
|
|
<a href="#" class="hover:text-amber-200">Types</a> |
|
|
<a href="#" class="hover:text-amber-200">Health</a> |
|
|
<a href="#" class="hover:text-amber-200">History</a> |
|
|
<a href="#" class="hover:text-amber-200">Fun Facts</a> |
|
|
</div> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="poop-bg text-white py-20 px-6"> |
|
|
<div class="container mx-auto text-center" data-aos="fade-up"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Everything You Never Knew About Poop</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">From biology to culture, we've got the scoop on poop!</p> |
|
|
<button class="poop-btn px-8 py-3 rounded-full text-lg font-semibold shadow-lg"> |
|
|
<i data-feather="arrow-right" class="inline mr-2"></i> Explore Now |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center poop-text mb-12" data-aos="fade-up">Fascinating Poop Facts</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="poop-card p-6" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<i data-feather="clock" class="w-12 h-12 poop-text"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold poop-text mb-3">Average Time</h3> |
|
|
<p class="text-gray-700">The average person spends about 92 days of their life on the toilet. That's 3 months of pooping!</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="poop-card p-6" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<i data-feather="activity" class="w-12 h-12 poop-text"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold poop-text mb-3">Health Indicator</h3> |
|
|
<p class="text-gray-700">Your poop can reveal important information about your digestive health, diet, and even stress levels.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="poop-card p-6" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<i data-feather="globe" class="w-12 h-12 poop-text"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold poop-text mb-3">Global Impact</h3> |
|
|
<p class="text-gray-700">2.4 billion people worldwide lack access to proper sanitation, leading to serious health issues.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6 bg-amber-100"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center poop-text mb-12" data-aos="fade-up">The Bristol Stool Chart</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-7 gap-4"> |
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="50"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-full bg-amber-800"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 1</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-lg bg-amber-700"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 2</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="150"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-lg bg-amber-600"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 3</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-lg bg-amber-500"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 4</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="250"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-lg bg-amber-400"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 5</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-lg bg-amber-300"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 6</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="350"> |
|
|
<div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 rounded-lg bg-amber-200"></div> |
|
|
</div> |
|
|
<p class="text-sm font-semibold poop-text">Type 7</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 max-w-2xl mx-auto text-center"> |
|
|
<p class="text-gray-700 mb-6">The Bristol Stool Chart classifies human feces into seven categories based on their shape and consistency, helping identify potential digestive issues.</p> |
|
|
<button class="poop-btn px-6 py-2 rounded-full font-medium"> |
|
|
Learn More About Stool Types |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center poop-text mb-12" data-aos="fade-up">Weird Poop Facts</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="poop-card p-6 mb-6" data-aos="fade-up"> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="alert-circle" class="w-6 h-6 poop-text mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold poop-text mb-2">Ancient Toilet Paper</h3> |
|
|
<p class="text-gray-700">Ancient Romans used a sponge on a stick soaked in salt water as toilet paper, which was shared among public toilet users!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="poop-card p-6 mb-6" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="dollar-sign" class="w-6 h-6 poop-text mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold poop-text mb-2">Poop Gold</h3> |
|
|
<p class="text-gray-700">Scientists have found trace amounts of gold in human waste. If extracted from all sewage, it could be worth millions!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="poop-card p-6" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="wind" class="w-6 h-6 poop-text mr-4 mt-1"></i> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold poop-text mb-2">Space Poop</h3> |
|
|
<p class="text-gray-700">Astronauts have special toilets that use suction to collect waste in zero gravity. The cost of transporting poop from space is about $19,000 per pound!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="poop-bg text-white py-8 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="droplet" class="w-6 h-6"></i> |
|
|
<span class="text-xl font-bold">PoopFacts</span> |
|
|
</div> |
|
|
<p class="text-amber-200 mt-2">The #1 source for poop information</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-amber-200">Privacy</a> |
|
|
<a href="#" class="hover:text-amber-200">Terms</a> |
|
|
<a href="#" class="hover:text-amber-200">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 md:mt-0 flex space-x-4"> |
|
|
<a href="#" class="hover:text-amber-200"><i data-feather="twitter" class="w-5 h-5"></i></a> |
|
|
<a href="#" class="hover:text-amber-200"><i data-feather="instagram" class="w-5 h-5"></i></a> |
|
|
<a href="#" class="hover:text-amber-200"><i data-feather="facebook" class="w-5 h-5"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center text-sm text-amber-200"> |
|
|
<p>© 2025 PoopFacts. All rights reserved. Because everyone poops.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
