Dream Jumbotron - 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>Dream Jumbotron</title> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background: #fff; } .jumbotron { text-align: center; padding: 100px 25px; color: #000; background: linear-gradient(to bottom, #ffefba 0%, #ffffff 100%); background-size: cover; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .jumbotron h1 { font-size: 3em; margin: 0; animation: fadeInDown 1.5s ease-out; } .jumbotron p { font-size: 1.2em; margin: 20px 0 0; animation: fadeInUp 1.5s ease-out; } .jumbotron .cta-button { display: inline-block; margin-top: 20px; padding: 15px 30px; font-size: 1.2em; color: #000; background-color: #ffefba; border: none; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; animation: fadeIn 2s ease; } .jumbotron .cta-button:hover { background-color: #000; color: #ffefba; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <div class="jumbotron"> <h1>💠Follow Your Dreams</h1> <p>Dream big and make it happen. 🌠</p> <button class="cta-button">Get Inspired</button> </div> </body> </html>