Plantilla de panel de administración HTML con barra lateral

868 righitakieddine

Abrir en el editor Publica tu código

Plantilla de panel de administración HTML con barra lateral

Recomendado

25 June 2025

Formulario de inicio de sesión y registro con fondo 3D

10 March 2025

Un código de Shab._0

22 November 2025

Código HTML del juego de la serpiente

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

Formulario de inicio de sesión y registro con fondo 3D

Un código de Shab._0

Código HTML del juego de la serpiente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS