Artikel ini akan membahas cara membuat halaman dashboard untuk pusat data yang memiliki tampilan modern, responsif, dan dilengkapi dengan ikon-ikon yang mudah diakses. Dashboard ini menggunakan HTML dan CSS dengan bantuan Flexbox dan Grid untuk menyusun tampilan, serta efek animasi agar terlihat dinamis.
Langkah-Langkah:
Pengaturan Dasar Halaman HTML
Pada awal halaman, kita menetapkan judul halaman sebagai Dashboard Data Center. Judul ini juga diikuti dengan favicon yang disisipkan melalui tautan ke file gambar .ico.
Desain Latar Belakang dan Layout Utama
Untuk memberikan kesan profesional dan modern, latar belakang halaman menggunakan gambar yang diambil dari tautan eksternal. Kami menggunakan properti CSS background-image, background-size, dan background-repeat untuk memastikan gambar menutupi seluruh halaman tanpa pengulangan.
Pengaturan Kontainer Menu dengan Grid Layout
Bagian inti dari halaman ini adalah menu yang terdiri dari ikon-ikon berbentuk persegi dengan gambar dan teks di bawahnya. Kami menggunakan CSS Grid untuk menyusun menu menjadi 8 kolom dengan jarak antar item sebesar 40px.
Setiap menu diatur agar berbentuk kotak dengan ukuran 130x130px, serta diberi bayangan dan efek hover agar tampilannya menarik ketika pengguna mengarahkan kursor ke ikon. Menu juga diberikan animasi masuk dari atas dengan menggunakan @keyframes.
Menyusun Menu dan Tautan
Setiap item menu dihubungkan dengan URL tertentu menggunakan elemen <a> yang dibungkus dalam kelas menu-item. Gambar ikon untuk menu diambil dari tautan gambar eksternal, dan setiap ikon diikuti dengan teks deskriptif di bawahnya.
Animasi dan Efek Hover
Untuk memberikan pengalaman yang lebih interaktif, ketika pengguna mengarahkan kursor ke ikon menu, item tersebut akan diperbesar sedikit menggunakan properti transform: scale(1.1);. Efek ini membuat tampilan dashboard terasa lebih responsif dan dinamis.
Untuk Mencoba dan Download Kode DISINI!!
Kesimpulan
Halaman dashboard ini menawarkan tampilan modern dan fungsional dengan penggunaan CSS Grid dan Flexbox. Desainnya responsif, ramah pengguna, serta dilengkapi animasi dan efek hover untuk pengalaman visual yang lebih menarik. Dashboard ini sangat cocok untuk aplikasi pusat data atau sistem manajemen informasi berbasis web.
Tidak ada komentar:
Posting Komentar