Spaces:
Running
Running
Create a 6 part story of an eaglet cosy in a nest until a black mamba comes to attach and the eaglet escapes after the mother eagle calls her from the sky. DO this a full webpage with the images and the story. - Initial Deployment
bd75051 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Brave Eaglet's Escape</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> | |
| .story-section { | |
| min-height: 100vh; | |
| background-size: cover; | |
| background-position: center; | |
| transition: all 0.5s ease; | |
| } | |
| .story-text { | |
| background-color: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(5px); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .snake-move { | |
| animation: snakeMove 2s linear infinite; | |
| } | |
| @keyframes snakeMove { | |
| 0% { transform: translateX(0) rotate(0deg); } | |
| 25% { transform: translateX(5px) rotate(2deg); } | |
| 50% { transform: translateX(0) rotate(0deg); } | |
| 75% { transform: translateX(-5px) rotate(-2deg); } | |
| 100% { transform: translateX(0) rotate(0deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="text-xl font-bold text-amber-700"> | |
| <i class="fas fa-feather-alt mr-2"></i> Eagle Tales | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#part1" class="hover:text-amber-600 transition">Beginning</a> | |
| <a href="#part3" class="hover:text-amber-600 transition">Danger</a> | |
| <a href="#part6" class="hover:text-amber-600 transition">Escape</a> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Story Sections --> | |
| <main> | |
| <!-- Part 1: Cozy Nest --> | |
| <section id="part1" class="story-section pt-20 flex items-center justify-center bg-blue-50"> | |
| <div class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1596272875729-ed2ff7d6d9c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Eaglet in nest" | |
| class="rounded-lg shadow-xl w-full max-w-md floating"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="story-text p-6 md:p-8 rounded-lg shadow-md"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-amber-800 mb-4">Part 1: The Cozy Nest</h2> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| High atop a towering cliff, nestled between sturdy branches, a fluffy eaglet named Sky chirped contentedly in her cozy nest. The afternoon sun warmed her downy feathers as she peered curiously over the edge at the world below. | |
| </p> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| "What a perfect day," Sky thought, stretching her tiny wings. The nest was lined with the softest moss and feathers her mother had gathered. She could hear the distant calls of other birds and the rustling of leaves in the gentle breeze. | |
| </p> | |
| <div class="flex justify-end mt-4"> | |
| <a href="#part2" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition flex items-center"> | |
| Next <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 2: Mother's Watch --> | |
| <section id="part2" class="story-section pt-20 flex items-center justify-center bg-blue-100"> | |
| <div class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row-reverse items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1551969014-7d8c8aad6f0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Mother eagle watching" | |
| class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <div class="story-text p-6 md:p-8 rounded-lg shadow-md"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-amber-800 mb-4">Part 2: Mother's Watchful Eye</h2> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Far above, Sky's mother circled gracefully on thermal currents, her sharp eyes scanning the landscape for both food and danger. She had taught Sky the importance of staying alert, even in the safety of their nest. | |
| </p> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| "Always listen for my call," mother eagle had said that morning before leaving to hunt. Sky remembered the lesson and kept her ears open, though she felt perfectly safe in their high fortress of branches. | |
| </p> | |
| <div class="flex justify-between mt-4"> | |
| <a href="#part1" class="text-amber-600 hover:text-amber-800 px-6 py-2 rounded-full transition flex items-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Previous | |
| </a> | |
| <a href="#part3" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition flex items-center"> | |
| Next <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 3: The Silent Threat --> | |
| <section id="part3" class="story-section pt-20 flex items-center justify-center bg-amber-50"> | |
| <div class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1620121692029-d088224ddb74?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Black mamba approaching" | |
| class="rounded-lg shadow-xl w-full max-w-md snake-move"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="story-text p-6 md:p-8 rounded-lg shadow-md"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-amber-800 mb-4">Part 3: The Silent Threat</h2> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Below the nest, hidden among the rocks, a sleek black mamba slithered silently upward. Its inky scales shimmered in the sunlight as it tasted the air with its forked tongue, detecting the scent of the young eaglet. | |
| </p> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Sky, busy preening her feathers, didn't notice the danger approaching. The snake moved with deadly precision, its powerful muscles carrying it closer to the unsuspecting chick. The forest seemed to hold its breath. | |
| </p> | |
| <div class="flex justify-between mt-4"> | |
| <a href="#part2" class="text-amber-600 hover:text-amber-800 px-6 py-2 rounded-full transition flex items-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Previous | |
| </a> | |
| <a href="#part4" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition flex items-center"> | |
| Next <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 4: Mother's Warning --> | |
| <section id="part4" class="story-section pt-20 flex items-center justify-center bg-red-50"> | |
| <div class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row-reverse items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" | |
| alt="Eagle calling from sky" | |
| class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <div class="story-text p-6 md:p-8 rounded-lg shadow-md"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-amber-800 mb-4">Part 4: Mother's Piercing Call</h2> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Just as the black mamba reared its head to strike, a piercing screech shattered the calm. Sky's mother had spotted the danger from her high vantage point and dove toward the nest with terrifying speed. | |
| </p> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| "SKY! FLY NOW!" The urgent command echoed across the cliffs. Sky's instincts kicked in before her mind could process the danger. She spread her wings and leaped from the nest just as the snake's fangs snapped shut on empty air. | |
| </p> | |
| <div class="flex justify-between mt-4"> | |
| <a href="#part3" class="text-amber-600 hover:text-amber-800 px-6 py-2 rounded-full transition flex items-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Previous | |
| </a> | |
| <a href="#part5" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition flex items-center"> | |
| Next <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 5: The Narrow Escape --> | |
| <section id="part5" class="story-section pt-20 flex items-center justify-center bg-blue-50"> | |
| <div class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1508313880080-c4bef0730395?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Eaglet flying away" | |
| class="rounded-lg shadow-xl w-full max-w-md floating"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="story-text p-6 md:p-8 rounded-lg shadow-md"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-amber-800 mb-4">Part 5: Wings of Freedom</h2> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Sky tumbled through the air, her untested wings flapping wildly. The ground rushed up to meet her, but then - a miracle! She caught an updraft and soared upward, her heart pounding with exhilaration and fear. | |
| </p> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Below her, the furious black mamba coiled angrily in the empty nest. Sky's mother swooped down, her talons outstretched, forcing the snake to retreat back down the cliff face to avoid the angry eagle's attack. | |
| </p> | |
| <div class="flex justify-between mt-4"> | |
| <a href="#part4" class="text-amber-600 hover:text-amber-800 px-6 py-2 rounded-full transition flex items-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Previous | |
| </a> | |
| <a href="#part6" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition flex items-center"> | |
| Next <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 6: Safe in the Sky --> | |
| <section id="part6" class="story-section pt-20 flex items-center justify-center bg-blue-100"> | |
| <div class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row-reverse items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1470114716159-e389f8712fda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Eaglet with mother eagle" | |
| class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <div class="story-text p-6 md:p-8 rounded-lg shadow-md"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-amber-800 mb-4">Part 6: A Lesson Learned</h2> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| Sky joined her mother in the sky, flying shakily but triumphantly beside her. "You did well, my brave one," mother eagle praised. "Today you learned to trust your wings and my voice." | |
| </p> | |
| <p class="text-gray-700 mb-4 text-lg"> | |
| As they soared together above the cliffs, Sky realized this terrifying experience had given her the gift of flight. Though she would find a new nest tonight, she would never forget the day danger forced her to discover her true nature as a creature of the sky. | |
| </p> | |
| <div class="flex justify-between mt-4"> | |
| <a href="#part5" class="text-amber-600 hover:text-amber-800 px-6 py-2 rounded-full transition flex items-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Previous | |
| </a> | |
| <a href="#part1" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition flex items-center"> | |
| Read Again <i class="fas fa-sync-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h3 class="text-2xl font-bold mb-4">The Brave Eaglet's Escape</h3> | |
| <p class="mb-6">A tale of courage, instinct, and the bond between mother and child.</p> | |
| <div class="flex justify-center space-x-4 mb-6"> | |
| <a href="#" class="text-white hover:text-amber-400 transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-amber-400 transition"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-amber-400 transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="text-sm text-gray-400"> | |
| © 2023 Eagle Tales. All images from Unsplash. Story by AI. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Mobile menu toggle would go here | |
| // This is a placeholder for actual functionality | |
| </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=pencilstwelve/flykimo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |