Showcase Gaya Design CSS

01Minimalist / Clean

Whitespace banyak, typography fokus, warna neutral. Sesuai: landing page ilmu, portfolio, dokumentasi.

Siri Pembelajaran

Tadabbur Al-Kahf

Perjalanan memahami empat kisah agung dalam surah pelindung fitnah akhir zaman.

Mula Belajar

letter-spacing, max-width kecil, 1 warna accent sahaja

02Glassmorphism

Kesan kaca kabur atas background berwarna. Sesuai: landing page moden, dashboard, hero section.

Portal Peserta

Akses modul harian, tracker istighfar dan nota sesi live anda di satu tempat.

Masuk Portal

backdrop-filter: blur(14px); background: rgba(255,255,255,.1)

03Neumorphism

Soft shadow timbul/tenggelam dari background sama warna. Sesuai: app kalkulator, tasbih digital, widget.

Tasbih Digital

Kiraan zikir harian dengan sentuhan lembut

33 / 100

box-shadow: 9px 9px 18px #shade, -9px -9px 18px #light

04Dark Ink Theme — gaya Rio Studio

Navy gelap + gold accent + cream text. Gaya rumah untuk SAH, BDI dan Legasi Quran.

ٱلرَّحْمَـٰنُ

Siri Asmaul Husna

Mengenal nama-nama Allah yang Maha Indah, satu nama satu perjalanan hati.

Daftar Sekarang

--navy:#0d1b2a; --gold:#d4af37; --cream:#faf6ee

05Brutalism

Border tebal, shadow solid, warna terang, sengaja "kasar". Sesuai: poster event, kempen berani, gen-Z.

Cabaran 14 Hari

Bangkit Dengan Istighfar

Satu amalan. Empat belas hari. Perubahan seumur hidup.

Sertai Sekarang

border: 4px solid #000; box-shadow: 10px 10px 0 #000 (tiada blur)

06Editorial / Book Style

Serif font, layout macam buku/majalah, garis nipis. Sesuai: ebook, artikel panjang, kandungan tadabbur.

وَاسْتَغْفِرُوا رَبَّكُمْ ثُمَّ تُوبُوا إِلَيْهِ

Bab Satu: Pintu Yang Sentiasa Terbuka

Setiap istighfar adalah langkah pulang. Setiap taubat adalah pintu yang tidak pernah berkunci.

Muka Surat 12

font-family: 'Amiri', serif; hairline rules; line-height tinggi

07Neubrutalism

Brutalism versi lembut — border sederhana, rounded corner, warna pastel terang. Sesuai: app playful, game UI.

🎮

SIA Journey

Bina Skor Iman & Amal anda hari demi hari dalam simulasi kehidupan.

Main Sekarang

border: 2.5px solid; border-radius: 16px; box-shadow: 6px 6px 0

08Aurora / Gradient Mesh

Blob gradient kabur bergerak atas background gelap. Sesuai: hero landing page, produk premium, tech.

Khazanah Ilmu Quran

Perpustakaan Digital KIQ

Ratusan sesi pengajian Quran, tersusun mengikut tema, sedia diakses bila-bila masa.

Terokai Sekarang

div blob + filter: blur(70px) + @keyframes float