HTML Exercises

Dashboard with Animations

This dashboard will include a sidebar, a main content area with cards, and animations for hover effects.
HTML (index.html)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Interactive Dashboard</title>
        <style>
            body {
                margin: 0;
                font-family: 'Arial', sans-serif;
                background-color: #f4f7fa;
            }
    
            /* Layout using Flexbox */
            .dashboard-container {
                display: flex;
                height: 100vh;
                overflow: hidden;
            }
    
            /* Sidebar Styles */
            .sidebar {
                width: 250px;
                background-color: #1f2937;
                color: white;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                transition: width 0.3s ease;
            }
    
            .sidebar:hover {
                width: 280px;
            }
    
            .sidebar h2 {
                padding: 20px;
                text-align: center;
                font-size: 1.5em;
                background-color: #374151;
                margin: 0;
            }
    
            .sidebar ul {
                list-style: none;
                padding: 0;
            }
    
            .sidebar ul li {
                padding: 15px 20px;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
    
            .sidebar ul li:hover {
                background-color: #4b5563;
            }
    
            /* Main Content Area */
            .main-content {
                flex: 1;
                padding: 20px;
                background-color: #f9fafb;
                overflow-y: auto;
            }
    
            /* Dashboard Stats */
            .stats-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                margin-bottom: 20px;
            }
    
            .stat-card {
                background-color: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
    
            .stat-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            }
    
            .stat-card h3 {
                font-size: 1.2em;
                margin: 0;
            }
    
            .stat-card p {
                font-size: 2em;
                margin: 10px 0 0;
            }
    
            /* Animations for Chart Placeholder */
            .chart-placeholder {
                width: 100%;
                height: 300px;
                background: linear-gradient(135deg, #60a5fa, #3b82f6);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 2em;
                border-radius: 8px;
                animation: fadeIn 1s ease-out;
            }
    
            /* Keyframe Animation */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.9);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        </style>
    </head>
    <body>
        <div class="dashboard-container">
            <!-- Sidebar -->
            <div class="sidebar">
                <h2>Dashboard</h2>
                <ul>
                    <li>Overview</li>
                    <li>Reports</li>
                    <li>Analytics</li>
                    <li>Settings</li>
                </ul>
                <p style="text-align:center; padding: 20px;">Logout</p>
            </div>
    
            <!-- Main Content -->
            <div class="main-content">
                <div class="stats-grid">
                    <div class="stat-card">
                        <h3>Total Users</h3>
                        <p>12,345</p>
                    </div>
                    <div class="stat-card">
                        <h3>Sales Today</h3>
                        <p>$2,345</p>
                    </div>
                    <div class="stat-card">
                        <h3>New Orders</h3>
                        <p>89</p>
                    </div>
                </div>
    
                <div class="chart-placeholder">
                    Sales Chart
                </div>
            </div>
        </div>
    </body>
    </html>
Save and open index.html in your browser to view your website.
Feel free to customize the content and structure as you like.
CSS Exercises

HTML Exercises

Dashboard with Animations

HTML (index.html)
