teaser for timeline3 in 'make'

website/static/css/site.css

@@ -26,7 +26,6 @@ footer {
       display: block;
       margin: 30px 0 -10px;
       font-family: sans-serif;
-      color: #147693;
   }
   .new {
       font-style: italic;
@@ -39,6 +38,7 @@ footer {
   #teaser:active,
   #teaser:focus {
       text-decoration: none;
+      color: #0f9bd1;
   }
   #teaser .arrow {
     border-radius: 20px;
@@ -52,13 +52,18 @@ footer {
   #teaser .arrow:before{
       content: "»";
     display: inline-block;
-
   }
-  #teaser .arrow:hover {
+  #body-teaser {
-      background-color: #147693;
+      color: #333;
+      background: #eee;
+      border-top: solid 1px #d0d0d0;
+      border-bottom: solid 1px #d0d0d0;
+      padding: 30px 60px;
+      margin: 20px 0;
   }
+  #body-teaser .new { color: #CA5529; }
 /* Timeline */
-#demo { 
+#demo {
   width: 100%;
   height: 600px;
 }

website/templates/_make.html

@@ -5,7 +5,10 @@
     <div class="span12">
       <h2>Make a Timeline</h2>
       <p>TimelineJS works on any site or blog. Make your own in four easy steps. (<a href="http://www.youtube.com/watch?v=vAWbm4gF9lU">video tutorial</a>)</p>
-    </div>
+      <div id="body-teaser">
+        <p><span class="new">New!</span>There's a new version of TimelineJS that is now available for beta testing. TimelineJS 3 is a full rewrite designed to make this popular tool more flexible for authors and developers.</p>
+        <a class="btn btn-success" href="timeline3.knightlab.com">Try TimelineJS 3 now »</a>
+      </div>
   </div>
 
   <!-- Step 1 -->