Plantilla de panel de administración HTML con barra lateral

405 righitakieddine

Abrir en el editor Publica tu código

Plantilla de panel de administración HTML con barra lateral

Recomendado

21 July 2025

Menú de navegación con botones de opción CSS

1 July 2025

Juego de Sudoku HTML: barra lateral y menú

15 May 2025

icono de carga 1

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

Recomendado

Menú de navegación con botones de opción CSS

Juego de Sudoku HTML: barra lateral y menú

icono de carga 1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS