WEB DEV CHEAT SHEET &
LANDING PAGE BUILDER KIT

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page Saya</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome Icons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Font (Inter) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-slate-900 text-slate-100 font-['Inter'] antialiased min-h-screen">

    <!-- Konten Landing Page Disini -->
    <h1 class="text-3xl font-bold text-center py-10">Hello World!</h1>

    <script src="script.js"></script>
</body>
</html>

/* CSS Reset dasar */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-main: #0a0f1d;
    --bg-card: #1e293b;
    --primary: #06b6d4;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
}

/* Biar Gambar Tidak Lewat / Break Layout */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

<!-- Grid Container: 1 kolom di HP, 2 di Tablet, 3 di Desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    
    <!-- Card Item -->
    <div class="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden hover:border-cyan-500/50 transition-all shadow-lg">
        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&auto=format&fit=crop" alt="Card Cover" class="w-full h-48 object-cover">
        <div class="p-5 space-y-3">
            <span class="text-xs font-semibold px-2.5 py-1 bg-cyan-950 text-cyan-400 rounded-full border border-cyan-800">Kategori</span>
            <h3 class="text-xl font-bold text-white">Judul Produk / Layanan</h3>
            <p class="text-slate-400 text-sm">Deskripsi singkat menarik tentang penawaran kamu di landing page ini.</p>
            <button class="w-full py-2.5 bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold text-sm rounded-lg transition">Beli Sekarang</button>
        </div>
    </div>

</div>

<!-- Hero Section dengan Background Video & Dark Overlay -->
<div class="relative w-full h-[500px] flex items-center justify-center overflow-hidden">
    <!-- Video Elements (autoplay muted loop) -->
    <video autoplay muted loop class="absolute w-full h-full object-cover z-0">
        <source src="assets/videos/hero-bg.mp4" type="video/mp4">
    </video>

    <!-- Dark Overlay Biar Teks Tetap Kelihatan Terang -->
    <div class="absolute inset-0 bg-black/60 z-10"></div>

    <!-- Teks Konten Utama (z-20 agar di atas video) -->
    <div class="relative z-20 text-center px-4 max-w-2xl">
        <h1 class="text-4xl font-extrabold text-white mb-3">Pengalaman visual Luar Biasa</h1>
        <p class="text-slate-200 mb-6">Solusi modern untuk memukau pengunjung dalam detik pertama.</p>
        <a href="#cta" class="px-6 py-3 bg-cyan-500 text-black font-bold rounded-lg shadow-lg hover:bg-cyan-400 transition">Pelajari Selengkapnya</a>
    </div>
</div>

// Konfigurasi JSONBin.io
const BIN_ID = 'GANTI_DENGAN_BIN_ID_KAMU';
const MASTER_KEY = 'GANTI_DENGAN_MASTER_KEY_KAMU'; 
const API_URL = `https://api.jsonbin.io/v3/b/${BIN_ID}`;

// 1. Fungsi Ambil Data (GET)
async function getCloudData() {
    try {
        const response = await fetch(`${API_URL}/latest`, {
            method: 'GET',
            headers: { 'X-Master-Key': MASTER_KEY }
        });
        const result = await response.json();
        console.log("Data Berhasil Diambil:", result.record);
        return result.record;
    } catch (error) {
        console.error("Gagal mengambil data:", error);
    }
}

// 2. Fungsi Simpan / Update Data (PUT)
async function updateCloudData(newDataObject) {
    try {
        const response = await fetch(API_URL, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-Master-Key': MASTER_KEY
            },
            body: JSON.stringify(newDataObject)
        });
        const result = await response.json();
        alert("Data Berhasil Disimpan ke Cloud!");
    } catch (error) {
        console.error("Gagal update data:", error);
    }
}

// script.js - Mobile Menu Toggle Simple
const btnMenu = document.getElementById('btn-menu');
const mobileMenu = document.getElementById('mobile-menu');

btnMenu.addEventListener('click', () => {
    // Toggle class 'hidden' pada div menu HP
    mobileMenu.classList.toggle('hidden');
});