adding survey promotion to homepage

src/_includes/navbar.html

@@ -1,3 +1,16 @@
+<div class="collapse hidden-print" id="banner">
+  <div class="container">
+    <div class="message-container">
+      <div class="tagline">
+        <span id="rotating-message"></span>
+      </div>
+      <div class="action">
+        <a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="navbar navbar-org navbar-static-top">
   <div class="container">
     <ul class="nav navbar-nav navbar-right">

src/assets/js/site.js

@@ -2,59 +2,65 @@ $(function () {
   $("#newsletter").validate();
 
   var ads = [
+    // {
+    //   quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+    //   class: "fonticons",
+    //   url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
+    //   btn_text: "Gimme Some!"
+    // },
+    // {
+    //   quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+    //   class: "fonticons",
+    //   url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
+    //   btn_text: "Gimme Some!"
+    // },
+    // {
+    //   quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+    //   class: "fonticons",
+    //   url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
+    //   btn_text: "Gimme Some!"
+    // },
+    // {
+    //   quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+    //   class: "fonticons",
+    //   url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
+    //   btn_text: "Gimme Some!"
+    // },
+    //
+    //
+    // {
+    //   quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
+    //   class: "black-tie",
+    //   url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
+    //   btn_text: "Check it Out!"
+    // },
+    // {
+    //   quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
+    //   class: "black-tie",
+    //   url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
+    //   btn_text: "Check it Out!"
+    // },
+    // {
+    //   quote: "Want a different icon look? Check out <strong>Black Tie</strong>, our new multi-weight icon set.",
+    //   class: "black-tie",
+    //   url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.4_update",
+    //   btn_text: "Check it Out!"
+    // },
+    // {
+    //   quote: "Check out <strong>Black Tie</strong>, our new multi-weight icon set!",
+    //   class: "black-tie",
+    //   url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.4_update",
+    //   btn_text: "Check it Out!"
+    // },
     {
-      quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      quote: "<strong>Help make Font Awesome more awesome!</strong> Fill out a short survey and give us your feedback.",
-      class: "fonticons",
+      class: "font-awesome-survey",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
+      url: "http://fontawesome.io/survey/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_survey&utm_campaign=promo_4.5_update",
-      btn_text: "Gimme Some!"
+      btn_text: "Take the survey!"
-    },
-    {
-      quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-
-
-    {
-      quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
-      class: "black-tie",
-      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
-      btn_text: "Check it Out!"
-    },
-    {
-      quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
-      class: "black-tie",
-      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
-      btn_text: "Check it Out!"
-    },
-    {
-      quote: "Want a different icon look? Check out <strong>Black Tie</strong>, our new multi-weight icon set.",
-      class: "black-tie",
-      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.4_update",
-      btn_text: "Check it Out!"
-    },
-    {
-      quote: "Check out <strong>Black Tie</strong>, our new multi-weight icon set!",
-      class: "black-tie",
-      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.4_update",
-      btn_text: "Check it Out!"
     }
   ];
 
-  //selectFonticonsAd();
+  selectFonticonsAd();
 
   // start the icon carousel
   $('#icon-carousel').carousel({

src/assets/less/site/banner-ad.less

@@ -16,6 +16,55 @@
     padding-right: 20px;
   }
 
+  &.font-awesome-survey {
+    @survey-bg: #8E8F94;
+    background-color: @survey-bg;
+    border-bottom: solid 1px mix(@survey-bg, #fff, 95%);
+
+    .btn-primary {
+      @color: mix(#fff,@survey-bg,80%);
+      @background: darken(@survey-bg, 15%);
+      @border: darken(@background, 15%);
+      font-weight: bold;
+      color: @color;
+      background-color: @background;
+      border-color: @border;
+      border-bottom-width: 2px;
+      text-shadow: none;
+      border-radius: 4px;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.active,
+      .open > &.dropdown-toggle {
+        color: #fff;
+        background-color: darken(@border, 10%);
+        border-color: darken(@border, 20%);
+        border-bottom-color: darken(@border, 30%);
+      }
+      &:active,
+      &.active,
+      .open > &.dropdown-toggle {
+        background-image: none;
+      }
+      &.disabled,
+      &[disabled],
+      fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          background-color: @background;
+          border-color: @border;
+        }
+      }
+    }
+
+
+  }
+
   &.black-tie {
     @black-tie-bg: #222222;
     background-color: @black-tie-bg;