web-basic/article.html

<!DOCTYPE html> <!-- html5 -->
<html>
<head>
    <title>Website personal saya yang sangat bermakna</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->

    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/article.css" />

</head>
<body>

    <header>
        <h1>Meaningful heading</h1>
    </header>

    <nav>
        <div class="kolom-samping">
            <a class="menu-item" href="index.html">Home</a>
        </div>
    
        <div class="kolom-samping">
            <a class="menu-item" href="about.html">About</a>
        </div>
    
        <div class="kolom-samping">
            <a class="menu-item" href="article.html">Article</a>
        </div>
    
        <div class="kolom-samping">
            <a class="menu-item" href="contact.html">Contact</a>
        </div>
    </nav>

    <div class="container">
        <main class="container-article">
            <div>
                <h2 class="judul"><u>Article</u></h2>
            </div>
            <aside class="side-left">
                <ul>
                    <li><a href="#">Pertamax dioplos, warga pindah ke Shell</a></li>
                    <li><a href="#">Ditemukan kehidupan baru di planet Mars</a></li>
                    <li><a href="#">AI Apocalypse: ChatGPT is a Skynet</a></li>
                </ul>
            </aside>
            <article>
                <h3>Pertamax dioplos, warga pindah ke Shell</h3>
                <p>Jakarta: Legislator Komisi VI DPR dari Fraksi PDIP melakukan inspeksi mendadak (sidak) ke SPBU 34.11405, Palmerah, Jakarta Barat. Mereka mengecek kualitas Pertamax yang belakangan ramai isu dioplos Pertalite.</p>
                <p>"Kami ingin memastikan apakah konsumen itu mendapatkan produk sesuai yang dijanjikan oleh Pertamina atau tidak," kata Wakil Ketua Komisi VI DPR dari Fraksi PDIP Adisatrya Suryo Sulisto di lokasi, Senin, 3 Maret 2025.</p>
                <p>Adisatrya mengatakan pihaknya menggeruduk SPBU Pertamina karena mendengar keluhan dari masyarakat. Pasalnya, berkembang narasi bahwa kualitas BBM RON 92 atau Pertamax setara RON 90 atau Pertalite.</p>
            </article>
            <aside class="side-right">Test</aside>
            <footer>Copyright (c) 2025 Widuri News</footer>
        </main>
    </div>

</body>
</html>
Belajar positioning Flex dan Grid 2025-03-04 10:25:16 +07:00			`<!DOCTYPE html> <!-- html5 -->`
			`<html>`
			`<head>`
			`<title>Website personal saya yang sangat bermakna</title>`

			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
			`<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->`

Rapih-rapihin dikit 2025-03-04 10:58:44 +07:00			`<link rel="stylesheet" href="css/style.css" />`
			`<link rel="stylesheet" href="css/article.css" />`
Belajar positioning Flex dan Grid 2025-03-04 10:25:16 +07:00
			`</head>`
			`<body>`

			`<header>`
			`<h1>Meaningful heading</h1>`
			`</header>`

			`<nav>`
			`<div class="kolom-samping">`
			`<a class="menu-item" href="index.html">Home</a>`
			`</div>`

			`<div class="kolom-samping">`
			`<a class="menu-item" href="about.html">About</a>`
			`</div>`

			`<div class="kolom-samping">`
			`<a class="menu-item" href="article.html">Article</a>`
			`</div>`

			`<div class="kolom-samping">`
			`<a class="menu-item" href="contact.html">Contact</a>`
			`</div>`
			`</nav>`

Rapih-rapihin dikit 2025-03-04 10:58:44 +07:00			`<div class="container">`
			`<main class="container-article">`
			`<div>`
			`<h2 class="judul"><u>Article</u></h2>`
			`</div>`
Tambahan kelas sore 2025-03-05 21:12:56 +07:00			`<aside class="side-left">`
Rapih-rapihin dikit 2025-03-04 10:58:44 +07:00			`<ul>`
			`<li><a href="#">Pertamax dioplos, warga pindah ke Shell</a></li>`
			`<li><a href="#">Ditemukan kehidupan baru di planet Mars</a></li>`
			`<li><a href="#">AI Apocalypse: ChatGPT is a Skynet</a></li>`
			`</ul>`
			`</aside>`
			`<article>`
			`<h3>Pertamax dioplos, warga pindah ke Shell</h3>`
			`<p>Jakarta: Legislator Komisi VI DPR dari Fraksi PDIP melakukan inspeksi mendadak (sidak) ke SPBU 34.11405, Palmerah, Jakarta Barat. Mereka mengecek kualitas Pertamax yang belakangan ramai isu dioplos Pertalite.</p>`
			`<p>"Kami ingin memastikan apakah konsumen itu mendapatkan produk sesuai yang dijanjikan oleh Pertamina atau tidak," kata Wakil Ketua Komisi VI DPR dari Fraksi PDIP Adisatrya Suryo Sulisto di lokasi, Senin, 3 Maret 2025.</p>`
			`<p>Adisatrya mengatakan pihaknya menggeruduk SPBU Pertamina karena mendengar keluhan dari masyarakat. Pasalnya, berkembang narasi bahwa kualitas BBM RON 92 atau Pertamax setara RON 90 atau Pertalite.</p>`
			`</article>`
Tambahan kelas sore 2025-03-05 21:12:56 +07:00			`<aside class="side-right">Test</aside>`
Rapih-rapihin dikit 2025-03-04 10:58:44 +07:00			`<footer>Copyright (c) 2025 Widuri News</footer>`
			`</main>`
			`</div>`
Belajar positioning Flex dan Grid 2025-03-04 10:25:16 +07:00
			`</body>`
			`</html>`