Professional Main Content Area

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Main Content Area</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&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(135deg, #f8f9fa, #e9ecef);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        .main-content {
            background: #fff;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-radius: 16px;
            overflow: hidden;
            max-width: 900px;
            width: 100%;
            animation: slide-in 1s ease-out;
        }
        @keyframes slide-in {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .header {
            background: linear-gradient(135deg, #6c63ff, #3f3d56);
            color: #fff;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        .header::before {
            content: '⭐️';
            position: absolute;
            left: -20px;
            top: -20px;
            font-size: 80px;
            opacity: 0.1;
        }
        .header .title {
            font-size: 24px;
            font-weight: 600;
        }
        .header .icons {
            display: flex;
            gap: 16px;
        }
        .header .icons i {
            font-size: 24px;
            transition: transform 0.3s ease;
        }
        .header .icons i:hover {
            transform: scale(1.2);
        }
        .content {
            padding: 24px;
        }
        .content p {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            margin-bottom: 24px;
        }
        .content .cta {
            display: flex;
            justify-content: center;
        }
        .content .cta button {
            background: #6c63ff;
            color: #fff;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
        }
        .content .cta button:hover {
            background: #574bff;
            transform: scale(1.05);
        }
        .footer {
            background: #f1f1f1;
            padding: 16px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <div class="header">
            <div class="title">Welcome to Our Site 🌟</div>
            <div class="icons">
                <i class="fas fa-bell"></i>
                <i class="fas fa-user"></i>
                <i class="fas fa-cog"></i>
            </div>
        </div>
        <div class="content">
            <p>Welcome to our professional main content area! We've crafted this space to provide you with the best user experience possible. Enjoy the smooth animations, modern design, and intuitive layout. 🌟</p>
            <p>This section can be used to display important information, showcase your latest content, or provide an engaging introduction to your website. Explore the icons above and interact with our features to get the most out of your visit.</p>
            <div class="cta">
                <button onclick="alert('Button Clicked!')">Call to Action 🚀</button>
            </div>
        </div>
        <div class="footer">
            <p>Made with ❤️ by [Your Name]</p>
        </div>
    </div>
</body>
</html>

Professional Main Content Area - MeggiTools