mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 02:16:10 +01:00
timeline design
This commit is contained in:
parent
d08ca58047
commit
bac8498ec2
10
_src/_assets/images/icon-group.svg
Normal file
10
_src/_assets/images/icon-group.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 546 B |
@ -31,6 +31,7 @@
|
||||
@import 'bigchain/_header';
|
||||
@import 'bigchain/_footer';
|
||||
@import 'bigchain/_team';
|
||||
@import 'bigchain/_timeline';
|
||||
@import 'bigchain/_utilities';
|
||||
|
||||
// Content types
|
||||
|
58
_src/_assets/styles/bigchain/_timeline.scss
Normal file
58
_src/_assets/styles/bigchain/_timeline.scss
Normal file
@ -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;
|
||||
}
|
@ -48,7 +48,12 @@
|
||||
.row { z-index: 1 }
|
||||
|
||||
.section-title,
|
||||
.section-description {
|
||||
.section-description,
|
||||
.timeline {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user