Modelo de painel de administração HTML com barra lateral

866 righitakieddine

Abrir no Editor Publique Seu Código

Modelo de painel de administração HTML com barra lateral

Recomendado

30 November 2024

Slider de apresentação de fotografia criativa | Slider deslizante

27 June 2025

código de dança

14 October 2025

Exemplo de contêiner de animação HTML

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

Slider de apresentação de fotografia criativa | Slider deslizante

código de dança

Exemplo de contêiner de animação HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS