| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Motivational App</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta charset="utf-8"> |
| <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> |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-20px); } |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| .gradient-text { |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> |
| <div class="max-w-4xl w-full flex flex-col items-center"> |
| <h1 class="text-5xl md:text-6xl font-bold mb-8 text-center"> |
| <span class="text-gray-500 text-3xl md:text-4xl block">Hard Work,</span> |
| <span class="gradient-text">Forever</span> |
| </h1> |
| |
| <div class="relative w-full max-w-xl mb-12"> |
| <img |
| src="https://image.cdn2.seaart.me/2025-04-13/cvt945le878c738j8ftg-1/2dac27b8cfc49ec074c23fc3babea5a5_high.webp" |
| alt="Motivational illustration" |
| class="rounded-xl shadow-2xl w-full h-auto floating border-4 border-white" |
| /> |
| <div class="absolute -bottom-6 -right-6 bg-white p-3 rounded-full shadow-lg"> |
| <i class="fas fa-heart text-red-500 text-2xl"></i> |
| </div> |
| </div> |
| |
| <div class="flex space-x-4 mb-8"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition-all transform hover:scale-105"> |
| <i class="fas fa-play mr-2"></i> Start Journey |
| </button> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-full font-medium transition-all"> |
| <i class="fas fa-info-circle mr-2"></i> Learn More |
| </button> |
| </div> |
| |
| <div class="text-gray-500 max-w-md text-center"> |
| <p class="mb-2">"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing."</p> |
| <p class="font-medium">- Pelé</p> |
| </div> |
| |
| <div class="absolute bottom-8 animate-bounce"> |
| <i class="fas fa-chevron-down text-gray-400 text-2xl"></i> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('button').forEach(button => { |
| button.addEventListener('mouseenter', () => { |
| button.classList.add('shadow-md'); |
| }); |
| button.addEventListener('mouseleave', () => { |
| button.classList.remove('shadow-md'); |
| }); |
| }); |
| |
| |
| document.querySelector('.fa-chevron-down').addEventListener('click', () => { |
| window.scrollBy({ |
| top: window.innerHeight - 100, |
| behavior: 'smooth' |
| }); |
| }); |
| </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=Roger1982/hard-work" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
