alfianyusufabdullah/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      :root {
        --textColor: black;
        --backgroundColor: white;
      }

      [data-theme="dark"] {
        --textColor: white;
        --backgroundColor: black;
      }

      body {
        background-color: var(--backgroundColor);
      }

      #header-picture {
        width: 100px;
        height: auto;
        border-radius: 50%;
        margin: 18px 10px 18px 10px;
      }

      #header-title,
      #header-subtitle {
        margin: 0;
        padding: 0;
        color: var(--textColor);
      }

      header {
        text-align: center;
      }

      main {
        display: flex;
        justify-content: center;
      }

      #content {
        max-width: 500px;
        text-align: center;
        color: var(--textColor);
      }
    </style>
  </head>
  <body data-theme="light">
    <header>
      <img
        id="header-picture"
        src="https://images.glints.com/unsafe/180x0/glints-dashboard.s3.amazonaws.com/company-logo/0ecccc80caed7d3013433880e099e4fb.png"
      />
      <h1 id="header-title">Dicoding Indonesia</h1>
      <h3 id="header-subtitle">Perusahaan Teknologi</h3>
    </header>
    <main>
      <p id="content">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi perferendis quos
        voluptatum soluta in laboriosam, vitae eaque quae consequatur adipisci sequi cumque
        consequuntur fugiat quisquam earum explicabo ipsam autem porro atque vel quam, iste
        provident! Laboriosam officiis excepturi officia cumque, quisquam temporibus ex fugit,
        tenetur, sit eveniet dolorem beatae iste recusandae tempore quia pariatur incidunt
        perspiciatis similique amet? Recusandae doloremque quae doloribus aliquam fugiat soluta
        temporibus sunt incidunt dignissimos maiores quo, voluptatem amet enim tempore, fuga odit
        nemo et veniam error similique sed voluptates totam aliquid? Ullam laudantium, dignissimos
        cupiditate autem libero nobis, repellat iure possimus velit impedit mollitia! Sit.
      </p>
    </main>

    <script>
      window.onload = () => {
        const img = document.getElementById("header-picture");
        img.addEventListener("click", () => {
          const currentStyle = document.body.getAttribute("data-theme");
          if (currentStyle === "light") {
            document.body.setAttribute("data-theme", "dark");
          } else {
            document.body.setAttribute("data-theme", "light");
          }
        });
      };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>

	<style>
	:root {
	--textColor: black;
	--backgroundColor: white;
	}

	[data-theme="dark"] {
	--textColor: white;
	--backgroundColor: black;
	}

	body {
	background-color: var(--backgroundColor);
	}

	#header-picture {
	width: 100px;
	height: auto;
	border-radius: 50%;
	margin: 18px 10px 18px 10px;
	}

	#header-title,
	#header-subtitle {
	margin: 0;
	padding: 0;
	color: var(--textColor);
	}

	header {
	text-align: center;
	}

	main {
	display: flex;
	justify-content: center;
	}

	#content {
	max-width: 500px;
	text-align: center;
	color: var(--textColor);
	}
	</style>
	</head>
	<body data-theme="light">
	<header>
	<img
	id="header-picture"
	src="https://images.glints.com/unsafe/180x0/glints-dashboard.s3.amazonaws.com/company-logo/0ecccc80caed7d3013433880e099e4fb.png"
	/>
	<h1 id="header-title">Dicoding Indonesia</h1>
	<h3 id="header-subtitle">Perusahaan Teknologi</h3>
	</header>
	<main>
	<p id="content">
	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi perferendis quos
	voluptatum soluta in laboriosam, vitae eaque quae consequatur adipisci sequi cumque
	consequuntur fugiat quisquam earum explicabo ipsam autem porro atque vel quam, iste
	provident! Laboriosam officiis excepturi officia cumque, quisquam temporibus ex fugit,
	tenetur, sit eveniet dolorem beatae iste recusandae tempore quia pariatur incidunt
	perspiciatis similique amet? Recusandae doloremque quae doloribus aliquam fugiat soluta
	temporibus sunt incidunt dignissimos maiores quo, voluptatem amet enim tempore, fuga odit
	nemo et veniam error similique sed voluptates totam aliquid? Ullam laudantium, dignissimos
	cupiditate autem libero nobis, repellat iure possimus velit impedit mollitia! Sit.
	</p>
	</main>

	<script>
	window.onload = () => {
	const img = document.getElementById("header-picture");
	img.addEventListener("click", () => {
	const currentStyle = document.body.getAttribute("data-theme");
	if (currentStyle === "light") {
	document.body.setAttribute("data-theme", "dark");
	} else {
	document.body.setAttribute("data-theme", "light");
	}
	});
	};
	</script>
	</body>
	</html>