ThomasJunk/index.html

## index.html
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <style>
    :root {
      font-size: 18px;
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    h1 {
      font-size: 2em;
    }

    h2 {
      font-size: 1.5em;
    }

    h2 {
      font-size: 1em;
    }

    .content {
      font-size: 0.8rem;
      display: grid;
      grid-template-columns: [left] 1fr [center] 4fr [center-end] 1fr[right];
      grid-template-rows: [upper] 1fr [content-start] 6fr [content-end] 1fr [lower];
      row-gap: 0.5rem;
      column-gap: 0.5rem;
      max-width: 1080px;
      margin: 0 auto;
      border: 1px solid #000;
    }

    .content div {
      background-color: rgb(0, 153, 255);
      padding: 1rem;
    }

    .header {
      grid-column-start: left;
      grid-column-end: right;
      grid-row-start: upper;
      grid-row-end: content-start;
      height: 100px;
      border: 1px solid #333;
      display: flex;
      font-size: 16px;
      align-items: center;
      justify-content: center;
    }

    .sidebar {
      grid-column-start: left;
      grid-row-start: content-start;
      border: 1px solid #666;
      display: flex;
    }

    .aside {
      grid-column-start: center-end;
      grid-row-start: content-start;
      border: 1px solid #666;
      display: flex;
    }

    .main {
      barder: 1px solid #333;
    }

    .toppoints {
      display: flex;
      flex-direction: row;
    }

    .toppoints .topic + .topic {
      margin-left: 2em;
    }

    .toppoints div:hover {
      background-color: aliceblue;
    }

    .maincontent {
      display: flex;
      flex-direction: row;
    }

    .footer {
      background-color: #555;
      padding: 1rem;
      grid-column-start: left;
      grid-column-end: right;
      grid-row-start: content-end;
      grid-row-end: lower;
      height: 100px;
      border: 1px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->
    <div class="content">
      <div class="header"><h1>Header</h1></div>
      <div class="sidebar">Sidebar</div>
      <div class="main">
        <div class="toppoints">
          <div class="topic">One</div>
          <div class="topic">Two</div>
          <div class="topic">Three</div>
        </div>
        <div class="maincontent">Whatever goes here</div>
      </div>
      <div class="aside">Aside content</div>
      <div class="footer"><small>Footer</small></div>
    </div>
    <script src="" async defer></script>
  </body>
</html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title></title>
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="" />
	</head>
	<style>
	:root {
	font-size: 18px;
	box-sizing: border-box;
	}

	*,
	::before,
	::after {
	box-sizing: inherit;
	}

	html,
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	h1 {
	font-size: 2em;
	}

	h2 {
	font-size: 1.5em;
	}

	h2 {
	font-size: 1em;
	}

	.content {
	font-size: 0.8rem;
	display: grid;
	grid-template-columns: [left] 1fr [center] 4fr [center-end] 1fr[right];
	grid-template-rows: [upper] 1fr [content-start] 6fr [content-end] 1fr [lower];
	row-gap: 0.5rem;
	column-gap: 0.5rem;
	max-width: 1080px;
	margin: 0 auto;
	border: 1px solid #000;
	}

	.content div {
	background-color: rgb(0, 153, 255);
	padding: 1rem;
	}

	.header {
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: upper;
	grid-row-end: content-start;
	height: 100px;
	border: 1px solid #333;
	display: flex;
	font-size: 16px;
	align-items: center;
	justify-content: center;
	}

	.sidebar {
	grid-column-start: left;
	grid-row-start: content-start;
	border: 1px solid #666;
	display: flex;
	}

	.aside {
	grid-column-start: center-end;
	grid-row-start: content-start;
	border: 1px solid #666;
	display: flex;
	}

	.main {
	barder: 1px solid #333;
	}

	.toppoints {
	display: flex;
	flex-direction: row;
	}

	.toppoints .topic + .topic {
	margin-left: 2em;
	}

	.toppoints div:hover {
	background-color: aliceblue;
	}

	.maincontent {
	display: flex;
	flex-direction: row;
	}

	.footer {
	background-color: #555;
	padding: 1rem;
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: content-end;
	grid-row-end: lower;
	height: 100px;
	border: 1px solid #333;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	</style>
	<body>
	<!--[if lt IE 7]>
	<p class="browsehappy">
	You are using an <strong>outdated</strong> browser. Please
	<a href="#">upgrade your browser</a> to improve your experience.
	</p>
	<![endif]-->
	<div class="content">
	<div class="header"><h1>Header</h1></div>
	<div class="sidebar">Sidebar</div>
	<div class="main">
	<div class="toppoints">
	<div class="topic">One</div>
	<div class="topic">Two</div>
	<div class="topic">Three</div>
	</div>
	<div class="maincontent">Whatever goes here</div>
	</div>
	<div class="aside">Aside content</div>
	<div class="footer"><small>Footer</small></div>
	</div>
	<script src="" async defer></script>
	</body>
	</html>