Admin Dashboard HTML CSS

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Statistics Dashboard</title>
    <style>
        /* Basic styling for a clean dashboard look */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
            color: #333;
        }
        .dashboard-container {
            max-width: 1200px;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            font-weight: 600;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .stat-card {
            background-color: #e8f4f8; /* Light blue */
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease-in-out;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-card h3 {
            margin-top: 0;
            color: #34495e;
            font-size: 1.2em;
            margin-bottom: 15px;
            font-weight: 500;
        }
        .stat-card p {
            font-size: 2.8em;
            font-weight: bold;
            color: #2980b9; /* Blue */
            margin: 0;
        }
        /* Color variations for stat cards */
        .stat-card.red { background-color: #fdeaea; }
        .stat-card.red p { color: #e74c3c; }
        .stat-card.green { background-color: #eafdeb; }
        .stat-card.green p { color: #27ae60; }
        .stat-card.purple { background-color: #f4e8fd; }
        .stat-card.purple p { color: #8e44ad; }

.chart-section {
            background-color: #fdfdfd;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            margin-top: 30px;
        }
        .chart-section h2 {
            color: #34495e;
            margin-top: 0;
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            font-size: 1.8em;
            font-weight: 500;
        }
        .placeholder-chart {
            height: 250px;
            background-color: #ecf0f1;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-style: italic;
            font-size: 1.1em;
            border: 1px dashed #bdc3c7;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <h1>Admin Statistics Dashboard</h1>

<div class="stats-grid">
            <div class="stat-card">
                <h3>Total Users</h3>
                <p>1,234</p>
            </div>
            <div class="stat-card red">
                <h3>New Signups (Today)</h3>
                <p>45</p>
            </div>
            <div class="stat-card green">
                <h3>Active Sessions</h3>
                <p>789</p>
            </div>
            <div class="stat-card purple">
                <h3>Monthly Revenue</h3>
                <p>$12,345.67</p>
            </div>
        </div>

<div class="chart-section">
            <h2>User Growth Over Time</h2>
            <div class="placeholder-chart">
                [Placeholder for a Line Chart showing user growth trends]
            </div>
        </div>

<div class="stats-grid">
            <div class="stat-card">
                <h3>Bounce Rate</h3>
                <p>35.2%</p>
            </div>
            <div class="stat-card">
                <h3>Avg. Session Duration</h3>
                <p>03:45</p>
            </div>
            <div class="stat-card">
                <h3>Total Orders</h3>
                <p>567</p>
            </div>
            <div class="stat-card">
                <h3>Conversion Rate</h3>
                <p>4.8%</p>
            </div>
        </div>

<div class="chart-section">
            <h2>Top Selling Products</h2>
            <div class="placeholder-chart">
                [Placeholder for a Bar Chart showing product sales]
            </div>
        </div>

<div class="chart-section">
            <h2>Geographic Distribution</h2>
            <div class="placeholder-chart">
                [Placeholder for a World Map or Pie Chart showing user locations]
            </div>
        </div>
    </div>
</body>
</html>

Admin Dashboard HTML CSS

Recommended

CSS Animated Background with Shapes and Text

3D Card Carousel HTML CSS JavaScript

HTML Template with P5.js and CSS

HTML

CSS

JS

Recommended

CSS Animated Background with Shapes and Text

3D Card Carousel HTML CSS JavaScript

HTML Template with P5.js and CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS