From 4376cbf536e502674183a5ff9f77207b3d3fdb8f Mon Sep 17 00:00:00 2001
From: Thom Page <thompage@Thoms-MBP.home>
Date: Thu, 19 May 2016 11:58:06 -0400
Subject: [PATCH 01/14] solutions to weekend1 homework

---
 unit_01/w01d05/homework/solutions.js | 351 +++++++++++++++++++++++++++
 1 file changed, 351 insertions(+)
 create mode 100644 unit_01/w01d05/homework/solutions.js

diff --git a/unit_01/w01d05/homework/solutions.js b/unit_01/w01d05/homework/solutions.js
new file mode 100644
index 0000000..9d90ee4
--- /dev/null
+++ b/unit_01/w01d05/homework/solutions.js
@@ -0,0 +1,351 @@
+// ARRAYS AND OBJECTS
+
+// =====================================================
+
+// Find the median number in the following nums array, then console.log that number.
+var nums = [14,11,16,15,13,16,15,17,19,11,12,14,19,11,15,17,11,18,12,17,12,71,18,15,12];
+
+nums.sort();
+var half = Math.floor(nums.length / 2);
+console.log(nums[half]);
+// => 15
+
+// =====================================================
+
+// Given the following object:
+var obj = {
+   name: "Slimer",
+   color: "greenish",
+   type: "plasm or ghost or something"
+}
+
+// What would you write to access the name and console.log it?
+console.log(obj.name);
+// OR
+console.log(obj['name']);
+
+// What would you write to change the type to 'creature'
+obj.type = "creature";
+
+// What would you write to add a key to the object called age, and set the age to 6?
+obj.age = 6;
+
+console.log(obj);
+
+
+// LOOPS
+// =====================================================
+
+// If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. 
+// The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.
+
+var i = 1;
+var sum = 0;
+
+while (i < 1000) {
+	if (i % 3 === 0 || i % 5 === 0) {
+		sum += i;
+	}
+	i++;
+}
+
+console.log(sum);
+
+// =====================================================
+
+
+// Write a *for* loop that can iterate over the Wilkersons array below, starting from the middle of the array.
+// 'Malcom' is in the middle of the array. In the loop, 
+// console.log 'Malcolm' and everything after 'Malcolm' in the array.
+
+var Wilkersons = ["Lois", "Dewie", "Francis", "Malcolm", "Reese", "Hal"];
+
+for (var i = Wilkersons.length / 2; i < Wilkersons.length; i++ ) {
+	console.log(Wilkersons[i]);
+}
+
+
+// Write a *for* loop for the following `plusJamie` array. Note that this array has an _odd_ number of elements 
+// 'Malcom' is still in the middle. Within the loop, console.log everything from the middle (Malcolm), and onwards:
+var plusJamie = ["Lois", "Dewie", "Francis", "Malcolm", "Reese", "Hal", "Jamie"];
+
+var half = Math.floor(plusJamie.length / 2);
+
+for (var i = half; i < plusJamie.length; i++) {
+	console.log(plusJamie[i]);
+}
+
+
+// FUNCTIONS
+// =======================================
+
+// Write a function 'palindrome' that accepts a single argument, a string. The function 
+// should return true if the string is a palindrome, false if it is not. Make sure your 
+// function will give the correct answer for words with capital letters.
+
+var palindrome = function(input) {
+	var comparison = input.toLowerCase().split('').reverse().join('');
+
+	if (comparison === input.toLowerCase()) {
+		return true;
+	}
+	return false;
+}
+
+console.log(palindrome("Radar"));
+// => True
+
+console.log(palindrome("Borscht"));
+// => False
+
+// =======================================
+
+// Define a function maxOfThree that takes three numbers as arguments and returns 
+// the largest of them.
+
+var maxOfThree = function(num1, num2, num3) {
+	return [num1, num2, num3].sort().pop();
+}
+console.log(maxOfThree(6, 9, 1));
+// => 9
+
+
+// OR
+
+
+var maxOfThree2 = function(num1, num2, num3) {
+	if (num1 > num2 && num1 > num3) {
+		return num1;
+	} else if (num2 > num3) {
+		return num2;
+	}
+	return num3;
+}
+
+console.log(maxOfThree2(6, 9, 1));
+// => 9
+
+
+// =======================================
+//Write a function pythagoras that that takes two arguments: sideA and sideB, 
+//and returns the solution for sideC using the Pythagorean theorem.
+
+var pythagoras = function(sideA, sideB) {
+	var sideCsquared = (sideA * sideA) + (sideB * sideB);
+	return Math.sqrt(sideCsquared);
+}
+
+console.log(pythagoras(8, 6));
+
+
+
+// =======================================
+
+// Write a function called `calc` ...
+
+var calc = function(num1, num2, operation) {
+	if (operation === "sum") {
+		return num1 + num2
+	} else if (operation === "sub") {
+		return num1 - num2;
+	} else if (operation === "mult") {
+		return num1 * num2;
+	} else if (operation === "div") {
+		return num1 / num2;		
+	} else if (operation === "exp") {
+		return Math.pow(num1, num2);
+	} else {
+		return "error"
+	}
+}
+
+console.log(calc(4, 3, "exp"));
+
+// =======================================
+
+// Write a function `isAVowel` that takes a character (i.e. a string of length 1) 
+// and returns true if it is a vowel, false otherwise.
+
+var isAVowel = function(char) {
+	return /[aeiou]/.test(char.toLowerCase());
+}
+
+console.log(isAVowel("a"));
+// => true
+
+
+// OR
+
+var isAVowel2 = function(char) {
+	var vowels = ["a", "e", "i", "o", "u"];
+	for (var i=0; i < vowels.length; i++) {
+		if (vowels[i] === char.toLowerCase()) {
+			return true
+		}
+	}
+	return false
+}
+
+console.log(isAVowel2("a"));
+// => true
+
+
+// =======================================
+// Write a function `sumArray` that sums the numbers in an array of numbers. 
+
+var sumArray = function(arr) {
+	var sum = 0;
+	for (var i=0; i < arr.length; i++) {
+		sum += arr[i];
+	}
+	return sum;
+}
+
+console.log(sumArray([1, 2, 3, 4]));
+
+
+// =======================================
+
+// Write a function that returns the number of arguments passed to the function when called. 
+// You will need to research how to solve this.
+
+var args = function() {
+	return arguments.length;
+}
+
+console.log(args(1, 2, 3, 4));
+// => 4
+
+console.log(args([], {}, true));
+// => 3
+
+
+
+// SCOPE
+// =======================================
+
+// 1. showColor does not require a parameter because hexColor is in global scope,
+//    which means hexColor is available in any scope. Therefore showColor can 'borrow' hexColor from the global scope.
+
+// 2. The output will be the argument that was passed into the showColor function,
+//    because it takes precedence over the global scope.
+
+// 3. theOther cannot access the value of num because the value is not in its scope.
+
+// 4. scopeExample will not log the number 8, because num was redefined to the number
+
+
+
+// NESTED DATA
+// =======================================
+
+var solarSystem = [
+    { name: "Mercury", ringSystem: false, moons: [] },
+    { name: "Venus", ringSystem: false, moons: [] },
+    { name: "Earth", ringSystem: false, moons: ["The Moon"] },
+    { name: "Mars", ringSystem: false, moons: ["Phobos", "Deimos"] },
+    { name: "Jupiter", ringSystem: true, moons: ["Europa", "Ganymede", "Io", "Callisto"] },
+    { name: "Saturn", ringSystem: true, moons: ["Titan", "Enceladus", "Rhea", "Mimas"] },
+    { name: "Uranus", ringSystem: true, moons: ["Miranda", "Titania", "Ariel", "Umbriel"] },
+    { name: "Neptune", ringSystem: true, moons: ["Triton", "Nereid"] }
+];
+
+// Print the array of Jupiter's moons to the console.
+console.log(solarSystem[4].moons);
+
+// Print the name of Neptune's moon "Nereid" to the console.
+console.log(solarSystem[7].moons[1]);
+
+// Add a new moon called "Endor" to Venus' moons array.
+solarSystem[1].moons.push("Endor");
+
+// Add a Pluto object to the solarSystem array using .push. 
+// The object should contain Pluto's name, ringSystem boolean, and moons array 
+// (which includes "Charon").
+solarSystem.push({ name: "Pluto", ringSystem: false, moons: ["Charon"]});
+
+// Add a new key value pair to the the Earth object: the key should be 'diameter', 
+// and the value should be Earth's diameter in miles.
+solarSystem[2].diameter = "7,915";
+
+// Change Mercury's ringSystem boolean to true.
+solarSystem[0].ringSystem = true;
+
+// Change Uranus' moon "Umbriel" to "Oberon"
+solarSystem[6].moons[3] = "Oberon";
+
+// Iterate through the solarSystem array and print only the objects that 
+// have a ringSystem (where ringSystem: true)
+for (var i=0; i < solarSystem.length; i++) {
+	if (solarSystem[i].ringSystem) {
+		console.log(solarSystem[i]);
+	}
+}
+
+
+// BONDFILMS
+// =======================================
+
+bondFilms = [
+  { "title" : "Skyfall", "year" : 2012, "actor" : "Daniel Craig", "gross" : "$1,108,561,008" },
+  { "title" : "Thunderball", "year" : 1965, "actor" : "Sean Connery", "gross" : "$1,014,941,117" },
+  { "title" : "Goldfinger", "year" : 1964, "actor" : "Sean Connery", "gross" : "$912,257,512" },
+  { "title" : "Live and Let Die", "year" : 1973, "actor" : "Roger Moore", "gross" : "$825,110,761" },
+  { "title" : "You Only Live Twice", "year" : 1967, "actor" : "Sean Connery", "gross" : "$756,544,419" },
+  { "title" : "The Spy Who Loved Me", "year" : 1977, "actor" : "Roger Moore", "gross" : "$692,713,752" },
+  { "title" : "Casino Royale", "year" : 2006, "actor" : "Daniel Craig", "gross" : "$669,789,482" },
+  { "title" : "Moonraker", "year" : 1979, "actor" : "Roger Moore", "gross" : "$655,872,400" },
+  { "title" : "Diamonds Are Forever", "year" : 1971, "actor" : "Sean Connery", "gross" : "$648,514,469" },
+  { "title" : "Quantum of Solace", "year" : 2008, "actor" : "Daniel Craig", "gross" : "$622,246,378" },
+  { "title" : "From Russia with Love", "year" : 1963, "actor" : "Sean Connery", "gross" : "$576,277,964" },
+  { "title" : "Die Another Day", "year" : 2002, "actor" : "Pierce Brosnan", "gross" : "$543,639,638" },
+  { "title" : "Goldeneye", "year" : 1995, "actor" : "Pierce Brosnan", "gross" : "$529,548,711" },
+  { "title" : "On Her Majesty's Secret Service", "year" : 1969, "actor" : "George Lazenby", "gross" : "$505,899,782" },
+  { "title" : "The World is Not Enough", "year" : 1999, "actor" : "Pierce Brosnan", "gross" : "$491,617,153" },
+  { "title" : "For Your Eyes Only", "year" : 1981, "actor" : "Roger Moore", "gross" : "$486,468,881" },
+  { "title" : "Tomorrow Never Dies", "year" : 1997, "actor" : "Pierce Brosnan", "gross" : "$478,946,402" },
+  { "title" : "The Man with the Golden Gun", "year" : 1974, "actor" : "Roger Moore", "gross" : "$448,249,281" },
+  { "title" : "Dr. No", "year" : 1962, "actor" : "Sean Connery", "gross" : "$440,759,072" },
+  { "title" : "Octopussy", "year" : 1983, "actor" : "Roger Moore", "gross" : "$426,244,352" },
+  { "title" : "The Living Daylights", "year" : 1987, "actor" : "Timothy Dalton", "gross" : "$381,088,866" },
+  { "title" : "A View to a Kill", "year" : 1985, "actor" : "Roger Moore", "gross" : "$321,172,633" },
+  { "title" : "License to Kill", "year" : 1989, "actor" : "Timothy Dalton", "gross" : "$285,157,191" }
+];
+
+// Determine the total cumulative gross of the Bond franchise.
+var sum = 0;
+for (var i=0; i < bondFilms.length; i++) {
+	var value = parseInt(bondFilms[i].gross.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ''));
+	sum += value;
+}
+console.log('Total gross: ' + sum);
+
+
+
+// Create a new array with the names of the Bond films.
+var bondTitles = [];
+for (var i=0; i < bondFilms.length; i++) {
+	bondTitles.push(bondFilms[i].title);
+}
+console.log(bondTitles);
+
+
+// Create a new array `oddBonds`, of only the Bond films released on odd-numbered years.
+var oddBonds = [];
+for (var i=0; i < bondFilms.length; i++) {
+	if (bondFilms[i].year % 2 !== 0) {
+		oddBonds.push(bondFilms[i]);
+	}
+}
+console.log(oddBonds);
+
+
+
+// HUMDINGER
+
+
+
+
+
+
+

From 1e5d37aeb11fe8f16d7beacac597323ddbafc8e9 Mon Sep 17 00:00:00 2001
From: Thom Page <thompage@Thoms-MBP.home>
Date: Thu, 19 May 2016 16:12:46 -0400
Subject: [PATCH 02/14] stuff

---
 unit_01/w01d05/homework/solutions.js          |  2 +
 .../homework/memory_starter/css/style.css     | 67 ++++++++++++++++++
 .../w02d04/homework/memory_starter/index.html | 21 ++++++
 .../w02d04/homework/memory_starter/js/app.js  | 70 +++++++++++++++++++
 .../w02d04/homework/memory_starter/memory.md  | 55 +++++++++++++++
 5 files changed, 215 insertions(+)
 create mode 100644 unit_01/w02d04/homework/memory_starter/css/style.css
 create mode 100644 unit_01/w02d04/homework/memory_starter/index.html
 create mode 100644 unit_01/w02d04/homework/memory_starter/js/app.js
 create mode 100644 unit_01/w02d04/homework/memory_starter/memory.md

diff --git a/unit_01/w01d05/homework/solutions.js b/unit_01/w01d05/homework/solutions.js
index 9d90ee4..b775227 100644
--- a/unit_01/w01d05/homework/solutions.js
+++ b/unit_01/w01d05/homework/solutions.js
@@ -349,3 +349,5 @@ console.log(oddBonds);
 
 
 
+
+
diff --git a/unit_01/w02d04/homework/memory_starter/css/style.css b/unit_01/w02d04/homework/memory_starter/css/style.css
new file mode 100644
index 0000000..a415548
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter/css/style.css
@@ -0,0 +1,67 @@
+@import url(http://fonts.googleapis.com/css?family=Londrina+Shadow);
+@import url(http://fonts.googleapis.com/css?family=Mystery+Quest);
+
+body {
+  background: url(http://subtlepatterns.com/images/transp_bg.png);
+}
+#content {
+  margin: 0 auto;
+  width: 360px;
+}
+
+#header {
+  margin-bottom: 20px;
+}
+
+#title {
+  font-family: 'Londrina Shadow', cursive;
+  font-size: 100px;
+}
+
+button {
+  margin-bottom: 20px;
+}
+
+.row {
+  clear: both;
+}
+
+.column {
+  border: 1px solid #595139;
+  float: left;
+  font-family: 'Londrina Shadow', cursive;
+  font-size: 50px;
+  height: 65px;
+  margin: 5px;
+  text-align: center;
+  vertical-align: middle;
+  width: 50px;
+  transition: background-color 2s;
+}
+
+.column:hover {
+  background-color: #A6977B;
+}
+
+/* when two cards match apply this class to them*/
+.found {
+  background-color: #595139;
+  color: #FFFFFF;
+}
+
+#info {
+  font-family: 'Londrina Shadow', cursive;
+  font-size: 50px;
+}
+
+/* apply to every card when the user wins */
+.won {
+  background-color: #F2F0CE;
+  border: 1px solid #83A603;
+  color: #83A603;
+}
+
+#timer {
+  font-family: 'Mystery Quest', cursive;
+  font-size: 20px;
+}
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter/index.html b/unit_01/w02d04/homework/memory_starter/index.html
new file mode 100644
index 0000000..82773f5
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Memory</title>
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<div id="content">
+		<div id="header">
+			<div id="title">Memory</div>
+		</div>
+		<button>Start Game</button>
+		<div id="game">
+			<!-- append your cards here -->
+		</div>
+		<div id="info">...</div>
+	</div>
+	<script type="text/javascript" src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter/js/app.js b/unit_01/w02d04/homework/memory_starter/js/app.js
new file mode 100644
index 0000000..3163c78
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter/js/app.js
@@ -0,0 +1,70 @@
+window.onload = function() {
+	console.log('loaded');	
+
+	// Invoke your chain of functions and listeners within window.onload
+	// var button = document.getElementsByTagName('button');
+	// button.onclick(function(){
+	// 	start();
+	// })
+start();
+}
+
+
+// USE THIS TO SHUFFLE YOUR ARRAYS
+//o=array
+var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
+function shuffle(o) {
+	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
+		return o;
+};
+
+function start(){
+
+	shuffle(tiles);
+	makeAndDisplayTiles();
+}
+
+function makeAndDisplayTiles(){
+	document.getElementById('game').innerHTML = "";
+	document.getElementById('info').innerHTML = "";
+	for(var i = 0; i<tiles.length;i++){
+		var tile = document.createElement('div');
+		tile.setAttribute('class', 'column');
+		tile.setAttribute('data-value',tiles[i]);
+		document.getElementById('game').appendChild(tile);
+		tile.onclick = function(){
+ 			makePlay(this);
+		};
+	}
+	// addEventsToTiles();
+}
+
+// function addEventsToTiles(){
+// 	var tile = document.getElementsByClassName('column');
+// 	tile.onclick = makePlay(this);
+// }
+
+function makePlay(tile){
+	tile.innerHTML = tile.dataset.value;
+	tile.className += " found";
+}
+
+
+
+function processData(n) {
+	var result="";
+	for(var i = 1; i<=n; i++){
+		var spaces = i;
+		while(spaces <= n-1){
+			result+=" ";
+			spaces++;
+		}
+		var stairs = i;
+		while(stairs > 0){
+			result+='#';
+			stairs--;
+		}
+        result+='\n'
+	}
+	console.log(result);
+} 
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md
new file mode 100644
index 0000000..89b0ef4
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter/memory.md
@@ -0,0 +1,55 @@
+# Memory!
+
+Today we are going to build the game Memory. Write all your code in app.js, but
+look at index.html to get your bearings.
+
+### You will need
+
+#### Data
+
+- an array of ten tiles
+	- your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.]
+
+#### Functions
+
+- `start()`
+	- shuffle the tiles array
+	- then call makeAndDisplayTiles to build and display the gameboard
+- `makeAndDisplayTiles()`
+	- this function should empty the container that will hold the gameboard tiles
+	- it should clear the text in the info div
+	- it should create 10 new game tiles 
+	    - give them the class 'column'
+		- give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like ` <div class="column" data-value="A"></div> `
+		- add the game tiles to the board
+	- then call a function that will add click events to each tile
+- `addEventsToTiles()`
+	- should add click events to each of the gameboard tiles
+	- Each click event should call the makePlay function passing it the tile that was clicked. Strong hint: the tile that was clicked is `this` tile . . . Can you pass `this` as a parameter to the makePlay function? Test it out.
+- `makePlay(tile)`
+	- this function should set the text of the current clicked tile to the value stored in the data attribute
+	- it should add a class of found to the tile
+	- it should add a class of clicked to the tile
+	- if the number of clicked tiles is 2, then it should check for a match
+- `checkForMatch()`
+	- this should retrieve the data-value of the two clicked tiles
+	- if they are a match
+		- the 'clicked' class should be removed from the tiles
+		- the click event should be turned off for those tiles
+		- should check for a win
+	- if no match is found
+		- the text of the clicked cards should be set back to empty
+		- the found and clicked classes should both be removed
+		- BONUS: use setTimeout to keep your cards showing for a hot
+		  moment.
+*After you have the preceding functions working:*
+- `checkForWin()`
+	- if the number of found tiles is 10
+		- add a winning message to the info div
+		- remove the found class
+		- add a won class
+
+## START
+
+- add a click event to the start button, so that when it is clicked a new game is triggered.
+

From efd46de7bccf7b5c35c33de2bad5605cd0a478b3 Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:20:31 -0400
Subject: [PATCH 03/14] Create README.md

---
 unit_01/w01d04/homework/README.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 unit_01/w01d04/homework/README.md

diff --git a/unit_01/w01d04/homework/README.md b/unit_01/w01d04/homework/README.md
new file mode 100644
index 0000000..ad342f1
--- /dev/null
+++ b/unit_01/w01d04/homework/README.md
@@ -0,0 +1,5 @@
+
+1) Javascript Practice
+2) CSS Practice
+
+Follow the instructions for submitting your homework (step-by-step instructions are in the wiki).

From 5662bdc85885f4d856d5c8bd0916072e24402afb Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:22:00 -0400
Subject: [PATCH 04/14] Create CSS.md

---
 unit_01/w01d04/homework/CSS.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 unit_01/w01d04/homework/CSS.md

diff --git a/unit_01/w01d04/homework/CSS.md b/unit_01/w01d04/homework/CSS.md
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/unit_01/w01d04/homework/CSS.md
@@ -0,0 +1 @@
+

From 89e5963b2578a5618c9473c9fbedfd91d4d9225d Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:27:40 -0400
Subject: [PATCH 05/14] Update CSS.md

---
 unit_01/w01d04/homework/CSS.md | 63 ++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/unit_01/w01d04/homework/CSS.md b/unit_01/w01d04/homework/CSS.md
index 8b13789..b3b7a6f 100644
--- a/unit_01/w01d04/homework/CSS.md
+++ b/unit_01/w01d04/homework/CSS.md
@@ -1 +1,64 @@
 
+#CSS Practice
+
+###Part 1- Before you begin the assignment
+Go to the following websites to:   
+  
+1. Read about [CSS Layout](http://learnlayout.com/)  
+2. Practice [CSS selections](http://flukeout.github.io/)   
+
+Next, use the index.html and style.css in this folder to complete the assigment.
+
+###Part 2 - Navigation
+1. Inside the nav element, delete the heading and replace it with 3 **li** tags in an unordered list. 
+- Within each list element, place an **a** and make the text inside of each **a** "Portfolio", "Bio", and "Contact", respectively. Set the **href** property on the **a** tag equal to "#". This will simply direct the link back to the same page.   
+- In your css file, underneath where you see the style for the **nav** (you want to keep all of your navigation styles in the same place), select only the **ul** tag that is inside of the **nav** and give it the following styles...
+
+    ```css
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    ```
+- Select all **li** elements inside the **ul**, inside of the `nav` and make them float left. 
+- Select all of the a tags inside those **li** elements (so much nesting!) and give them the following styles
+
+    ```css
+    display: block;
+    width: 120px;
+    height: 50px;
+    font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    border: 2px solid grey;
+    margin: 25px 10px;
+    text-align: center;
+    padding: 10% 0;
+    text-decoration: none;
+    text-transform: uppercase;
+    ```
+
+###Part 3 - Aligning Left and Right
+1. Try floating all of your **nav li** elements to the right, then move them back to the left.
+- Try giving only one of you **nav li** elements an ID of 'right' and then float just that one right. Remove the ID if you hate how this looks.
+- Give your **nav** element a left margin so that it lines up with the blue boxes on the page, then set it back to 0.
+- Find the aside in the CSS, erase its 'right' property and set its 'left' property to 0.
+- How should you change the style on the large section so that it is flush with the right side?
+
+###Part 4 - Layout 
+1. Locate the **p** tags in each of the small boxed and briefly write your answers to the following five questions in each, respectively
+- What is the default display style of a **div** tag?
+- What is the best way to horizontally center an element?
+- What is the difference between padding and margin?
+- What is the difference between fixed and absolute positioning?
+- What is a 'clearfix'?
+- Give all of your **p** tags a margin of 0px and give your boxes a top/bottom padding of 10px and a right/left padding of 5px, using CSS shorthand
+
+
+
+###Bonus 
+Without adding any new IDs or classes, give each of your **p** tags a different font color from this [page](http://www.crockford.com/wrrrld/color.html). You will need to look up what first-child, last-child, and nth-child pseudo-classes are.
+Set your header, aside, and footer position to 'fixed', add a margin-top of 150px to your aside and set your body height to 2000px. Scroll down and see what happens.
+
+###Experiment! 
+Go to [http://www.cssdesk.com/](http://www.cssdesk.com/), copy and paste your CSS and HTML into the appropriate areas and try adding different colors, display properties, position properties, borders, etc to your elements. Try to make the layout completely unrecognizable.

From 1b6be2e9bb784b5689d76c0a004ab0ac6b5414f8 Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:29:07 -0400
Subject: [PATCH 06/14] Update README.md

---
 unit_01/w01d04/homework/README.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/unit_01/w01d04/homework/README.md b/unit_01/w01d04/homework/README.md
index ad342f1..edcb319 100644
--- a/unit_01/w01d04/homework/README.md
+++ b/unit_01/w01d04/homework/README.md
@@ -1,5 +1,22 @@
+![ga](http://mobbook.generalassemb.ly/ga_cog.png)
 
-1) Javascript Practice
+# WDI-PANTHALASSA
+
+---
+Title: Homework for w01d04 <br>
+Type: Homework<br>
+Duration: "3:00"<br>
+Creator:<br>
+    Original creators: WDI-Archer, WDI-Meeskeeks<br>
+    Adapted by: Kristyn Bryan<br>
+    Course: WDIr Panthalassa<br>
+Competencies: Javascript, CSS<br>
+Prerequisites: Basic Javascript, CSS Selectors<br>
+
+---
+
+
+1) Javascript Practice <br>
 2) CSS Practice
 
 Follow the instructions for submitting your homework (step-by-step instructions are in the wiki).

From 235c96662f038ae05aea2334efd1bbd59578e1ea Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:29:44 -0400
Subject: [PATCH 07/14] Update CSS.md

---
 unit_01/w01d04/homework/CSS.md | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/unit_01/w01d04/homework/CSS.md b/unit_01/w01d04/homework/CSS.md
index b3b7a6f..30ef258 100644
--- a/unit_01/w01d04/homework/CSS.md
+++ b/unit_01/w01d04/homework/CSS.md
@@ -1,5 +1,20 @@
+![ga](http://mobbook.generalassemb.ly/ga_cog.png)
 
-#CSS Practice
+# WDI-PANTHALASSA
+
+---
+Title: Javascript Homework for w01d04 <br>
+Type: Homework<br>
+Duration: "2:00"<br>
+Creator:<br>
+    Original creators: WDI-BLT, WDI-Meeskeeks<br>
+    Adapted by: Kristyn Bryan<br>
+    Course: WDIr Panthalassa<br>
+Competencies: Javascript<br>
+Prerequisites: Basic Javascript<br>
+
+---
+# Homework - CSS Selector Practice
 
 ###Part 1- Before you begin the assignment
 Go to the following websites to:   

From 1e1c31edd8b0682e81a1e8ffc977bd0e5ef55bf0 Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:30:44 -0400
Subject: [PATCH 08/14] Update CSS.md

---
 unit_01/w01d04/homework/CSS.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/unit_01/w01d04/homework/CSS.md b/unit_01/w01d04/homework/CSS.md
index 30ef258..a70e80a 100644
--- a/unit_01/w01d04/homework/CSS.md
+++ b/unit_01/w01d04/homework/CSS.md
@@ -7,11 +7,11 @@ Title: Javascript Homework for w01d04 <br>
 Type: Homework<br>
 Duration: "2:00"<br>
 Creator:<br>
-    Original creators: WDI-BLT, WDI-Meeskeeks<br>
+    Original creators: WDI-Archer<br>
     Adapted by: Kristyn Bryan<br>
     Course: WDIr Panthalassa<br>
-Competencies: Javascript<br>
-Prerequisites: Basic Javascript<br>
+Competencies: CSS Selectors<br>
+Prerequisites: CSS basics, CSS selectors<br>
 
 ---
 # Homework - CSS Selector Practice

From 7118807e54538acc4921c3d47afe8623e336603f Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:31:19 -0400
Subject: [PATCH 09/14] Update README.md

---
 unit_01/w01d04/homework/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/unit_01/w01d04/homework/README.md b/unit_01/w01d04/homework/README.md
index edcb319..c726fb2 100644
--- a/unit_01/w01d04/homework/README.md
+++ b/unit_01/w01d04/homework/README.md
@@ -5,7 +5,7 @@
 ---
 Title: Homework for w01d04 <br>
 Type: Homework<br>
-Duration: "3:00"<br>
+Duration: "3:00-4:00"<br>
 Creator:<br>
     Original creators: WDI-Archer, WDI-Meeskeeks<br>
     Adapted by: Kristyn Bryan<br>

From 452612c1f70d32aee012817b3ea795fc2faed046 Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:31:58 -0400
Subject: [PATCH 10/14] Update CSS.md

---
 unit_01/w01d04/homework/CSS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/unit_01/w01d04/homework/CSS.md b/unit_01/w01d04/homework/CSS.md
index a70e80a..36a459b 100644
--- a/unit_01/w01d04/homework/CSS.md
+++ b/unit_01/w01d04/homework/CSS.md
@@ -3,7 +3,7 @@
 # WDI-PANTHALASSA
 
 ---
-Title: Javascript Homework for w01d04 <br>
+Title: CSS Selector Homework for w01d04 <br>
 Type: Homework<br>
 Duration: "2:00"<br>
 Creator:<br>

From 13567b54d68a85c9ff42f734b07ef3cffb0ab84a Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 16:52:57 -0400
Subject: [PATCH 11/14] Create index.html

---
 unit_01/w01d04/homework/index.html | 210 +++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 unit_01/w01d04/homework/index.html

diff --git a/unit_01/w01d04/homework/index.html b/unit_01/w01d04/homework/index.html
new file mode 100644
index 0000000..03ec16d
--- /dev/null
+++ b/unit_01/w01d04/homework/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <title>Document</title>
+</head>
+
+<body>
+
+  <div class="container">
+<<<<<<< HEAD
+    <header>
+      <nav>
+        <ul>
+          <li><a href="#">Portfolio</a></li>
+          <li><a href="#">Bio</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <aside>
+      <h1>Sidebar</h1>
+    </aside>
+
+    <section>
+      <h1>content</h1>
+      <div class="small-boxes">
+        <div class="box">
+            <p>The default display style of a &lt;div&gt; tag is <strong>BLOCK</strong>.</p>
+        </div>
+        <div class="box">
+          <p>The best way to horizontally center an element is to set the <em>left-margin</em> and <em>right-margin</em> to <em>auto</em> or use the <em>margin: 0 auto</em> declaration.</p>
+        </div>
+        <div class="box">
+          <p><em>Padding</em> is the space between an element and it's border ("insidey" or "indoorsy"), while <em>margin</em> is the space between that border and an adjacent element ("outsidey" or "outdoorsy").</p>
+        </div>
+        <div class="box">
+          <p><em>Fixed</em> positioning places an element in relation to the browser window, while <em>absolute</em> positioning places an element in relation to it's container.</p>
+        </div>
+        <div class="box">
+          <p>A <em>clearfix</em> will auto-size a floating element's container to match the floating element itself.  Otherwise, the element can flow outside it's container in wonky ways.</p>
+        </div>
+       </div>
+       <div class="big-boxes">
+         <div class="big-box">
+        </div>
+         <div class="big-box">
+        </div>
+       </div>
+    </section>
+
+    <footer>
+      <h1>footer</h1>
+    </footer>
+
+=======
+  <header>
+    <nav>
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+      <h1>
+          <ul>
+              <il><a href=# "Portfolio"></il>
+              <il><a href=# "Bio"></il>
+              <il><a href=# "Contact"></il>
+          </ul>
+      </h1>
+=======
+
+      <ul>
+        <ul id="navlist">
+        <li><a href="#"> Portfolio</li>
+
+        <li><a href= "#"> Bio</li>
+        
+        <li><a href="#"> Contact</li>
+          </ul>
+>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
+=======
+      <ul>
+      <li>
+        <a href="#">Portfolio</a>
+      </li>
+      <li>
+        <a href="#">Bio</a>
+      </li>
+      <li>
+        <a href="#">Contact</a>
+      </li>
+<<<<<<< HEAD
+>>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
+=======
+>>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
+>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
+=======
+      <ul id="one">
+      <li id="two"><a id="three" href="#portfolio">Portfolio</a></li>
+      <li id="two"><a id="three" href="#bio">Bio</a></li>
+      <li id="two"><a id="three" href="#contact">Contact</a></li>
+      </ul>
+>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
+    </nav>
+  </header>
+  <aside>
+    <h1>Sidebar</h1>
+  </aside>
+  <section>
+    <h1>content</h1>
+    <div class="small-boxes">
+      <div class="box">
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+          <p>block style</p>
+      </div>
+      <div class="box">
+        <p>Set the left and right margins to auto</p>
+      </div>
+      <div class="box">
+        <p>Padding is the space between the content and the border, whereas margin is the space outside the border.</p>
+      </div>
+      <div class="box">
+        <p>Fixed position specifies the positioning of a element with respect to the window. Absolute 's offset is relative to its “containing block”.</p>
+      </div>
+      <div class="box">
+        <p>Clearfix will apply a small bit of content, hidden from view, after the parent element which clears the float or an element.</p>
+=======
+          <p>
+          Div tags' default display styles are blocks. </p>
+      </div>
+      <div class="box">
+        <p>What is the best way to horizontally style an element?
+        </p>
+      </div>
+      <div class="box">
+        <p>
+
+        The differance between padding and margin is.
+        padding is the space between the content and the border, margin is the transparent part
+        that seperates the border from other items</p>
+      </div>
+      <div class="box">
+        <p>
+
+         Fixed elements do not move in a browser, absolute positions are positioned relative to the parent element</p>
+      </div>
+      <div class="box">
+        <p>
+
+
+        "Clearfix" is a method used to fix child elements</p>
+>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
+=======
+          <p>div's are static unless otherwise specified</p>
+      </div>
+      <div class="box">
+        <p>auto margin will split the margin space equally on both sides</p>
+      </div>
+      <div class="box">
+        <p>padding is the space around an element whereas margin is the space between elements. like if I had HELLO inside a box, the space around HELLO is padding. the space around the box is margin.</p>
+      </div>
+      <div class="box">
+        <p>fixed positioning doesn't move as you scroll. absolute positioning acts similarly to fixed except it's position is relative to a parent element. if none are nearby, it uses the document's body.</p>
+      </div>
+      <div class="box">
+        <p>dirty trick for fixing an element who's image is taller than the container it's in.</p>
+<<<<<<< HEAD
+>>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
+=======
+>>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
+>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
+=======
+        <p>div's display is block</p>
+      </div>
+      <div class="box">
+        <p>Kind of depends, but [margin: 0 auto] is good</p>
+      </div>
+      <div class="box">
+        <p>The Content is the nucleus and sits at the center.
+      The first layer surrounding it is the Padding and it clears the area and protects the content. The Border surrounds the padding. 
+      Lastly, the Margin surrounds all 3 is transparent and can be thought of as the space between boxes</p>
+      </div>
+      <div class="box">
+        <p>Absolute position elements are removed from the flow of elements on the page. An element w/ this type of positioning is not affected by/doesn't affect other elements. A fixed position element is positioned relative to the viewport, which doesn't change when the window is scrolled.</p>
+      </div>
+      <div class="box">
+        <p>If you are floating an image, for examoke, and an element next to it has a border that looks ugly by running behind it, using [overflow: auto] under a "clearfix" class in a [div] tag 
+        will smooth it out and make the border appear around the image as well.</p>
+>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
+      </div>
+     </div>
+     <div class="big-boxes">
+       <div class="big-box">
+      </div>
+       <div class="big-box">
+      </div>
+     </div>
+  </section>
+  <footer>
+    <h1>footer</h1>
+  </footer>
+>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
+  </div>
+
+</body>
+</html>
+

From be1638d57f4811423a163e25f3d342a516164c04 Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 17:03:27 -0400
Subject: [PATCH 12/14] Update index.html

---
 unit_01/w01d04/homework/index.html | 149 -----------------------------
 1 file changed, 149 deletions(-)

diff --git a/unit_01/w01d04/homework/index.html b/unit_01/w01d04/homework/index.html
index 03ec16d..9e15bd0 100644
--- a/unit_01/w01d04/homework/index.html
+++ b/unit_01/w01d04/homework/index.html
@@ -54,155 +54,6 @@
     <footer>
       <h1>footer</h1>
     </footer>
-
-=======
-  <header>
-    <nav>
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <h1>
-          <ul>
-              <il><a href=# "Portfolio"></il>
-              <il><a href=# "Bio"></il>
-              <il><a href=# "Contact"></il>
-          </ul>
-      </h1>
-=======
-
-      <ul>
-        <ul id="navlist">
-        <li><a href="#"> Portfolio</li>
-
-        <li><a href= "#"> Bio</li>
-        
-        <li><a href="#"> Contact</li>
-          </ul>
->>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
-=======
-      <ul>
-      <li>
-        <a href="#">Portfolio</a>
-      </li>
-      <li>
-        <a href="#">Bio</a>
-      </li>
-      <li>
-        <a href="#">Contact</a>
-      </li>
-<<<<<<< HEAD
->>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
-=======
->>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
->>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
-=======
-      <ul id="one">
-      <li id="two"><a id="three" href="#portfolio">Portfolio</a></li>
-      <li id="two"><a id="three" href="#bio">Bio</a></li>
-      <li id="two"><a id="three" href="#contact">Contact</a></li>
-      </ul>
->>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
-    </nav>
-  </header>
-  <aside>
-    <h1>Sidebar</h1>
-  </aside>
-  <section>
-    <h1>content</h1>
-    <div class="small-boxes">
-      <div class="box">
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-          <p>block style</p>
-      </div>
-      <div class="box">
-        <p>Set the left and right margins to auto</p>
-      </div>
-      <div class="box">
-        <p>Padding is the space between the content and the border, whereas margin is the space outside the border.</p>
-      </div>
-      <div class="box">
-        <p>Fixed position specifies the positioning of a element with respect to the window. Absolute 's offset is relative to its “containing block”.</p>
-      </div>
-      <div class="box">
-        <p>Clearfix will apply a small bit of content, hidden from view, after the parent element which clears the float or an element.</p>
-=======
-          <p>
-          Div tags' default display styles are blocks. </p>
-      </div>
-      <div class="box">
-        <p>What is the best way to horizontally style an element?
-        </p>
-      </div>
-      <div class="box">
-        <p>
-
-        The differance between padding and margin is.
-        padding is the space between the content and the border, margin is the transparent part
-        that seperates the border from other items</p>
-      </div>
-      <div class="box">
-        <p>
-
-         Fixed elements do not move in a browser, absolute positions are positioned relative to the parent element</p>
-      </div>
-      <div class="box">
-        <p>
-
-
-        "Clearfix" is a method used to fix child elements</p>
->>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
-=======
-          <p>div's are static unless otherwise specified</p>
-      </div>
-      <div class="box">
-        <p>auto margin will split the margin space equally on both sides</p>
-      </div>
-      <div class="box">
-        <p>padding is the space around an element whereas margin is the space between elements. like if I had HELLO inside a box, the space around HELLO is padding. the space around the box is margin.</p>
-      </div>
-      <div class="box">
-        <p>fixed positioning doesn't move as you scroll. absolute positioning acts similarly to fixed except it's position is relative to a parent element. if none are nearby, it uses the document's body.</p>
-      </div>
-      <div class="box">
-        <p>dirty trick for fixing an element who's image is taller than the container it's in.</p>
-<<<<<<< HEAD
->>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
-=======
->>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
->>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
-=======
-        <p>div's display is block</p>
-      </div>
-      <div class="box">
-        <p>Kind of depends, but [margin: 0 auto] is good</p>
-      </div>
-      <div class="box">
-        <p>The Content is the nucleus and sits at the center.
-      The first layer surrounding it is the Padding and it clears the area and protects the content. The Border surrounds the padding. 
-      Lastly, the Margin surrounds all 3 is transparent and can be thought of as the space between boxes</p>
-      </div>
-      <div class="box">
-        <p>Absolute position elements are removed from the flow of elements on the page. An element w/ this type of positioning is not affected by/doesn't affect other elements. A fixed position element is positioned relative to the viewport, which doesn't change when the window is scrolled.</p>
-      </div>
-      <div class="box">
-        <p>If you are floating an image, for examoke, and an element next to it has a border that looks ugly by running behind it, using [overflow: auto] under a "clearfix" class in a [div] tag 
-        will smooth it out and make the border appear around the image as well.</p>
->>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
-      </div>
-     </div>
-     <div class="big-boxes">
-       <div class="big-box">
-      </div>
-       <div class="big-box">
-      </div>
-     </div>
-  </section>
-  <footer>
-    <h1>footer</h1>
-  </footer>
->>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
   </div>
 
 </body>

From 172746cda758eeea3c171896aeec1f85ba73d7a9 Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 17:03:49 -0400
Subject: [PATCH 13/14] Update index.html

---
 unit_01/w01d04/homework/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/unit_01/w01d04/homework/index.html b/unit_01/w01d04/homework/index.html
index 9e15bd0..85443a5 100644
--- a/unit_01/w01d04/homework/index.html
+++ b/unit_01/w01d04/homework/index.html
@@ -9,7 +9,6 @@
 <body>
 
   <div class="container">
-<<<<<<< HEAD
     <header>
       <nav>
         <ul>

From e6e66fcbcc117fbc0d5b23629a0aca7cf243a16b Mon Sep 17 00:00:00 2001
From: Kristyn Bryan <kristynrb@gmail.com>
Date: Thu, 19 May 2016 17:08:32 -0400
Subject: [PATCH 14/14] Create style.css

---
 unit_01/w01d04/homework/style.css | 299 ++++++++++++++++++++++++++++++
 1 file changed, 299 insertions(+)
 create mode 100644 unit_01/w01d04/homework/style.css

diff --git a/unit_01/w01d04/homework/style.css b/unit_01/w01d04/homework/style.css
new file mode 100644
index 0000000..fe70ae9
--- /dev/null
+++ b/unit_01/w01d04/homework/style.css
@@ -0,0 +1,299 @@
+*{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+       -o-box-sizing: border-box;
+}
+
+body{
+  margin: 0;
+  color: #111;
+  background-color: #A9B091;
+  font-family: helvetica;
+}
+
+h1 {
+  margin:0;
+  color: white;
+}
+
+.container{
+  position: relative;
+}
+
+header{
+  position: fixed;
+  background-color: #111;
+}
+
+nav{
+  width: 80%;
+  height: 100px;
+  margin-left: 212px;
+}
+
+nav ul {
+  background-color: #846863;
+}
+
+nav {
+  width: 100%;
+  height: 100px;
+  margin: ;
+}
+
+nav ul{
+  margin: 0;
+}
+
+nav h1 ul{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+
+p{
+  text-align: center;
+  margin: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 5px;
+  padding-left: 5px;
+
+}
+
+#one{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+nav h1 ul li{
+  float: left;
+}
+
+nav h1 ul li:first-child{
+  float: right;
+}
+
+nav ul li {
+  float: left;
+}
+
+#two{
+  float: left;
+  margin:;
+}
+
+#three{
+  display: block;
+  width: 120px;
+  height: 50px;
+  font-weight: bold;
+  background-color: transparent;
+  border: 2px solid grey;
+  margin: 25px 10px;
+  text-align: center;
+  padding: 10% 0;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+#navcontainer ul
+{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+ul#navlist
+{
+padding: 0;
+margin: 0;
+list-style-type: none;
+float: left;
+width: 100%;
+color: #fff;
+background-color: #036;
+
+}
+  nav{
+    position:relative;
+    left: 0px;
+    width: 200px;
+  }
+}
+/*
+display: block;
+width: 120px;
+height: 50px;
+font-weight: bold;
+color: #000;
+background-color: transparent;
+border: 2px solid grey;
+margin: 25px 10px;
+text-align: center;
+padding: 10% 0;
+text-decoration: none;
+text-transform: uppercase;
+*/
+ul#navlist li { display: inline; }
+
+ul#navlist li a
+{
+
+display: block;
+width: 120px;
+height: 50px
+font-weight: bold;
+color: #000;
+background-color: transparent
+border: 2px solid grey;
+margin: 25px 10px;
+text-align: center;
+padding: 10% 0;
+text-decoration: none;
+text-transform: uppercase;
+}
+
+ul#navlist li a:hover{
+background-color: #369;
+color: #fff;
+}
+
+
+header{
+  width: 100%;
+}
+
+aside{
+  position: inherit;
+  right: 0px;
+  width: 200px;
+  height: 500px;
+  background-color: slategrey;
+  position: fixed;
+  left: 0px;
+  width: 200px;
+  height: 700px;
+  background-color: slategrey;
+  margin-top: 100px;
+  position: absolute;
+}
+p {
+    padding: 0px 10px
+    ;
+}
+section{
+  margin-right: 0px;
+  height: 700px;
+  float: right;
+}
+
+p {
+  margin: 0px;
+}
+
+footer{
+  left: 0;
+  height: 70px;
+  background-color: #846863;
+  width: 100%;
+}
+
+.small-boxes{
+  text-align: center;
+  padding: 10px 5px;
+  margin-top: 90px;
+}
+
+.small-boxes .box:first-child p{
+  color: tomato;
+}
+
+.small-boxes .box:last-child p{
+  color: chocolate;
+}
+
+.small-boxes .box:nth-child(2) p{
+  color: lime;
+}
+
+.small-boxes .box:nth-child(3) p{
+  color: orange;
+}
+
+.small-boxes .box:nth-child(4) p{
+  color: cornsilk;
+}
+
+.box:first-child{
+  color: #EACDBE;
+  text-align: left;
+  display: inline-block;
+  vertical-align: bottom;
+  height: 200px;
+  width: 200px;
+  background-color: #36413E;
+  margin-bottom: 5px;
+}
+.box:nth-child(2){
+  color: #EADFBE;
+  text-align: left;
+  display: inline-block;
+  vertical-align: bottom;
+  height: 200px;
+  width: 200px;
+  background-color: #36413E;
+  margin-bottom: 5px;
+}
+.box:nth-child(3){
+  color: #EADEBE;
+  text-align: left;
+  display: inline-block;
+  vertical-align: bottom;
+  height: 200px;
+  width: 200px;
+  background-color: #36413E;
+  margin-bottom: 5px;
+}
+.box:nth-child(4){
+  color: #EAEEBE;
+  text-align: left;
+  display: inline-block;
+  vertical-align: bottom;
+  height: 200px;
+  width: 200px;
+  background-color: #36413E;
+  margin-bottom: 5px;
+}
+.box:last-child{
+  color: #EACFBE;
+  text-align: left;
+  display: inline-block;
+  vertical-align: bottom;
+  height: 200px;
+  width: 200px;
+  background-color: #36413E;
+  margin-bottom: 5px;
+  padding: 10px 5px;
+}
+
+.big-boxes{
+  text-align: center
+}
+
+.big-box{
+  display: inline-block;
+  height:400px;
+  width: 506px;
+  background-color: #36413E;
+}
+
+p {
+  margin: 0px;
+  padding: 10px 5px 10px 5px;
+}