Add course callout

diff --git a/docs/assets/scss/_course-callout.scss b/docs/assets/scss/_course-callout.scss
new file mode 100644 (file)
index 0000000..d04d1f3
--- /dev/null
+++ b/docs/assets/scss/_course-callout.scss
@@ -0,0 +1,56 @@
+.footer-course-upsell {
+  overflow: hidden;
+  img {
+    margin-top: 55px;
+    animation:  ad-unit-hover 8s infinite ease;
+  }
+  border-top: 1px solid #cacaca;
+  background: #F5F5F5;
+  padding-top: 10px;
+  margin-top: 25px;
+  .sites-course-title {
+    font-size: 30px;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    span {
+      text-transform: uppercase;
+      font-size: rem-calc(11px);
+      font-weight: bold;
+      display: block;
+      margin-bottom: -6px;
+      letter-spacing: 3px;
+      color: rgb(175, 175, 175);
+    }
+  }
+
+  p {
+    color: rgb(125, 125, 125);
+    font-size: 14px;
+  }
+}
+
+@keyframes ad-unit-hover {
+  0% {
+    transform: translateY(30px);
+  }
+  10% {
+    transform: translateY(30px);
+  }
+
+  25% {
+    transform: translateY(0);
+  }
+  65% {
+    transform: translateY(0);
+  }
+
+  90% {
+    transform: translateY(30px);
+  }
+
+  100% {
+    transform: translateY(30px);
+  }
+
+}
+

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 274277f2521efb3d22401707073b82cccb6f02db..fa102b24fd5f3f70762a35b1aef4bae8c5313115 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -26,6 +26,8 @@
 @import 'examples/reveal';
 @import 'examples/top-bar';
 
+@import 'course-callout';
+
 $topbar-background: #2c3840;
 $topbar-hover-color: lighten($topbar-background, 10%);
 

diff --git a/docs/partials/footer.html b/docs/partials/footer.html
index e24e766e9adbc69ecb7f1aca2e5157a3e2b54650..f77a0bed10311722a00d06962a0f175139b04f15 100644 (file)
--- a/docs/partials/footer.html
+++ b/docs/partials/footer.html
@@ -1,19 +1,19 @@
-<!-- Small Business(Docs) -->
-<section id="studiosCallout">
-  <div class="row">
-    <div class="medium-4 large-4 columns">
-      <img src="http://foundation.zurb.com/assets/img/smallbiz-footer.svg" alt="">
-    </div>
-    <div class="medium-8 large-8 columns banner-info">
-      <div class="row column property-label">ZURB Foundation</div>
-      <h3 class="light">Yeah, we can help with that.</h3>
-      <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
-      <div class="course-buttons">
-        <a href="http://foundation.zurb.com/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How &rarr;</a>
+<div class="footer-course-upsell">
+  <section class="sites-course">
+    <div class="row">
+      <div class="medium-7 medium-push-4 columns">
+        <div class="course-callout">
+          <h3 class="sites-course-title"><span>WEBINAR</span> Introduction to Foundation 6</h3>
+          <p>Achieve maximum thrust by learning how to use Foundation 6 to power your projects. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.</p>
+          <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Footer&utm_campaign=Footer%20Upsell" class="button primary" target="_blank">Learn Foundation 6</a>
+        </div>
+      </div>
+      <div class="medium-2 medium-pull-8 columns">
+        <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Footer&utm_campaign=Footer%20Upsell" class="" target="_blank"><img src="{{root}}assets/img/yeti.svg"/></a>
       </div>
     </div>
-  </div>
-</section>
+  </section>
+</div>
 
 <div class="docs-newsletter">
   <div class="row">