Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Download Bee and the Big Bright World | Free Ebook</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dog-paw { | |
| animation: wag 1.5s infinite alternate; | |
| transform-origin: center; | |
| } | |
| @keyframes wag { | |
| 0% { transform: rotate(-10deg); } | |
| 100% { transform: rotate(10deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50"> | |
| <header class="bg-amber-900 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="book-open" class="mr-2"></i> | |
| Bee's Book Haven | |
| </h1> | |
| <nav> | |
| <a href="/" class="hover:text-amber-200 ml-4"><i data-feather="home"></i> Home</a> | |
| <a href="ebook.html" class="hover:text-amber-200 ml-4"><i data-feather="download"></i> Free Ebook</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 p-6"> | |
| <img src="http://static.photos/nature/640x360/42" alt="Book Cover" class="w-full h-auto rounded-lg shadow-md"> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="dog-paw"> | |
| <i data-feather="heart" class="text-amber-600 w-12 h-12"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h1 class="text-3xl font-bold text-amber-900 mb-2">Bee and the Big Bright World</h1> | |
| <p class="text-gray-600 mb-4">By Shane Henli & Jack</p> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-amber-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| <span class="text-gray-600 ml-2">4.9 (1,243 reviews)</span> | |
| </div> | |
| <p class="text-lg mb-6">"A story about the quiet kind of love that changes everything. Bee didn't come from a home. Shane wasn't looking for one. But love has a way of crashing through the door exactly when the world forgets to knock."</p> | |
| <div class="bg-amber-100 p-4 rounded-lg mb-6"> | |
| <h3 class="font-bold text-amber-800 mb-2">About This Book</h3> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>Free to download and share</li> | |
| <li>20 beautifully illustrated pages</li> | |
| <li>Heartwarming story for all ages</li> | |
| <li>PDF, EPUB, and MOBI formats available</li> | |
| </ul> | |
| </div> | |
| <div class="space-y-4"> | |
| <a href="#" class="block w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg text-center transition duration-300"> | |
| <i data-feather="download" class="inline mr-2"></i> Download PDF | |
| </a> | |
| <a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg text-center transition duration-300"> | |
| <i data-feather="tablet" class="inline mr-2"></i> EPUB Version | |
| </a> | |
| <a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg text-center transition duration-300"> | |
| <i data-feather="book" class="inline mr-2"></i> MOBI (Kindle) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="mt-16 max-w-4xl mx-auto"> | |
| <h2 class="text-2xl font-bold text-amber-900 mb-6 text-center">What Readers Are Saying</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <img src="http://static.photos/people/200x200/1" alt="Reviewer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Sarah J.</h4> | |
| <div class="flex text-amber-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Read this to my kids and we all cried happy tears. Bee's story reminds us what really matters."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <img src="http://static.photos/people/200x200/2" alt="Reviewer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <div class="flex text-amber-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"As someone who's been through tough times, this book hit me right in the heart. Simple yet profound."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <img src="http://static.photos/people/200x200/3" alt="Reviewer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Emma L.</h4> | |
| <div class="flex text-amber-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The illustrations are gorgeous and the story is timeless. Already recommended to all my friends!"</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-amber-900 text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p class="mb-4">Share the love - this book is free for everyone!</p> | |
| <div class="flex justify-center space-x-4 mb-4"> | |
| <a href="#" class="hover:text-amber-200"><i data-feather="facebook"></i></a> | |
| <a href="#" class="hover:text-amber-200"><i data-feather="twitter"></i></a> | |
| <a href="#" class="hover:text-amber-200"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-amber-200"><i data-feather="mail"></i></a> | |
| </div> | |
| <p class="text-sm text-amber-200">© 2023 Bee's Book Haven. All stories belong to their creators.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Animate download buttons on hover | |
| const downloadButtons = document.querySelectorAll('a[href="#"]'); | |
| downloadButtons.forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| if (this.classList.contains('bg-amber-600')) { | |
| this.querySelector('i').classList.add('animate-bounce'); | |
| } else { | |
| this.querySelector('i').classList.add('animate-pulse'); | |
| } | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| this.querySelector('i').classList.remove('animate-bounce', 'animate-pulse'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |