page.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/classes.css" />
<link rel="stylesheet" href="style/footer.css" />
<link rel="stylesheet" href="style/header.css" />
<link rel="stylesheet" href="style/home.css" />
<link rel="stylesheet" href="style/html.css" />
<link rel="stylesheet" href="style/main.css" />
<link rel="stylesheet" href="style/variables.css" />
</head>
<body class="desktop_wrap">
<header>
<div id="header">
<span>
<a href="/">Reed Overflow</a>
</span>
</div>
<div id="menuWrapper" class="hiddenMenu" onclick="this.className = this.className=='' ? 'hiddenMenu' : ''">
<div id="menuButtonWrapper">
<span id="menuButton">
--<br>--<br>--
</span>
</div>
<div id="menu" >
<ul onclick="event.stopPropagation();">
<li><a href="/" >Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/article/">Blog</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
</div>
</header>
<main>
THE ACTUAL CONTENT
</main>
<footer>
<div>
<h3>
Legal
</h3>
<ul>
<li><a href="/legal/terms">Terms</a></li>
<li><a href="/legal/privacy">Privacy</a></li>
</ul>
</div>
<div>
<h3>
Other
</h3>
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</footer>
</body>
</html>