diff --git a/css/style.css b/css/style.css
index e69de29..1e5b2df 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,233 @@
+
+
+#container {
+      margin: 0 auto;
+    width: 960px;
+}
+
+#header {
+	color: gainsboro;
+	font-size: 16px;
+	font-family: Arial;
+	background-color: black;
+   width: 870px;
+    padding: 30px;
+    border: 15px white;
+    margin-bottom: 15px; 
+
+}
+
+#header2 {
+	color: white;
+	font-size: 14px;
+	font-family: Arial;
+	background-color: black;
+	font-weight: lighter: 
+   width: 320px;
+    padding: 12px;
+    border: 15px white;
+    margin-bottom: 15px; 
+}
+
+#background {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 400px;
+    background-color: whitesmoke;
+    opacity: 0.4; 
+     z-index:-1;
+
+    border-bottom: thick none white;
+}
+
+#photobanner {
+    display: block;
+    max-width:870px;
+    max-height:870px;
+    width: auto;
+    height: auto;
+    box-shadow: 15px 15px 100px gray;
+    margin-bottom: 30px; 
+}
+<!--     webkit-box-shadow: 0 8px 6px -6px black;
+    moz-box-shadow: 0 8px 6px -6px black;
+    box-shadow: 0 8px 6px -6px black; -->
+	
+/*the # is an ID selector. CAN ONLY BE USED ONCE?*/
+
+#current-weather {
+	color:orange;
+}
+
+#mid-box {
+	color: black;
+	/*border: solid green;*/
+	padding: 10px ; 
+	margin: 10px;
+	font-family: Arial;
+	font-size:16px;
+	font-weight: lighter;
+}
+
+/*this is a class selector. all stuff of this class will get these styles*/
+
+#headerrowwidth { 
+   width: 100px;
+}
+
+/*note: the social-media doesn't work yet*/;
+#social-media {
+  float: left; /* float the <li> elements inside #social-media element left */
+  background:url(../images/socialNav.png);
+  margin: 3px;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* social-media hover */
+#social-linked:hover {
+  background-position: 0px 0px; 
+}
+
+#social-twit:hover {
+  background-position: -60px 0px; 
+}
+
+#social-media .facebook:hover {
+  background-position: -120px 0px; 
+}
+
+#social-media .rss:hover {
+  background-position: -180px 0px; 
+}
+
+.threeimg {
+  padding:1px;
+   border:5px solid gainsboro;
+   background-color: white;
+}
+
+.threebox {
+    color: black;
+    font-size: 18px;
+    font-family: Arial;
+    font-weight: lighter: 
+ }
+
+.threeboxdesc {
+    color: black;
+    font-size: 12px;
+    font-family: Arial;
+    font-weight: lighter: 
+ }
+
+.read-more {
+	color: deepskyblue;    
+     font-family: Arial;
+     font-size: 12px;
+	}
+
+.threeboxtable {
+    margin-bottom: 20px;
+    }
+
+.footer {
+    color: gainsboro;
+    font-size: 14px;
+    font-family: Arial;
+    background-color: black;
+    font-weight: lighter;    
+    width: 870px;
+    padding: 12px;
+    border: 15px white;
+    margin-bottom: 15px; 
+}
+
+.logoimg {
+    float: right;
+    display: block;
+    max-width:40px;
+    max-height:40px;
+    width: auto;
+    height: auto;
+}
+
+.logoimg2 {
+    float: right;
+    max-width:400px;
+    max-height:400px;
+    width: auto;
+    height: auto;
+}
+
+.hboxtitle {
+}
+
+.footer-txt {
+    color: grey;
+    font-size: 12px;
+    font-family: Arial;
+/*    font-weight: lighter:*/ 
+ /*  width: 320px;
+    padding: 12px;
+    border: 15px white;
+    margin-bottom: 15px; */
+}
+	
+}
+.mammal {
+	background-color: lavender;
+	font-weight: bold;
+}
+
+.bird {
+	background-color: lightGray;
+	font-style: italic;
+}
+
+.fish {
+	background-color: lightYellow;
+	text-decoration: underline;
+}
+
+/*Grouping Selectors*/
+
+ul, ol {
+    text-align: left;
+    color: grey;
+}
+
+
+
+#mouse { color: grey;}
+
+#canary { color: orangeRed;}
+
+#penguin{ color: black;}
+
+#salmon{ color: salmon;}
+
+#cat{ color: sienna;}
+
+#goldfish{ color: gold;}
+
+#dog{ color: tan;}
+
+#sheep{ color: steelBlue;}
+
+#parakeet{ color: lime;}
+
+#tuna { color: purple;}
+
+.classSel {
+    background-color: red;
+    color: white;
+    }
+
+.classSel2 {
+    background-color: yellow;
+    color: white;
+    }
\ No newline at end of file
diff --git a/index.html b/index.html
index 61786f7..d4721cc 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,210 @@
-<!doctype html>
+<!DOCTYPE html>
+
 <html>
-  <head>
-    <link rel="stylesheet" href="css/style.css"
-  </head>
-  <body>
-  </body>
-</html>
\ No newline at end of file
+<head>
+	<title>Hello World: Title On The Tab</title>
+	<meta name="description" content="first with with HTML">
+	<meta name="keywords" contents="WDI, HK, GA">
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+	<!-- the html page is now linked to stylesheet, the custom.css. The link to the stylesheet can be relative or absolute. You type <link followed by TAB -->
+</head>
+<body>
+	<div id="container">
+
+	<div id="background">
+</div>
+	<!-- <h2 id="header">Home    About    Services    Blog   Contact Us</h2> --> 
+	<!-- <p>Welcome to this Page!</p> -->
+
+<table id="header" class="threeboxtable" >
+	<tbody>
+	<tr>
+                    <td  width=50 px>
+                    	<a href="http://www.home.com" STYLE="text-decoration: none">Home</a>
+                   </td>
+                   
+                    <td width=50 px>
+                    	<a href="http://www.about.com"STYLE="text-decoration: none">About</a>
+                    </td>
+                   
+                    <td width=65 px>
+                    	<a href="http://www.services.com"STYLE="text-decoration: none">Services</a>
+                    </td>
+          	   <td width=40 px>
+            		<a href="http://www.blog.com"STYLE="text-decoration: none">Blog</a>
+                    </td>
+             <td>
+                    	<a href="http://www.contactus.com"STYLE="text-decoration: none">Contact Us</a>
+                    </td>                                        	     
+             </tr>
+             
+             </tbody>   
+  </table>
+
+<table width = 870px class="threeboxtable" >
+	<tbody>
+	<tr>
+                    <td>
+                    	<a href="http://www.busyhands.com"><img src="images/logo.png"></a>
+                   </td>
+                   
+                    <td>
+                    	<a href="http://www.rss.com"><img src="images/rss-grey.png" class="logoimg"></img>
+                    </td>
+                   
+                    <td>
+                    	<a href="http://www.facebook.com"><img src="images/facebook-grey.png" class="logoimg"></img>
+                    </td>
+          	   <td>
+            		<a href="http://www.twitter.com"><img src="images/twitter-grey.png" class="logoimg"></img>
+		
+                    </td>
+             <td>
+                    	<a href="http://www.linkedin.com"><img src="images/linkedin-grey.png"  class="logoimg"></img>
+                    </td>                                        	     
+             </tr>
+             
+             </tbody>   
+  </table>
+
+	<!-- <h2 id="current-weather">Today is sunny</h2> -->
+<!-- the line above (h2) is now influeced by the ID in the stylesheet -->
+	<div>
+		<img src="images/photobanner.png" id="photobanner"></img>
+	</div>
+
+	<div>
+<table width= 880px>
+	<tbody>
+	<tr>
+                    <td id="mid-box">/Description of the mid-box
+                    </td>
+                   <td><a href="http://www.nba.com"><img src="images/button_blurb.png" class="logoimg2"></a>
+                    </td>
+                     
+               </tr>
+               </tbody>
+</table>
+	</div>
+<table class="threeboxtable" >
+	<tbody>
+	<tr>
+                    <td>
+                    	<p class="threebox">Home Box 1</p>
+                    		<img src="images/photo_column1.jpg" class="threeimg"></img>
+                    	<p class="threeboxdesc">/Description of pictures above.</p>
+                    	<a href="http://www.readmore.com" class="read-more">Read more >></a>
+                    </td>
+                    <td>
+                    	<p class="threebox">Home Box 2</p>
+                    		<img src="images/photo_column2.jpg" class="threeimg"></a>
+                    	<p class="threeboxdesc">/Description of pictures above.</p>
+                    	<a href="http://www.readmore.com" class="read-more">Read more >></a>
+                    </td>
+                    <td>
+                    	<p class="threebox">Home Box 3</p>
+                    		<img src="images/photo_column3.jpg" class="threeimg"></a>
+                    	<p class="threeboxdesc">/Description of pictures above.</p>
+                    	<a href="http://www.readmore.com" class="read-more">Read more >></a>
+                    </td>
+                    	     
+             </tr>
+             
+             </tbody>   
+  </table>
+
+<table class="footer">
+	<tbody >
+	<tr>
+                    <td>
+                    	<p>Blogroll</p>
+                    	<p class="footer-txt">/Description of pictures above.</p>
+                    	<p class="read-more">Read more >></p>
+                    </td>
+                    <td>
+                    	<p>Text widget</p>
+                    	<p class="footer-txt">/Description of pictures above.</p>
+                    	<p class="read-more">Read more >></p>
+                    </td>
+                    <td>
+                    	<p>Meta widget</p>               	
+                    	<p class="footer-txt">/Description of pictures above.</p>
+                    	<p class="read-more">Read more >></p>
+                    </td>
+                    	     
+             </tr>
+             
+             </tbody>   
+  </table>
+
+</div>
+
+<!-- <h2 id="header2"></h2> -->
+<!-- 
+	<h2>Drinks I like</h2>
+	<div>
+	<p class="container">There are many drinks I like, including:</p>
+	</div>
+		<img src="images/photo_column1.jpg"></img>
+	<div>
+		<img src="images/photo_column2.jpg"></img>
+	</div>
+	<div>
+		<img src="images/photo_column3.jpg"></img>
+	</div>
+
+
+
+	<ul>
+		<li><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRP7O0BRoFuCdtXGYhZrNO1REfH0Ij4sIy2q8dScbk5qVAJTXpW">Alcohol</a></li>
+		<li>Juice</li>
+		<li>Water</li>
+	</ul>
+<table>
+	<tbody>
+	<tr>
+                    <td>
+                    	<a href="http://www.nba.com"><img src="http://40.media.tumblr.com/0bac5d378be6f117542ac97a7678801e/tumblr_nlcszmfQik1rnse2uo1_250.jpg"></a></td>
+                    <td></td>
+                    <td><a href="http://www.nba.com"><img src="http://40.media.tumblr.com/0bac5d378be6f117542ac97a7678801e/tumblr_nlcszmfQik1rnse2uo1_250.jpg"></a></td>     
+             </tr>
+             
+             </tbody>   
+             </table>
+	<p>Note: these are identical pictures of drinks. One of them also links to another website.</p>
+	<h2>Foods I like</h2>
+	<p>There are also many foods I like, including, in order of preferenceL</p>
+		<ol>
+			<li>Solid foods</li>
+			<li>Non-solid foods</li>
+			<li>Semi-solid foods</li>
+		</ol>
+	<img src="http://40.media.tumblr.com/e0c17931ee05ec24958c9fa744f8b407/tumblr_nlao5c0UGM1rnse2uo1_250.jpg">
+	<p>Note: this is a picture of food; but not a link to a website.</p>
+	<p class="classSel">.</p>
+	<p class="classSel2">.</p>
+
+	<!-- <element_tag attr1=value1 attr2=value2> content </element_tag> -->
+	
+<!-- 	<p> Below are solutions to CSS Paths Exercise 1</p>
+<li class="mammal" id="mouse"> mouse </li>
+<li class="bird" id="canary"> canary</li>
+<li class="bird" id="penguin"> penguin </li>
+<li class="fish" id="salmon">salmon </li>
+<li class="mammal" id="cat"> cat </li>
+<li class="fish" id="goldfish"> goldfish </li>
+<li class="mammal" id="dog"> dog </li>
+<li class="mammal" id="sheep"> sheep </li>
+<li class="bird" id="parakeet"> parakeet </li>
+<li class="fish" id="tuna">tuna  </li> --> 
+
+<!-- <---<div id="social-media">
+            		<class="social-linked"><a href="#">LinkedIn</a>
+	</div>-->
+<!-- 
+<img src="images/socialNav.png"></img>
+
+ --> 
+
+</body>
+</html>