AdityaMotale/index.html

## index.html
<!-- Clean, Clear and Creative Header -->

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

    <style>
      * {
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        margin: 0;
        background-color: rgb(20, 20, 20);
        overflow: hidden;
      }

      .side {
        width: 100%;
        height: 100%;
        position: absolute;
        display: grid;
        place-items: center;
        overflow: hidden;
      }

      .side .title {
        font-family: "Montserrat", sans-serif;
        font-size: 7vw;
        margin: 0 15vw;
        width: 80vw;
        line-height: 0.85em;
      }

      .side .fancy {
        font-family: "Permanent Marker", cursive;
        font-size: 6vw;
        line-height: 0.5em;
      }

      #left-side {
        background-color: black;
        width: 60%;
        z-index: 2;
      }

      #right-side {
        background-color: rgb(163, 230, 53);
      }

      #left-side .title {
        color: white;
      }

      #right-side .title {
        color: black;
      }

      #left-side .fancy {
        color: rgb(163, 230, 53);
      }

      #right-side .fancy {
        color: white;
      }
    </style>
  </head>
  <body>
    <!-- Left-Side -->
    <div class="side" id="left-side">
      <h2 class="title">
        Sometimes a simple header is <span class="fancy">Creative</span>
      </h2>
    </div>

    <!-- Right-Side -->
    <div class="side" id="right-side">
      <h2 class="title">
        Sometimes a simple header is <span class="fancy">Clean</span>
      </h2>
    </div>

    <script>
      const left = document.getElementById("left-side");

      const handleMove = (e) => {
        left.style.width = `${(e.clientX / window.innerWidth) * 100}%`;
      };

      document.onmousemove = (e) => handleMove(e);
    </script>
  </body>
</html>
	<!-- Clean, Clear and Creative Header -->

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

	<style>
	* {
	box-sizing: border-box;
	}

	body {
	height: 100vh;
	margin: 0;
	background-color: rgb(20, 20, 20);
	overflow: hidden;
	}

	.side {
	width: 100%;
	height: 100%;
	position: absolute;
	display: grid;
	place-items: center;
	overflow: hidden;
	}

	.side .title {
	font-family: "Montserrat", sans-serif;
	font-size: 7vw;
	margin: 0 15vw;
	width: 80vw;
	line-height: 0.85em;
	}

	.side .fancy {
	font-family: "Permanent Marker", cursive;
	font-size: 6vw;
	line-height: 0.5em;
	}

	#left-side {
	background-color: black;
	width: 60%;
	z-index: 2;
	}

	#right-side {
	background-color: rgb(163, 230, 53);
	}

	#left-side .title {
	color: white;
	}

	#right-side .title {
	color: black;
	}

	#left-side .fancy {
	color: rgb(163, 230, 53);
	}

	#right-side .fancy {
	color: white;
	}
	</style>
	</head>
	<body>
	<!-- Left-Side -->
	<div class="side" id="left-side">
	<h2 class="title">
	Sometimes a simple header is <span class="fancy">Creative</span>
	</h2>
	</div>

	<!-- Right-Side -->
	<div class="side" id="right-side">
	<h2 class="title">
	Sometimes a simple header is <span class="fancy">Clean</span>
	</h2>
	</div>

	<script>
	const left = document.getElementById("left-side");

	const handleMove = (e) => {
	left.style.width = `${(e.clientX / window.innerWidth) * 100}%`;
	};

	document.onmousemove = (e) => handleMove(e);
	</script>
	</body>
	</html>