Creative Minds - 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>Creative Minds</title> <style> body, html { margin: 0; padding: 0; font-family: 'Arial', sans-serif; overflow-x: hidden; } .hero { position: relative; width: 100%; height: 100vh; background: url('https://source.unsplash.com/1600x900/?creativity') no-repeat center center/cover; color: white; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; } .hero-content { position: relative; z-index: 2; animation: zoomIn 1.5s ease-out; } @keyframes zoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .hero h1 { font-size: 4rem; margin: 0; } .hero p { font-size: 1.5rem; margin: 20px 0; } .cta-button { padding: 15px 30px; font-size: 1.2rem; color: #fff; background: #e67e22; border: none; border-radius: 50px; cursor: pointer; transition: background 0.3s ease-in-out; } .cta-button:hover { background: #d35400; } </style> </head> <body> <div class="hero"> <div class="hero-overlay"></div> <div class="hero-content"> <h1>Unlock Creativity</h1> <p>Unleash your creative potential with us.</p> <button class="cta-button">Get Inspired</button> </div> </div> </body> </html>