Merge pull request #1014 from rrandom/cognitive-banner

fix #1007 cognitive-banner

Author: birdofpreyru

app/my-dashboard/my-dashboard.jade

@@ -5,6 +5,13 @@
 
   .challenges(id="challenges", ui-view="my-challenges")
 
+  .tco.tco17
+    .tc-banner-placeholder.cognitive
+      .container
+        .img
+        .description Learn about Cognitive technologies and get hands on experience as a member of the Topcoder Cognitive Community.
+        a(href="https://cognitive.topcoder.com").cta.tc-btn-white.tc-btn-radius Learn More
+
   .tco.tco17
     .tc-banner-placeholder.predix
       .subtitle Ready for the future? The Industrial Internet is here
@@ -19,9 +26,6 @@
       .subtitle The Ultimate Programming & Design tournament
       .description Earn your way to the USA!
       a(href="http://tco17.topcoder.com/").cta.tc-btn-white.tc-btn-radius Learn More
-
-  .tco
-    tc-banner(theme="black", banner-name="tco16")
 
   .srms(id="srms", ui-view="srms", ng-show="dashboard.showSRMs")
 

assets/css/directives/tc-banner.scss

@@ -239,4 +239,57 @@ $tco-color-dark: #ea690b;
     margin-left: -250px;
 }
 
+.tc-banner-placeholder.cognitive {
+  background-image: url(../../images/cognitive-home-hero.jpg);
+  background-size: cover;
+  height: 352px;
+  background-position: center 100%;
+  background-repeat: no-repeat;
+  background-color: #222222;
+  z-index: 1;
+  flex-direction: row;
+
+  .container {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 37px;
+    height: 95%;
+    justify-content: space-between;
+
+    .img {
+      background-image: url(../../images/cognitive-home-hero-title.png);
+      background-size: 100%;
+      background-repeat: no-repeat;
+      background-position: center 100%;
+      height: 57px;
+      width: 75%;
+    }
+
+    .description {
+      color: $white;
+      margin: 0 30px 0 0;
+      font-size: 24px;
+      line-height: 29px;
+      text-align: left;
+      font-weight: 300;
+    }
+
+    .cta {
+      margin-top: 20px;
+    }
+
+    .tc-btn-white {
+      background-color: white;
+      color: #0096FF;
+      padding: 10px 20px;
+    }
+
+    .tc-btn-radius {
+      border-radius: 26px;
+    }
+  }
+}
+