Skip to content

Halaman Dashboard

Ketikkan kode HTML berikut ke dalam file dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>APG | Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        Aplikasi Manajemen Pegawai
    </header>
    <div class="container">
        <aside>
            <ul class="menu">
                <li><a href="dashboard.html">Dashboard</a></li>
                <li><a href="tabel.html">Data Pegawai</a></li>
                <li><a href="tabel.html">Data Jabatan</a></li>
                <li><a href="login.html">Keluar</a></li>
            </ul>
        </aside>
        <section class="main">
            <h1>Selamat Datang di Aplikasi Manajemen Pegawai</h1>
            <h3>Anda login sebagai Administrator</h3>
        </section>
    </div>
    <footer>
        Copyright &copy; <b>Masipnu</b> Official
    </footer>
</body>
</html>

Info

Jika dijalankan di browser, tampilannya terlihat masih belum sempurna. Untuk itu silahkan tambahkan kode berikut ke dalam file css/style.css

/* ======================= */
/* Style Halaman Dashboard */
/* ======================= */

/* Mengatur desain header */
header{
    background: #038ade;
    color: #fff;
    padding: 15px 20px;
    font-size: 20px;
}

/* Mengatur lebar menu 20% dengan background hitam */
aside{
    flex: 20%;
    background: #222;
}

/* Mengatur lebar konten utama 80% dengan background putih */
section.main{
    flex: 80%;
    background: #fff;
    min-height: 530px;
    padding: 15px 20px;
}

/* Mengatur footer dengan background abu-abu dan teks di tengah */
footer{
    background: #ccc;
    color: #555;
    padding: 20px;
    text-align: center;
}

/* Mengatur layout pada layar kecil (responsive) */
@media (max-width: 700px){
    .container{
        flex-direction: column;

    }
}

/* Navigasi */
/* Membuang padding tag <ul> */
.menu{
    padding: 0;
}

/* Menambah border bawah tag <li> */
.menu li{
    border-bottom: 1px dotted #444;
}

/* Mengatur desain menu yang dibuat dengan tag a */
.menu a{
    display: block;
    padding: 20px 20px;
    list-style: none;
    color: #fff;
    text-decoration: none;
}

/* Mengganti background menu ketika ditunjuk mouse */
.menu a:hover{
    background: #000;
}

Uji Coba

Simpan file tersebut dan coba akses via browser.