Sapphire Plan - 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>Sapphire Plan</title> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea, #764ba2); font-family: 'Arial', sans-serif; } .pricing-card { background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; width: 300px; text-align: center; transition: transform 0.3s; } .pricing-card:hover { transform: scale(1.05); } .card-header { background: #667eea; color: #fff; padding: 20px; font-size: 22px; position: relative; } .card-header .icon { font-size: 50px; margin-bottom: 10px; } .card-price { font-size: 42px; margin: 20px 0; } .card-body { padding: 20px; } .card-body ul { list-style: none; padding: 0; } .card-body ul li { margin: 10px 0; font-size: 18px; } .card-body ul li::before { content: "🌟"; margin-right: 10px; color: #667eea; } .card-footer { padding: 20px; background: #f0f2f5; } .card-footer button { background: #667eea; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background 0.3s; } .card-footer button:hover { background: #4a69bd; } </style> </head> <body> <div class="pricing-card"> <div class="card-header"> Sapphire Plan <div class="icon">💎</div> </div> <div class="card-body"> <div class="card-price">$19<span>/mo</span></div> <ul> <li>10 Projects</li> <li>30 GB Storage</li> <li>Standard Support</li> </ul> </div> <div class="card-footer"> <button>Choose Plan</button> </div> </div> </body> </html>