feat(website): add footer links

Issue #27
CodeCorico · Oct 19, 2014 · 6437271 · 6437271
1 parent 7064617
commit 6437271
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/website/features/common/css/page.css b/website/features/common/css/page.css
@@ -252,14 +252,32 @@ a:hover {
 
 .body-footer {
   width: 1000px;
-  height: 300px;
   margin: 0 auto;
   padding: 20px 0 50px;
 }
 
-.body-footer p {
-  text-align: center;
+.body-footer h4 {
+  margin: 0 0 15px;
   font-size: 16px;
-  line-height: 18px;
+  font-weight: normal;
+}
+
+.body-footer .column {
+  position: relative;
+  float: left;
+  width: 20%;
+}
+
+.body-footer .column:first-child {
+  width: 60%;
+}
+
+.body-footer .column ul, .body-footer .column li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.body-footer p {
   color: #999;
 }
diff --git a/website/index.html b/website/index.html
@@ -97,7 +97,30 @@ <h1>MemoryOverflow</h1>
   </div>
 
   <footer class="body-footer">
-    <p>&laquo; The Machine sees everything &raquo;</p>
+    <div class="column">
+      <h4>&laquo; The Machine sees everything &raquo;</h4>
+      <p>Memory Overflow is a card game for developers, by developers.</p>
+      <p>This project is FREE and OPEN for everyone. The Machine as many contributors (named Special Agents) who work everyday to improve the game.</p>
+    </div>
+    <div class="column">
+      <h4>Play!</h4>
+      <ul>
+        <li><a href="#">Memory Overflow</a></li>
+        <li><a href="#">The Machine story</a></li>
+        <li><a href="#">Game rules</a></li>
+        <li><a href="#">Print cards</a></li>
+      </ul>
+    </div>
+    <div class="column">
+      <h4>Contribute!</h4>
+      <ul>
+        <li><a href="https://github.com/CodeCorico/MemoryOverflow" target="_blank">The GitHub project</a></li>
+        <li><a href="#">Join the C.A.M.</a></li>
+        <li><a href="#">Create cards</a></li>
+        <li><a href="#">Create templates</a></li>
+      </ul>
+    </div>
+    <div class="clear"></div>
   </footer>
 
   <script type="text/javascript" src="vendor/jquery/jquery-1.11.1.min.js"></script>