timeline3 tease in header

website/static/css/site.css

@@ -22,7 +22,41 @@ footer {
   #overview hgroup {
     text-align: center;
   }
+  #teaser {
+      display: block;
+      margin: 30px 0 -10px;
+      font-family: sans-serif;
+      color: #147693;
+  }
+  .new {
+      font-style: italic;
+      color: #333;
+      font-weight: bold;
+      margin-right: 3px;
+  }
 
+  #teaser:hover,
+  #teaser:active,
+  #teaser:focus {
+      text-decoration: none;
+  }
+  #teaser .arrow {
+    border-radius: 20px;
+    background-color: #0f9bd1;
+    color: white;
+    padding: 0px 8px 4px;
+    font-size: 26px;
+    margin-left: 2px;
+    display: inline-block;
+  }
+  #teaser .arrow:before{
+      content: "»";
+    display: inline-block;
+
+  }
+  #teaser .arrow:hover {
+      background-color: #147693;
+  }
 /* Timeline */
 #demo { 
   width: 100%;
@@ -78,6 +112,7 @@ h2.intro {
   margin: 20px auto 30px;
   max-width: 900px;
   padding: 0 20px;
+  font-size: 36px;
 }
 #examples .row { 
   margin-bottom: 20px;
@@ -113,4 +148,4 @@ h2.intro {
   width: 260px;
 }  
 
-#font-preview-trigger { margin-left: 10px;}
+#font-preview-trigger { margin-left: 10px;}

website/templates/_overview.html

@@ -4,7 +4,8 @@
     <hgroup class="span12">
       <h1 class="logo-mark xl">Timeline<span><em>JS</em></span></h1>
       <h2 class="intro">Beautifully crafted timelines that are easy and intuitive to use.</h2>
-      <p><a href="#make" class="btn btn-large btn-success" data-scroll="true">Make a timeline now</a></p>
+      <a href="#make" class="btn btn-large btn-success" data-scroll="true">Make a timeline now</a>
+      <p><a id="teaser" href="timeline3.knightlab.com"><span class="new">New!</span> Try the TimelineJS 3 beta <span class="arrow"></span></a></p>
     </hgroup>
   </div>
-</header>
+</header>