CSS Newb 001 - Divs & Positioning

I'm learning on Codecademy as a Beginner. This is my first project. My goal with this project is to make something that works. and divides up the page in multiple divs.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS Newb 001 - Divs & Positioning</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html>
  <head></head>
  <body>
    <div class="page">
      <div class="center">
        <div class="centercenter"></div>
        <div class="leftcenter">
          <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="#link3">Link 3</a></li>
            <li><a href="#link4">Link 4</a></li>
            <li><a href="#link5">Link 5</a></li>
            <li><a href="#link6">Link 6</a></li>
            <li><a href="#link7">Link 7</a></li>
            <li><a href="#link8">Link 8</a></li>
            <li><a href="#link9">Link 9</a></li> 
            <li><a href="#link10">Link 10</a></li> 
          </ul>
        </div>
        <div>
          <a href="#box1"><div class="lightbox" id="box1">1</div></a>
          <a href="#box2"><div class="darkbox" id="box2">2</div></a>
          <a href="#box3"><div class="lightbox" id="box3"></div></a>
          <a href="#box4"><div class="darkbox" id="box4"></div></a>
          <a href="#box5"><div class="lightbox" id="box5"></div></a>
          <a href="#box6"><div class="darkbox" id="box6"></div></a>   
          <a href="#box7"><div class="lightbox" id="box7"></div></a>
          <a href="#box8"><div class="darkbox" id="box8"></div></a>   

          <a href="#box9"><div class="darkpbox" id="box9"></div></a>
          <a href="#box10"><div class="lightpbox" id="box10"></div></a>
          <a href="#box11"><div class="darkpbox" id="box11"></div></a>
          <a href="#box12"><div class="lightpbox" id="box12"></div></a>
          <a href="#box13"><div class="darkpbox" id="box13"></div></a>
          <a href="#box14"><div class="lightpbox" id="box14"></div></a>
          <a href="#box15"><div class="darkpbox" id="box15"></div></a>
          <a href="#box16"><div class="lightpbox" id="box16"></div></a>
          
        </div>
        <div class="rightcenter"></div>
        <div class="outsidecenter" id="outsidecenter1"></div>
        <div class="outsidecenter" id="outsidecenter2"></div>
      </div>
/***** HEADER ******/
      <div class="header">
        <div class="centerheader">
           <div class="headernavbar"> 
            <ul>
              <li><a href="#anchor1">Item 1</a></li>
              <li><a href="#anchor2">Item 2</a></li>
              <li><a href="#anchor3">Item 3</a></li>
              <li><a href="#anchor4">Item 4</a></li>
              <li><a href="#anchor5">Item 5</a></li>
              <li><a href="#anchor6">Item 6</a></li>
              <li><a href="#anchor7">Item 7</a></li>
              <li><a href="#anchor8">Item 8</a></li>
              <li><a href="#anchor9">Item 9</a></li>
              <li><a href="#anchor10">Item 10</a></li>
              <li><a href="#anchor11">Item 11</a></li>
              <li><a href="#anchor12">Item 12</a></li>

             </ul>
          </div>
        </div> /* put background items first */
        <a href="#sandbox"><div class="leftheader">MY CSSandBox</div></a>
        <div class="rightheader"></div>    
      </div>      
 /**********************************************
I put the header below the main content so this way it actually has a fixed position rather than being covered by the CENTER content 
**********************************************/   
      <div class="footer">
        <div class="centerfooter">
          <ul>
            <a href="#foot1"><li>Foot 1</li></a>
            <a href="#foot2"><li>Foot 2</li></a>
            <a href="#foot3"><li>Foot 3</li></a>
            <a href="#foot4"><li>Foot 4</li></a>
            <a href="#foot5"><li>Foot 5</li></a>
            <a href="#foot6"><li>Foot 6</li></a>
            <a href="#foot7"><li>Foot 7</li></a>
            <a href="#foot8"><li>Foot 8</li></a>
            <a href="#foot9"><li>Foot 9</li></a>
            <a href="#foot10"><li>Foot 10</li>
            </a>
          </ul>
        </div>
        <div class="leftfooter"></div>
        <div class="rightfooter" id="rightfoot"></div>
        <div class="rightfooter"></div>
      </div>
      <div class="superfooter">
          <ul>
            <li><a href="#green1">Green 1</a></li> 
            <li><a href="#green2">Green 2</a></li>
            <li><a href="#green3">Green 3</a></li>
            <li><a href="#green4">Green 4</a></li>
            <li><a href="#green5">Green 5</a></li>
            <li><a href="#green6">Green 6</a></li>
            <li><a href="#green7">Green 7</a></li>
            <li><a href="#green8">Green 8</a></li>
            <li><a href="#green9">Green 9</a></li>
            <li><a href="#green10">Green 10</a></li>
            <li><a href="#green11">Green 11</a></li>
            <li><a href="#green12">Green 12</a></li>


         </ul>
      </div>
    </div>
  </body>
</html>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
/* This just makes all font the same. I want to learn now to do the Google Webfonts next! */

* {
  font-family: Futura, Verdona, Sans-serif;
}

body {
  background-color: #AED8CF;
}

/* I'm not sure if I can use these somehow.. */
.page {
}

.header {
}

.center {
}

.footer {
}

/* This can be for the Website logo */
.leftheader {
  height: 3em;
  width: 8em;
  background-color: #78A64D;
  position: fixed;
  top: 0px;
  left: 0px;
  color: #AED8CF;
  text-align: center;
  border: 1px solid #8BD754;
}

/* How do I center all of these items?
   Also how do I make it so background color is larger when hovering? If I use padding, the padding part doesn't change colors... */
.centerheader {
  height: 3em;
  width: 110%;
  background-color: #6F4E56;
  position: fixed;
  top: 0px;
  left: 0px;  
}


/* I've designed this so it kind of looks like a paper "pulling guide" slider.
  For this design, I wanted the header fixed, but I'm sacrificing that design to allow for possible more navigation on the footer for a game-style approach*/

.rightheader {
  height: 3em;
  width: 2em;
  background-color: #728E45;
  top: 0px;
  position: fixed;
  right: 0%;
}

/* This is the main content area */
/* I coded this first to more easily put the left scrollbar on top, both with absolute positions; */
.centercenter {
  height: 200%;
  width: 100%; /* go over 100% */
  background-color: #AED8CF;
  position: absolute;
  top: 2em;
  left: 0px; /* push this way to make up for 110% */
}


/* This is a div box for content on main page */
.lightbox {
  height: 8em;
  width: 9em;
  background-color: #8BD754;
  position: absolute;
}

.lightbox a:link {
  background-color: black;
}

.lightbox a:hover {
  background-color: blue;
}

/* This is a div box for content on main page */
.darkbox {
  height: 8em;
  width: 9em;
  background-color: #728E45;
  position: absolute;
}

.lightpbox {
  height: 8em;
  width: 9em;
  background-color: #926872;
  position: absolute;
}

.darkpbox {
  height: 8em;
  width: 9em;
  background-color: #664E6E;
  position: absolute;
}
/*   Purple = #6F4E56
   Darker Purple = #664E6E
   medium Purple = #926872
   Lighter Purple = #AC8B93
*/

#box1 {
  top: 4em;
  left: 9em;
}

#box2 {
  top: 8em;
  left: 19em;
}

#box3 {
  top: 12em;
  left: 29em;
}

#box4 {
  top: 16em;
  left: 39em;
}

#box5 {
  top: 20em;
  left: 49em;
}

#box6 {
  top: 24em;
  left: 59em;
}

#box7 {
  top: 28em;
  left: 69em;
}

#box8 {
  top: 28em;
  left: 9em;
}

#box9 {
  top: 10em;
  left: 12em;
}

#box10 {
  top: 17em;
  left: 17em;
}

#box11 {
  top: 18em;
  left: 26em;
}

#box12 {
  top: 22em;
  left: 35em;
}

#box13 {
  top: 26em;
  left: 44em;
}

#box14 {
  top: 30em;
  left: 53em;
}

#box15 {
  top: 34em;
  left: 62em;
}

#box16 {
  top: 34em;
  left: 71em;
}

/** This is the far-right scrollbar */
.rightcenter {
  height: 200%;
  width: 2em;
  background-color: #78A64D;
  position: absolute;
  top: 2em;
  right: 0px;
}

/* this is the purple part when you pull the screen to the right */
.outsidecenter {
  height:100%;
  width:10em;
  background-color: #6F4E56;
  position: absolute;
  top: 2em;
  right: -10em;
}

#outsidecenter2 {
  width: 10em;
  height: 100%;
  position: absolute;
  top: 100%;
  bottom: 0em;
  right: -10em;
  display: block;
  background-color: #8BD754;
}

/* This is the main footer in purpe **/
.centerfooter {
  height: 2em;
  width: 110%;
  background-color: #6F4E56;
  position: fixed;
  bottom: 0px;
  left: 0px;
  margin-left: -3em;
}

/* This is the bottom light green part to match the Website name */
.leftfooter {
  height: 2em;
  width: 8em;
  background-color: #78A64D;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

/* This is a small light green squalre for stylistic purposes to match the rightcenter green bar */
.rightfooter {
  height: 2em;
  width: 2em;
  background-color: #78A64D;
  position: fixed;
  bottom: 0px;
  right: 0%;
}

/* This was a cool idea I had to give a more raw sidebar approach - this is the visual queue to the user */
#rightfoot {
  width:12em;
  background-color: #728E45;
}

/******* element styling ********/

/* This centers the header items */ 
.headernavbar {
    margin-left: 8em;  
}

.centerheader ul {
  position: relative;
  top: -0.7em;
}

/* Here's the key to put padding within link!! */
.centerheader ul a {
  padding: 0.5em;
}

.centerheader ul li {
  width: auto; /* key here is auto. I tried using em's but that screwed most of it up */
}
/* above code mades them blocky */

.centerheader ul a:link {
  border: 2px solid #8BD754; /* light green */
  color: #8BD754; /* light green */
}

.centerheader ul a:hover {
  color: #6F4E56; /* purple */
  background-color: #AED8CF; /* light blue */  
}

.centerheader ul a:visited {
  border: 1px solid #6F4E56; /* purple */
  color: #AC8B93; /* light purple */
  background-color: #8BD754; /* light green */
}

.centerheader ul a:active {
  color: white;
  background: black;
}

/* this positions the footer */

.centerfooter ul {
  position: relative;
  margin-left: 10em;
  bottom: 1em;
}

.centerfooter ul a:link {
  border: 1px solid #AED8CF; /* blue */
  color: #AED8CF; /* blue */
}

.centerfooter ul a:hover {
  color: #6F4E56; /* purple */
  background-color: #8BD754; /* light green */
}

.centerfooter ul a:visited {
  border: 1px solid #6F4E56; /* purple */
  color: #AC8B93; /* light purple */
  background-color: #AED8CF; /* blue */
}

.centerfooter ul a:active {
  color: white;
  background-color: black;
}
/**** *****/

/* Text formatting */

a {
  text-decoration: none;
}

ul {
  font-size: 1em;
  link-style-type: none;
}

li {
  width: 5em;
  height: 2em;
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*** Green Superfooter ****/ 
/********Color Schemes****
   Blue = #AED8CF
   Darker Blue = #ACCBD7
   Sea Blue = #5AAF9D

   Purple = #6F4E56
   Darker Purple = #664E6E
   medium Purple = #926872
   Lighter Purple = #AC8B93

   Light Greem = #8BD754
   Green = #78A64D
   Dark Green = #728E45
***********************/

/* Just an experiment to cover up fixed elements - this is because of the position on the HTML page, nothing really special, but kind of a  headache when tryign to figure out placement. **/
.superfooter {
  left: 8em;
  width: 87.4%;
  height: 4em;
  background-color: #78A64D;
  position: absolute;
  bottom: -4em;
}

.superfooter ul {
  position: relative;
  margin-left: auto;
  bottom: 0.25em;
}

.superfooter ul a {
  padding: 1em .5em 1em .5em;
}

.superfooter ul li {
  width: auto;
}

.superfooter ul a:link {
  border: 1px solid #6F4E56;
  color: #6F4E56;
}

.superfooter ul a:hover {
  color: #6F4E56;
  background-color: #8BD754;
}

.superfooter ul a:visited {
  border: 1px solid #78A64D;
  color: #8BD754;
  background-color: #6F4E56;
}

.superfooter ul a:active {
  color: white;
  background-color: black;
}




/** Left sidebar links **/

.leftcenter {
  height: 200%;
  width: 8em;
  background-color: #728E45;  
  position: absolute;
  top: 3em;
  left: 0px;
}

.leftcenter ul {
  position: absolute;  
}

.leftcenter ul a {
  padding: 1em;
}


.leftcenter ul li {
  width: auto;
}

.leftcenter ul a:link {
  background-color: #8BD754;
  color: #6F4E56;
  border: 2px solid #6F4E56;
}

.leftcenter ul a:hover {
  background-color: #AC8B93;
}

.leftcenter ul a:visited {
   background-color: #78A64D;
   color: #728E45;
   border: 1px solid #78A64D;
}

.leftcenter ul a:active {
  background-color: black; 
  color: white;
}


/********Color Schemes****
   Blue = #AED8CF
   Darker Blue = #ACCBD7
   Sea Blue = #5AAF9D

   Purple = #6F4E56
   Darker Purple = #664E6E
   medium Purple = #926872
   Lighter Purple = #AC8B93

   Light Greem = #8BD754
   Green = #78A64D
   Dark Green = #728E45
***********************/
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( CSS Newb 001 - Divs & Positioning ) is write by Craig Curtis, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Craig Curtis