Color Theming

by Stephen Herd

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Wireframe</title>
  </head>

  <body>
    <header>
      <h1>My Header</h1>
    </header>
    <nav>
      &nbsp;<a href="#">Home</a> | <a href="#">Products</a> | <a href="#">About Us</a>
    </nav>
    <main>
      <section>
        <h2>A Section</h2>
        <p>A section usually contains the main content of your site. This section has a width limit.</p>
        <p>On most browsers and displays you will see that the section and aside make two uneven length columns.
          This can be difficult to control. You can however,
          hide these unequal lengths by making the background colors the same.</p>
      </section>
      <aside>
        <h3>The Aside</h3>
        <p>This can contain any kind of content but often has ads or other navigation.</p>
      </aside>
    </main>
    <footer>
      <h3>My Footer &copy; 2020</h3>
    </footer>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

header {
  width: 100%;
  height: 10%;
  background-color: #347B98;
  color: #F0F7D4;
  padding: 1em;
}

nav {
  width: 100%;
  height: 1.5em;
  background-color: #347B98;
}

nav a {
  color: #B2D732;
}

nav a:hover {
  color: #092834;
}

main {
  width: 90%;
  height: 18em;
  margin-left: auto;
  margin-right: auto;
  background-color: #F0F7D4;
}

section {
  width: 80%;
  height: 100%;
  float: left;
  background-color: #F0F7D4;
  padding: .5em;
}

aside {
  width: 20%;
  height: 100%;
  float: left;
  background-color: #66B032;
  color: #F0F7D4;
  padding: .5em;
}

footer {
  width: 100%;
  height: 4em;
  clear: both;
  background-color: #092834;
  color: #F0F7D4;
  text-align: center;
  padding-top: .5em;
}

h2 {
  color: #347B98;
}