timeline design

_src/_assets/images/icon-group.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" width="60px" height="60px" viewBox="0 0 60 60">
+    <g>
+    	<circle class="st0" cx="50" cy="26" r="5"/>
+    	<path class="st0" d="M50.2,35H59c0,6.7-0.6,12.7-6,13.8V59h-2.8H47V48.8c-5-1.1-5.7-7.1-5.7-13.8H50.2z"/>
+    	<circle class="st0" cx="30" cy="6" r="5"/>
+    	<path class="st0" d="M30.2,15H39c0,6.7-0.6,12.9-6,14v10h-2.8H27V29c-5-1.1-5.7-7.3-5.7-14H30.2z"/>
+    	<circle class="st0" cx="10" cy="26" r="5"/>
+    	<path class="st0" d="M9.8,35h8.8c0,6.7-0.3,12.9-5.7,14v10h-3H7V49c-5-1.1-6-7.3-6-14H9.8z"/>
+    </g>
+</svg>

_src/_assets/styles/bigchain.scss

@@ -31,6 +31,7 @@
 @import 'bigchain/_header';
 @import 'bigchain/_footer';
 @import 'bigchain/_team';
+@import 'bigchain/_timeline';
 @import 'bigchain/_utilities';
 
 // Content types

_src/_assets/styles/bigchain/_timeline.scss

@@ -0,0 +1,58 @@
+//
+// Timeline
+// ---
+// bigchain.io
+//
+
+.timeline {
+    position: relative;
+
+    // actual timeline line
+    &:before {
+        @media ($screen-sm) {
+            content: "";
+            width: 400%;
+            margin-left: -200%;
+            height: 1px;
+            display: block;
+            background: #fff;
+            position: absolute;
+            bottom: 2.4rem;
+        }
+    }
+}
+
+.timeline__entry {
+    text-align: center;
+}
+
+.timeline__entry__title,
+.timeline__entry__time {
+    display: block;
+}
+
+.timeline__entry__title {
+    @extend .h4;
+    color: #fff;
+
+    // data point
+    &:after {
+        content: "";
+        width: .5rem;
+        height: .5rem;
+        border-radius: 50%;
+        margin: $spacer auto;
+        display: block;
+        background: #fff;
+    }
+}
+
+.timeline__entry__time {
+    @extend .small;
+    opacity: .5;
+}
+
+
+.timeline__entry--future {
+    opacity: .7;
+}

_src/_assets/styles/page-features.scss

@@ -48,7 +48,12 @@
     .row { z-index: 1 }
 
     .section-title,
-    .section-description {
+    .section-description,
+    .timeline {
         color: #fff;
     }
+
+    .timeline {
+
+    }
 }

_src/features.html

@@ -33,7 +33,7 @@ title: Features
 
         <p class="difference">
             <svg class="difference__icon icon">
-                <use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
+                <use xlink:href="/assets/img/sprite.svg#icon-group"></use>
             </svg>
             <span class="difference__text">Federation consensus model – public via trusted nodes (more coming soon), private (select your own)</span>
         </p>
@@ -65,5 +65,20 @@ title: Features
             <h1 class="section-title">Timeline.</h1>
             <p class="section-description">Private beta is shipping now. Contact us more information. Public Bigchain will be released soon</p>
         </header>
+
+        <figure class="timeline grid grid--full grid-small--fit grid--gutters">
+            <div class="timeline__entry grid__col">
+                <span class="timeline__entry__title">Whitepaper</span>
+                <span class="timeline__entry__time">Early 2015</span>
+            </div>
+            <div class="timeline__entry grid__col">
+                <span class="timeline__entry__title">Private Beta</span>
+                <span class="timeline__entry__time">Jan 2016</span>
+            </div>
+            <div class="timeline__entry timeline__entry--future grid__col">
+                <span class="timeline__entry__title">Public</span>
+                <span class="timeline__entry__time">Soon</span>
+            </div>
+        </figure>
     </div>
 </section>