Main Content Area Purple Solid - 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>Main Content Area - Purple Solid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f3e5f5; margin: 0; } .main-content { background: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6); border-radius: 15px; padding: 40px; width: 80%; max-width: 800px; transition: all 0.3s ease; position: relative; overflow: hidden; background-color: #9c27b0; } .main-content:hover { transform: translateY(-10px); box-shadow: 5px 5px 15px rgba(0, 0, 0, .2), -5px -5px 15px rgba(255, 255, 255, .6); } .content-header { text-align: center; margin-bottom: 20px; } .content-header h1 { font-size: 2em; color: #fff; } .content-body { font-size: 1.1em; line-height: 1.6; color: #fff; } .icon-list { display: flex; justify-content: space-around; margin-top: 20px; } .icon-list i { font-size: 2em; color: #fff; transition: color 0.3s ease, transform 0.3s ease; } .icon-list i:hover { color: #e1bee7; transform: scale(1.2); } </style> </head> <body> <div class="main-content"> <div class="content-header"> <h1>Purple Solid Design</h1> </div> <div class="content-body"> <p> This design features a solid purple background with neumorphic effects, creating a rich and eye-catching content area. </p> </div> <div class="icon-list"> <i class="fas fa-home"></i> <i class="fas fa-envelope"></i> <i class="fas fa-bell"></i> <i class="fas fa-cog"></i> </div> </div> </body> </html>