add more css

Kevin Lam · Kevin Lam · commit f7c8730e5149 · 2016-10-18T15:41:26.000-07:00
diff --git a/index.html b/index.html
@@ -1,45 +1,56 @@
 <!doctype html>
 <html>
+
 <head>
 
-<title>Day 1 Page</title>
+    <title>Day 1 Page</title>
 
-<link type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
-<link type="text/css" href="style.css"   />
+    <link type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
+    <link rel="stylesheet" type="text/css"
+      href="https://fonts.googleapis.com/css?family=Font+Name">
+    <link type="text/css" href="style.css" />
 
 </head>
 
 <body>
-
-<h1> Day 1 Page</h1>
-<img src="https://i.ytimg.com/vi/Sw-Mug7Opvw/maxresdefault.jpg" alt="KD and Steph, you know what it is">
-
-<h1> Bless KD and the Warriors </h1>
-<p>KD and Steph are gonna make it rain at Oracle Arena. Who's hype about this? Splash brothers just became Splash fam.</p>
-<hr>
-
-<h2>But don't forget Klay and Draymond</h2>
-<p>
-  Klay thompson scored 37 points in one quarter. Who the hell does that?
-  <a href="https://upload.wikimedia.org/wikipedia/commons/5/5c/Klay_Thompson_vs._Jared_Dudley_(cropped).jpg">
-    Here's Klay making a sick lay-up.
-  </a>
-</p>
-<p>
-  Draymond is key to the warriors defense. He is essentially our anchor and our point guard...sorta.
-  <a href="https://blog-blogmediainc.netdna-ssl.com/upload/SportsBlogcom/2159727/0344126001456771564_filepicker.jpg">
+  <div class="wrapper">
+    <header>
+      <h1 id="welcome-mat"> Day 1 Page</h1>
+    </header>
+
+    <main>
+        <img src="https://i.ytimg.com/vi/Sw-Mug7Opvw/maxresdefault.jpg" alt="KD and Steph, you know what it is">
+
+        <h2> Bless KD and the Warriors </h1>
+        <p>KD and Steph are gonna make it rain at Oracle Arena. Who's hype about this? Splash brothers just became Splash fam.</p>
+        <hr>
+
+        <h2>But don't forget Klay and Draymond</h2>
+        <p>Klay thompson scored 37 points in one quarter. Who the hell does that?<a href="https://upload.wikimedia.org/wikipedia/commons/5/5c/Klay_Thompson_vs._Jared_Dudley_(cropped).jpg">Here's Klay making a sick lay-up.</a></p>
+        <p>
+            Draymond is key to the warriors defense. He is essentially our anchor and our point guard...sorta.
+            <a href="https://blog-blogmediainc.netdna-ssl.com/upload/SportsBlogcom/2159727/0344126001456771564_filepicker.jpg">
     Draymond flexing after an and-one.
-  </a>
-</p>
-<p>
-  NBA champion Steve Kerr bringing over his magic. Literally.
-  <a href="http://www.blogdebasket.com/files/steve_kerr_1.jpg">
+    </a>
+        </p>
+        <p>
+            NBA champion Steve Kerr bringing over his magic. Literally.
+            <a href="http://www.blogdebasket.com/files/steve_kerr_1.jpg">
     The mastermind, Steve Kerr.
-  </a>
-</p>
+    </a>
+        </p>
 
+    </main>
 
+    <footer>
+      <p>All of these images brought to you by a quick search on Google. I'm sorry
+      if I mess up any sort of copyright issue. I'm just doing this for a
+      javascript workshop. </p>
+
+    </footer>
+  </div>
 
 
 </body>
+
 </html>
diff --git a/style.css b/style.css
@@ -1,9 +1,27 @@
 
-/* 
-	STYLE.CSS:
-	One stylesheet to rule them all.
-	
-	selector { property:value }
-	
-*/
+@import url(https://fonts.googleapis.com/css?family=Lobster);
 
+.wrapper {
+  width: 600px;
+  margin: auto;
+}
+
+header {
+  height: 100px;
+  background-color: #76D7C4;
+}
+
+main {
+  height: 100px;
+  background-color: #76D7C4;
+  font-family: 'Lobster', cursive;
+}
+
+footer {
+  height: 100px;
+  background-color: #76D7C4;
+}
+
+#welcome-mat {
+  font-family: 'Lobster', cursive;
+}
