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>