Untitled

<!DOCTYPE html>

<html>

  <head>
    <title>Semantic page</title>

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <style>
      *
      {
        box-sizing: border-box;
      }

      body
      {
        margin: 0;
      }

      .clearfix::after
      {
        content: "";
        clear: both;
        display: table;
      }

      .img-container
      {
        float: left;
        width: 50%;     /* 2 boxes */
        padding: 10px;  /* space between the images */
      }

      nav
      {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: navy;
      }

      nav a
      {
        float: left;
        display: inline-block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }

      nav a:hover
      {
        background-color: hsl(240, 100%, 35%);
      }

      nav a.active
      {
        color: navy;
        background-color: white;
      }

      .column
      {
        float: left;
        padding: 15px;
      }

      #sidenav
      {
        width: 20%;
      }

      #sidenav ul
      {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      #sidenav li a
      {
        margin-bottom: 4px;
        display: block;
        padding: 8px;
        background-color: hsl(209, 70%, 90%);
        text-decoration: none;
        color: #444;
      }

      #sidenav li a:hover
      {
        background-color: hsl(240, 100%, 80%);
        color: white;
      }

      #sidenav li a.active
      {
        background-color: #008CBA;
        color: white;
      }

      main
      {
        width: 80%;
      }

      table, th, td
      {
        border: 1px solid grey;
        border-collapse: collapse;
      }

      th, td
      {
        padding: 10px;
      }

      footer
      {
        background-color: #eee;
        color: #aaa;
        padding: 10px 0 5px 0;
        text-align: center;
      }

      /* Use a media query to add a break point at 800px: */
      @media screen and (max-width: 800px)
      {
        nav li, #sidenav, main
        {
          /* The width is 100%, when the viewport is 800px or smaller */
          width: 100%;
        }
      }
    </style>
  </head>

  <body>
    <header class="clearfix">
      <div class="img-container">
        <img src="http://www.company.com/Images/Logo.jpg"
             alt="[Company logo]"
             style="width: 100%;">
      </div>

      <div class="img-container">
        <img src="http://www.company.com/Images/Office.jpg"
             alt="[Company Office]"
             style="width: 100%;">
      </div>
    </header>

    <nav>
      <a href="#AboutUs" class="active">ABOUT US</a>
      <a href="#Expertise">EXPERTISE</a>
      <a href="#Careers">CAREERS</a>
      <a href="#ContactUs">CONTACT US</a>
    </nav>

    <div class="clearfix">
      <aside class="column"
             id="sidenav">
        <ul>
          <li><a href="#WhatWeDo">What we do</a></li>
          <li><a href="#WhyUs">Why Us?</a></li>
          <li><a href="#Technologies">Technologies</a></li>
        </ul>
      </aside>

      <main class="column">
        <article>
          <h1>ABOUT THE COMPANY</h1>

          <section id="WhatWeDo">
            <h2>What we do</h2>

            <p>
              blah blah blah ...
            </p>

            <br><hr>
          </section>

          <section id="WhyUs">
            <h2>Why Us?</h2>

              <p>More blah ...</p>

            <br><hr>
          </section>

          <section id="Technologies">
            <h2>Technologies</h2>

            <p>Still more blah ...</p>
          </section>
        </article>
      </main>
    </div>

    <footer>
      <a href = "Terms.html">Terms</a> |
      <a href = "Privacy.html">Privacy Policy</a> |
      <a href = "TrademarksCopyrights.html">Trademarks & Copyrights</a> |
      <a href = "Sitemap.html">Sitemap</a>
      <br />
      All rights reserved.
    </footer>
  </body>

<meta charset="utf-8">
<title>SigmaCubes - Home</title>

<nav>
    <ul>
        <li>
            <a href="#AboutUs" class="active">ABOUT US</a>
        </li>
    </ul>
</nav>

alt="[Company logo]"
alt="[Company Office]"

<a href="#WhatWeDo">What we do</a>
<a href = "Sitemap.html">Sitemap</a>

<br>
<br />

nav li, #sidenav, main

nav li,
#sidenav,
main