Template Panel domainesia.com
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #f8fafc;
color: #334155;
}
/* =========================
LAYOUT
========================== */
.app {
display: flex;
min-height: 100vh;
}
/* =========================
SIDEBAR
========================== */
.sidebar {
position: sticky;
top: 0;
width: 250px;
height: 100vh;
display: flex;
flex-direction: column;
background:
linear-gradient(
180deg,
#3b82f6 0%,
#1d4ed8 55%,
#22c55e 100%
);
color: white;
}
.sidebar-logo {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.logo-box {
font-size: 22px;
font-weight: 700;
}
/* =========================
MENU
========================== */
.sidebar-menu {
flex: 1;
padding: 10px 12px;
}
.menu-title {
display: block;
margin: 15px 12px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: rgba(255,255,255,.65);
}
.menu {
list-style: none;
}
.menu li {
margin-bottom: 5px;
}
.menu a {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 15px;
border-radius: 8px;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: .2s;
}
.menu a:hover {
background: rgba(255,255,255,.15);
}
.menu li.active a {
background: rgba(255,255,255,.22);
}
.menu i {
width: 20px;
text-align: center;
}
/* =========================
SIDEBAR FOOTER
========================== */
.sidebar-footer {
padding: 20px;
}
.sidebar-button {
display: block;
width: 100%;
padding: 12px;
border: 0;
border-radius: 8px;
background: white;
color: #16a34a;
font-weight: 700;
cursor: pointer;
}
/* =========================
MAIN
========================== */
.main {
flex: 1;
min-width: 0;
padding: 28px 35px;
}
/* =========================
TOP HEADER
========================== */
.top-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.page-title {
font-size: 32px;
font-weight: 700;
color: #334155;
}
/* =========================
PROFILE
========================== */
.profile {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 12px;
cursor: pointer;
}
.profile:hover {
background: #f1f5f9;
}
.profile-avatar {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e2e8f0;
font-size: 20px;
}
.profile-name {
font-size: 14px;
font-weight: 700;
}
/* =========================
BREADCRUMB
========================== */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 25px;
font-size: 13px;
color: #64748b;
}
.breadcrumb a {
color: #2563eb;
text-decoration: none;
}
/* =========================
CONTENT
========================== */
.content-container {
width: 100%;
}
/* =========================
EMPTY CONTENT CARD
========================== */
.content-card {
min-height: 500px;
padding: 25px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow:
0 4px 20px rgba(0,0,0,.04);
}
/* =========================
OPTIONAL GRID
========================== */
.grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
}
.card {
min-height: 140px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow:
0 6px 20px rgba(0,0,0,.05);
}
/* =========================
MOBILE
========================== */
.mobile-menu {
display: none;
border: 0;
background: transparent;
font-size: 22px;
cursor: pointer;
}
@media(max-width: 900px) {
.sidebar {
width: 65px;
}
.sidebar-logo {
padding: 15px 5px;
}
.logo-box span {
display: none;
}
.menu-title {
display: none;
}
.menu a {
justify-content: center;
padding: 14px 5px;
}
.menu a span {
display: none;
}
.menu i {
width: auto;
font-size: 18px;
}
.sidebar-footer {
display: none;
}
.main {
padding: 20px;
}
.page-title {
font-size: 25px;
}
.profile-name {
display: none;
}
.grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media(max-width: 600px) {
.main {
padding: 15px;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="app">
<!-- ========================================
SIDEBAR
========================================= -->
<aside class="sidebar">
<!-- LOGO -->
<div class="sidebar-logo">
<div class="logo-box">
<i class="fa-solid fa-circle-nodes"></i>
<span>LOGO</span>
</div>
</div>
<!-- MENU -->
<div class="sidebar-menu">
<span class="menu-title">
Main Menu
</span>
<ul class="menu">
<li class="active">
<a href="#">
<i class="fa-solid fa-house"></i>
<span>Menu</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-server"></i>
<span>Menu</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-globe"></i>
<span>Menu</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-file-invoice"></i>
<span>Menu</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-headset"></i>
<span>Menu</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-gear"></i>
<span>Menu</span>
</a>
</li>
</ul>
</div>
<!-- SIDEBAR BOTTOM -->
<div class="sidebar-footer">
<button class="sidebar-button">
<i class="fa-solid fa-plus"></i>
Tombol
</button>
</div>
</aside>
<!-- ========================================
MAIN BODY
========================================= -->
<main class="main">
<!-- HEADER -->
<header class="top-header">
<div>
<h1 class="page-title">
Judul Halaman
</h1>
</div>
<!-- PROFILE -->
<div class="profile">
<div class="profile-avatar">
<i class="fa-solid fa-user"></i>
</div>
<div class="profile-name">
User
</div>
<i class="fa-solid fa-chevron-down"></i>
</div>
</header>
<!-- BREADCRUMB -->
<div class="breadcrumb">
<a href="#">
Dashboard
</a>
<i class="fa-solid fa-chevron-right"></i>
<span>
Halaman
</span>
</div>
<!-- ====================================
CONTENT AREA
===================================== -->
<section class="content-container">
<!--
=====================================
AREA INI SENGAJA DIKOSONGKAN
Masukkan dashboard / tabel /
monitoring / form / chart / dll
di sini.
=====================================
-->
<div class="content-card">
</div>
</section>
</main>
</div>
</body>
</html>
0 Response to "Template Panel domainesia.com"
Post a Comment