Add Collaborators and Logos

src/views/hoc/hoc.jsx

@@ -42,7 +42,7 @@ var Hoc = React.createClass({
                         <div className="card" onMouseEnter={this.onCardEnter.bind(null, 'wbb-bg')}>
                             <div className="card-info">
                                 <img src="/images/hide-seek-tutorial.jpg" />
-                                <a href="#"><Button> Hide-and-Seek Game</Button></a>
+                                <a href="/hide"><Button> Hide-and-Seek Game</Button></a>
                             </div>
                         </div>
 
@@ -118,6 +118,16 @@ var Hoc = React.createClass({
                             </div>
                         </section>
                     </Box>
+
+                    <section className="one-up">
+                        <h3>Collaborators</h3>
+                        <div className="logos">
+                            <img src="/images/code-org-logo.png" />
+                            <img src="/images/cn-logo.png" />
+                            <img src="/images/paa-logo.png" />
+                            <img src="/images/pocketcode-logo.png" />
+                        </div>
+                    </section>
                 </div>
             </div>
 

src/views/hoc/hoc.scss

@@ -17,7 +17,7 @@ $base-bg: $ui-white;
         max-width: 960px;
 
         .box {
-            margin-bottom: 100px;
+            margin-bottom: 10px;
         }
     }
 
@@ -150,7 +150,7 @@ $base-bg: $ui-white;
         }
     }
 
-    .box section {
+    section {
         display: flex;
         margin: 0 auto;
         border-bottom: 1px solid $ui-border;
@@ -170,6 +170,19 @@ $base-bg: $ui-white;
             font-weight: 300; 
         }
 
+        .logos {
+            margin: 10px 0;
+            width: 100%;
+
+            img {
+                margin: 0 20px;
+                max-width: 200px;
+                max-height: 75px;
+
+                vertical-align: middle;
+            }
+        }
+
         .resource {
             display: flex;
             margin: 10px;
@@ -207,6 +220,10 @@ $base-bg: $ui-white;
                 margin: 10px;
                 width: 100%;
             }
+
+            .logo {
+                display: block;
+            }
         }
 
         &.two-up {
@@ -225,5 +242,4 @@ $base-bg: $ui-white;
             }
         }
     }
-
 }