Tampilan Landing Page Kurang Menarik? Ini Cara Mudah Edit file styles.css pada lp1 dan lp2!

Cara mengedit file styles.css pada lp1 dan lp2 dilakukan dengan membuka berkas CSS tersebut menggunakan editor teks (seperti Notepad++ atau Antigravity IDE) lalu mengubah variabel warna dan setelan animasi di dalamnya. Pada lp1, Anda dapat menyesuaikan skema warna utama (seperti warna emas dan latar belakang gelap) melalui variabel :root di baris paling atas. Sementara pada lp2, karena sebagian besar visual ditangani secara langsung oleh Tailwind CSS di berkas HTML, pengeditan styles.css difokuskan untuk memodifikasi setelan micro-animations (seperti durasi slider progress bar) dan kustomisasi scrollbar.

✨ Kelebihan Manajemen Style Berbasis Variabel CSS

• Efisiensi Waktu: Cukup ubah satu baris nilai variabel, perubahan akan otomatis diterapkan di seluruh halaman web.
• Konsistensi Brand: Memastikan seluruh elemen visual (tombol, teks, link, dan border) memiliki skema warna yang serasi tanpa meleset.
• Kontrol Animasi Penuh: Memudahkan pengaturan tempo transisi gerakan visual agar terasa halus saat diakses oleh calon klien.

---

🛠️ Langkah-langkah Menyunting Berkas styles.css

Langkah 1: Menemukan dan Membuka Berkas styles.css

Akses folder proyek marketing kit Anda, masuk ke dalam folder lp1 atau lp2. Cari file bernama styles.css. Klik kanan pada file tersebut dan pilih edit menggunakan Notepad++ atau editor kode modern seperti Antigravity IDE.

Langkah 2: Melakukan Kustomisasi pada lp1 (Murni CSS)

Buka file styles.css dari folder lp1. Pada baris paling atas (baris 1-8), Anda akan menemukan blok variabel :root seperti ini:

:root {
    --gold: #D6A863;     /* Warna aksen emas utama */
    --bg-black: #0A0A0A; /* Warna latar belakang gelap */
    --text-light: #EFEFEF;
    --text-gray: #A0A0A0;
    --font-serif: 'Cinzel', serif; /* Font judul premium */
    --font-sans: 'Inter', sans-serif;
}

Untuk mengubah tampilan, cukup ganti kode warna setelah titik dua (:). Misalnya, untuk mengganti warna emas utama menjadi warna biru langit, ubah baris tersebut menjadi:

--gold: #38bdf8;

Langkah 3: Melakukan Kustomisasi pada lp2 (Tailwind & Custom CSS)

Buka file styles.css dari folder lp2. Berbeda dengan lp1, layout visual lp2 sebagian besar dikendalikan langsung oleh Tailwind CSS di file HTML. Berkas styles.css di lp2 dirancang khusus untuk memegang variabel animasi dan scrollbar premium. Anda akan melihat kode berikut di baris teratas:

:root {
    --gold: #D6A863;
    --fi-accent: var(--gold);
    --fi-duration: 5s; /* Durasi slide otomatis progress bar */
}

Anda bisa mengubah durasi perpindahan slide otomatis pada bagian simulator pratinjau dengan merubah nilai --fi-duration. Misalnya, jika ingin slide berputar lebih cepat setiap 3 detik, ubah kodenya menjadi:

--fi-duration: 3s;

Langkah 4: Menyimpan File & Memverifikasi Hasil

Setelah melakukan pengeditan warna atau durasi animasi, tekan tombol Save (CTRL + S) pada editor teks Anda. Buka file index.html di browser Anda (klik ganda file tersebut) lalu segarkan halaman (refresh/F5) untuk melihat langsung perubahan visual yang telah Anda buat.