index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
	<style>
			h1 {
				text-align: center;
			}

			.container {
				margin: 0 auto;
				padding: 60px 20%;
			}

			figure {
				text-align: center;
			}

			img {
				display: inline-block;
			}

			body {
				font-family: 'Inter', sans-serif;
				line-height: 1.4;
				color: #32323a;
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 40%;
				height: 100%;
				margin: 0;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

		@media (max-width: 600px) {
			body {
				width: 100%;
				left: 0;
				transform: none;
			}
		}

		a {
			text-decoration: none;
			color: #0057A8;
		}

		a:hover {
			color: #8E018E !important;
			text-decoration: underline;
		}
	</style>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CS184/284A Homework Webpages</title>
	</head>
	<body>
		<div class="wrapper">
			<header>
				<h1 style="align-self:flex-end;">CS184/284A Homework Webpages</h1>
			</header>
			<main>
				<div class="content">
					<ul>
						<li><a href="/hw1/index.html">Homework 1</a></li>
						<li><a href="/hw2/index.html">Homework 2</a></li>
						<li><a href="/hw3/index.html">Homework 3</a></li>
						<li><a href="/hw4/index.html">Homework 4</a></li>
					</ul>
				</div>
			</main>
		</div>
	</body>
	<script>
		var links = document.body.getElementsByTagName("a")
		var a = window.location.href.indexOf(".io")
		var repo_name = window.location.href.substring(a+3)
		for(var i = 0; i < links.length; i++){
			var link = links[i]
			var actual_name = link.href.substring(link.href.indexOf(".io")+4)
			link.href = repo_name + actual_name
		}
	</script>
</html>