helle.neocities.org

This page's source code

index.html


<!DOCTYPE html>

<html>
	<head>
		<title>helle.neocities.org</title>
		<link href="styles/main.css" rel="stylesheet">
	</head>
	<body class="page_wrapper">
		<header class="page_head" id="top">
			<h1>helle.neocities.org</h1>
			<hr>
		</header>
		<article class="page_content">
			<header>
				<h2>This page's source code</h1>
			</header>
			<section id="S1">
				<h3>index.html</h2>
				<pre><code>
					...
				</code></pre>
			</section>
			<section id="S2">
				<h3>main.css</h3>
				<pre><code>
					...
				</code></pre>
			</section>
		</article>
		<aside class="side_nav">
			<nav id="navbar">
				<h2>This page's tree</h2>
				<ul>
					<li><a href="#S1">index.html</a></li>
					<li><a href="#S2">main.css</a></li>
					<li><a href="#footer">footer</a></li>
				</ul>
			</nav>
		</aside>
		<footer class="page_footer" id="footer">
			<hr>
			<h3>Sample Footer Header</h3>
			<p>Sample Footer Text</p>
		</footer>
	</body>
</html>

main.css


body {
	font-family: arial;
	background-color: white;
	color: black;
}

.page_wrapper {
	display: grid;
	grid-template-columns: 10% 20% 60% 10%;
	grid-auto-rows: min-content;
}

.page_head {
	grid-area: 1 / 2 / 2 / 4;
}

.page_content {
	grid-area: 2 / 3 / 3 / 4;
}

.side_nav {
	grid-area: 2 / 2 / 3 / 3;
}

#navbar {
	position: sticky;
	top: 10px; 
}

.page_footer {
	grid-area: 3 / 2 / 4 / 4;
}