Untitled

<html>
<head>
    <meta charset="utf-8">
    <style>

        /* 0,1,0,0 */
        #main-header{
            background-color: green;
        }
        /* 0,0,1,0 */
        .site-header{
            background-color: yellow;
        }
        /* 0,0,0,1 */
        header{
            background-color: red;
        }
    </style>
</head>

<body>
    <header id="main-header" class="site-header" style="background-color: blue;"> 1,0,0,0
        <h1>Selamat Datang di Latihan CSS 🚀</h1>
        <p class="highlight">Gunakan file ini untuk menguji pemahaman Anda tentang semua selector.</p>
    </header>

    <nav class="main-nav">
        <ul>
            <li><a href="#article-1" title="Lompat ke artikel pertama">Artikel 1</a></li>
            <li><a href="/dokumen/laporan.pdf" target="_blank">Unduh Laporan (PDF)</a></li>
            <li><a href="https://google.com" target="_blank">Link Eksternal</a></li>
        </ul>
    </nav>

    <main>
        <article id="article-1">
            <h2>Judul Artikel Pertama</h2>
            <p>Ini adalah paragraf pertama yang langsung mengikuti h2 (untuk `h2 + p`).</p>
            <p class="highlight important">Paragraf ini punya dua kelas (untuk chaining `.highlight.important`).</p>
            <div>
                <p>Ini adalah paragraf lain setelah h2 (untuk `h2 ~ p`).</p>
            </div>
            <p>Paragraf terakhir di artikel ini, juga saudara dari h2.</p>
        </article>

        <section class="content-box">
            <h3>Sebuah sub-judul</h3>
            <p>Ini adalah paragraf anak langsung dari `section`.</p>
            <div>
                <span>Ini adalah paragraf keturunan (descendant), bukan anak langsung (child).</span>
            </div>
        </section>

        <section class="content-box">
            <span>Elemen span saja.</span>
        </section>

        <section>
            <h2>Daftar Item</h2>
            <ul class="item-list">
                <li>Item Pertama (:first-child)</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Terakhir (:last-child)</li>
            </ul>
            <ol class="item-list">
                <li>Item Pertama (:first-child)</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Kedua</li>
                <li>Item Ketiga</li>
                <li>Item Keempat</li>
                <li>Item Kelima</li>
                <li>Item Terakhir (:last-child)</li>
            </ol>
        </section>

        <blockquote class="quote" title="Sebuah kutipan terkenal">
            Ini adalah sebuah blok kutipan yang cukup panjang untuk menunjukkan efek pada baris pertama. CSS memungkinkan kita untuk menata huruf pertama dan baris pertama secara independen untuk menciptakan efek tipografi yang menarik seperti majalah.
        </blockquote>

        <div class="card">
            <p>Teks di dalam sebuah card.</p>
        </div>
        <div class="panel">
            <p>Teks di dalam sebuah panel.</p>
        </div>
        <img src="logo2.png" alt="sebuah gambar logo perusahaan" width="100">

        <form action="#">
            <h2>Formulir Kontak</h2>
            <input type="text" placeholder="Nama Anda" required>
            <input type="email" autocomplete="new-password" placeholder="Email Anda" required>
            <input type="password" autocomplete="new-password" title="Masukkan password yang aman">
            <textarea placeholder="Pesan Anda" required></textarea>
            <div>
                <input type="checkbox" id="agree" name="agree">
                <label for="agree">Saya setuju dengan syarat dan ketentuan.</label>
            </div>

            <button type="submit">Kirim</button>
            <button type="reset" class="disabled">Reset (disabled)</button>
        </form>
    </main>

    <footer id="main-footer" class="site-footer">
        <p class="text-info">&copy; 2025 Latihan Selector CSS.</p>
        <span class="text-info">Semua hak dilindungi.</span>
    </footer>

</body>
</html>