Modèle de tableau de bord d'administration HTML avec barre latérale

867 righitakieddine

Ouvrir dans l'éditeur Publiez votre code

Modèle de tableau de bord d'administration HTML avec barre latérale

Recommandé

17 November 2025

Animation de cœur explosif cliquable

28 August 2025

Atilla Demir : développeur Web, concepteur et blog créatif

26 April 2025

Un code de Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
</head>
<body>
    <header class="header">
        <div class="logo">Your Logo</div>
        <div class="user-info">Welcome, Admin!</div>
    </header>
    <div class="container">
        <aside class="sidebar">
            <ul>
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Users</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Orders</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </aside>
        <main class="main-content">
            <h1>Dashboard Overview</h1>
            <div class="card-grid">
                <div class="card">
                    <h3>Total Users</h3>
                    <p>1</p>
                </div>
                <div class="card">
                    <h3>Total Products</h3>
                    <p>2</p>
                </div>
                <div class="card">
                    <h3>New Orders</h3>
                    <p>3</p>
                </div>
                <div class="card">
                    <h3>Revenue</h3>
                    <p>4</p>
                </div>
            </div>
            <h2>Recent Activity</h2>
            <div class="card activity">
                <ul>
                    <li><strong>CyberTech</strong> registered a new account. <span style="float: right; color: #777;">2 min ago</span></li>
                    <li>Product <strong>'Wireless Earbuds'</strong> updated. <span style="float: right; color: #777;">15 min ago</span></li>
                    <li>New order <strong>#1001</strong> placed by Jane Smith. <span style="float: right; color: #777;">1 hour ago</span></li>
                    <li>Login from IP <strong>192.168.1.10</strong>. <span style="float: right; color: #777;">3 hours ago</span></li>
                    <li><strong>Admin</strong> updated site settings. <span style="float: right; color: #777;">Yesterday</span></li>
                </ul>
            </div>
        </main>
    </div>
    <footer class="footer">
        © 2025 Admin Dashboard. All rights reserved.
    </footer>
</body>
</html>

CSS

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f6;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Ensures full viewport height */
        }

/* Header Styles */
        .header {
            background-color: #2c3e50; /* Dark blue */
            color: white;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .header .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .header .user-info {
            font-size: 16px;
            opacity: 0.9;
        }

/* Main Container for Sidebar and Content */
        .container {
            display: flex;
            flex: 1; /* Allows the container to fill remaining vertical space */
        }

/* Sidebar Styles */
        .sidebar {
            width: 240px;
            background-color: #34495e; /* Slightly lighter blue than header */
            color: white;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            overflow-y: auto; /* Enable scrolling for long menus */
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar ul li a {
            display: block;
            padding: 15px 25px;
            color: white;
            text-decoration: none;
            transition: background-color 0.3s ease, padding-left 0.3s ease;
            border-left: 5px solid transparent; /* For active indicator */
        }
        .sidebar ul li a:hover {
            background-color: #4a6480; /* Lighter on hover */
            padding-left: 30px;
        }
        .sidebar ul li.active a {
            background-color: #007bff; /* Primary blue for active */
            border-left-color: #007bff;
            font-weight: bold;
        }

/* Main Content Area Styles */
        .main-content {
            flex: 1; /* Allows main content to take up remaining width */
            padding: 25px;
            background-color: #fcfcfc;
            overflow-y: auto; /* Enable scrolling if content overflows */
        }
        .main-content h1 {
            color: #333;
            margin-top: 0;
            margin-bottom: 25px;
            font-size: 28px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

/* Card Grid Layout */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        .card {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.12);
        }
        .card h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
            font-size: 20px;
        }
        .card p {
            font-size: 28px;
            font-weight: bold;
            color: #007bff; /* Primary blue for key figures */
            margin: 0;
        }
        .card.activity ul {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 15px;
        }
        .card.activity ul li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            color: #555;
        }
        .card.activity ul li:last-child {
            border-bottom: none;
        }

/* Footer Styles */
        .footer {
            background-color: #e9ecef; /* Light gray */
            color: #6c757d; /* Darker gray text */
            text-align: center;
            padding: 20px 25px;
            border-top: 1px solid #dee2e6;
            font-size: 14px;
        }

/* Responsive Adjustments (Basic) */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            .sidebar {
                width: 100%;
                padding-top: 0;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
            .sidebar ul {
                display: flex; /* Make sidebar items horizontal on small screens */
                flex-wrap: wrap;
                justify-content: center;
                padding-bottom: 10px;
            }
            .sidebar ul li {
                flex: 1 1 auto; /* Allow items to grow/shrink */
                text-align: center;
            }
            .sidebar ul li a {
                padding: 10px 15px;
                border-left: none;
                border-bottom: 3px solid transparent;
            }
            .sidebar ul li a:hover {
                padding-left: 15px; /* Reset padding for hover */
            }
            .sidebar ul li.active a {
                border-left-color: transparent;
                border-bottom-color: #007bff;
            }
            .main-content {
                padding: 20px;
            }
            .card-grid {
                grid-template-columns: 1fr; /* Single column on small screens */
            }
        }

JS

Recommandé

Animation de cœur explosif cliquable

Atilla Demir : développeur Web, concepteur et blog créatif

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS