Update index.css, index.html

index.css

@@ -14,6 +14,8 @@ h1 {
 #homePageJumbo {
     background-color:#002f6c;
     height:100px;
+    padding:15px;
+    margin:0px;
     
     
     
@@ -46,12 +48,16 @@ h1 {
 }
 .clickables {
     float:left;
-    width:20%;
+    width:25%;
     height:400px;
     opacity:75%;
     border-style:solid;
     border-color:black;
     border-width:2px;
+    color:black;
+}
+.clickables {
+    
 }
 
 .resturants {
@@ -75,3 +81,28 @@ h1 {
     
 }
 /* implement cool thing on the slogan where it glows */
+
+.sub_section {
+    height:75px;
+    width:100%;
+    opacity:75%;
+    border-style:solid;
+    border-color:black;
+    color:black;
+}
+#restaurants_section {
+    background-color:red;
+
+}
+#classes_section {
+    background-color:blue;
+}
+#professors_section {
+    background-color:purple;
+}
+#dorms_section {
+    background-color:orange;
+}
+
+
+

index.html

@@ -26,14 +26,28 @@
             <h2  class="jumbotext" id="homePageSlogan2" >By the Students </h2>
         </div>
         <div class="row">
+            <a href="restaurants.html"> 
             <div class="clickables resturants">
+                <h1>Restaurants</h1>
+                
                 </div>
+            </a>
+            <a href="classes.html">
             <div class="clickables" id="classes">
+                <h1>Classes</h1>
+                
                 </div>
+            </a>
+            <a href="professors.html">
             <div class="clickables" id="professors">
+                <h1>Professors</h1>
                 </div>
+            </a>
+            <a href="dorms.html">
             <div class="clickables" id="dorms">
+                <h1>Dorms</h1>
                 </div>
+            </a>
                   
         </div>