Celestial Haven - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Celestial Haven</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); body { font-family: 'Poppins', sans-serif; background: linear-gradient(to bottom, #000428, #004e92); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .main-content { background: #001c55; color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.3); border-radius: 10px; overflow: hidden; max-width: 800px; width: 100%; animation: fade-in 1s ease-out; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .header { background: #001c55; color: #fff; padding: 20px; text-align: center; font-size: 24px; font-weight: 700; border-bottom: 2px solid #004e92; } .content { padding: 20px; } .content p { font-size: 16px; line-height: 1.6; color: #ddd; margin-bottom: 20px; } .content .cta { display: flex; justify-content: center; margin-top: 20px; } .content .cta button { background: #ffd700; color: #001c55; padding: 12px 24px; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .content .cta button:hover { background: #ffbb33; transform: scale(1.05); } .footer { background: #001c55; padding: 15px; text-align: center; border-top: 2px solid #004e92; } .footer p { margin: 0; font-size: 14px; color: #aaa; } </style> </head> <body> <div class="main-content"> <div class="header"> Celestial Haven 🌌 </div> <div class="content"> <p>Step into the Celestial Haven, where stars align and dreams take flight. Explore the cosmos and embrace the beauty of the universe.</p> <div class="cta"> <button onclick="alert('Discover the Cosmos!')">Explore Cosmos 🌠</button> </div> </div> <div class="footer"> <p>© 2024 Celestial Haven. All rights reserved.</p> </div> </div> </body> </html>