Add new ad unit

diff --git a/docs/assets/js/docs.ad.js b/docs/assets/js/docs.ad.js
new file mode 100644 (file)
index 0000000..cd57645
--- /dev/null
+++ b/docs/assets/js/docs.ad.js
@@ -0,0 +1,15 @@
+$(function() {
+  // TODO: Add alternate between advanced and intro
+  var topic = $('h1.docs-page-title').text();
+  var header = 'Struggling with ' + topic + '?';
+  var body = 'Get up to speed FAST, learn straight from the experts who built Foundation for Emails.';
+  var link = 'http://zurb.com/university/responsive-emails-foundation?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Struggling&utm_campaign=Docs%20To%20Emails';
+  var cta = 'Learn More';
+
+  var html = '<div class="ad-unit"><h3 class="ad-unit-title">' + header + '</h3>' +
+             '<p class="ad-unit-text">' + body + '</p>' +
+             '<a class="button ad-unit-button" href="' + link+ '">' +
+             cta + '</a></div>';
+  $('#TOCAdUnit').html(html);
+
+});

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 43ad14e856c546f7760434aa0bbf3e566a599e18..00b425651c7e31a863654bcc3f74d958a8f4c7f7 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -101,4 +101,52 @@ $topbar-hover-color: lighten($topbar-background, 10%);
 }
 .zurb-footer-bottom {
   background: $topbar-background;
-}
\ No newline at end of file
+}
+
+.ad-unit {
+  max-width: 250px;
+  padding: .5rem;
+  background: #2a2f58;
+  border-radius: 4px;
+}
+
+.ad-unit-title {
+  padding: 10px 16px 5px 16px;
+  text-align: center;
+  color: #fff;
+  font-size: 23px;
+  font-weight: bold;
+  font-family: 'proxima nova', helvetica, arial;
+  animation:  ad-title-anim 1.5s 1 ease;
+  animation-fill-mode: backwards;
+}
+
+.ad-unit-text {
+  color: #fff;
+  font-size: 13px;
+  text-align: center;
+  padding: 0 15px 10px 15px;
+  animation:  ad-text-anim 1s 1 ease;
+  animation-delay: 1s;
+  animation-fill-mode: backwards;
+}
+
+.ad-unit-button {
+  margin-bottom: 0;
+  width: 100%;
+  box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
+  border: 0;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+
+@keyframes ad-title-anim {
+  0%   { opacity: 0; transform: translateY(50%); }
+  100% { opacity: 1; }
+}
+
+@keyframes ad-text-anim {
+  0%   { opacity: 0; transform: scale(.7, .7); }
+  100% { opacity: 1; transform: scale(1, 1);}
+}