diff --git a/_src/_assets/scss/_sections.scss b/_src/_assets/scss/_sections.scss index 0326f90..d1ee849 100644 --- a/_src/_assets/scss/_sections.scss +++ b/_src/_assets/scss/_sections.scss @@ -49,7 +49,9 @@ .section__actions { text-align: center; - margin-top: $spacer * 2; + margin-top: $spacer * 3; + padding-top: $spacer * 2; + border-top: 1px solid darken($brand-05, 8%); .button + .button { margin-left: $spacer * 2; diff --git a/_src/_assets/scss/page-front.scss b/_src/_assets/scss/page-front.scss index 3526af7..6c768f0 100644 --- a/_src/_assets/scss/page-front.scss +++ b/_src/_assets/scss/page-front.scss @@ -166,6 +166,87 @@ } } +// +// Get started +// +.section--getstarted { + counter-reset: getstarted-steps; + + .feature__image { + background: rgba(255, 255, 255, .5); + } + + .section__actions { + border-top: 0; + padding-top: 0; + margin-top: $spacer * 2; + } +} + +.getstarted-bigchaindb { + padding-top: $spacer * 3; + margin-top: $spacer * 3; + border-top: 1px solid darken($brand-05, 8%); +} + +.getstarted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + height: 100%; + padding: $spacer; + color: $brand-05; + background: $link-color; + cursor: pointer; + counter-increment: getstarted-steps; + + .grid__col:first-child & { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + border-right: .2rem solid $brand-05; + } + + .grid__col:last-child & { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + border-left: .2rem solid $brand-05; + } + + &:hover, + &:focus { + background: darken($link-color, 10%); + color: $brand-05; + } + + code { + color: inherit; + } +} + +.getstarted__title { + font-size: $font-size-h3; + color: #fff; + margin-bottom: $spacer / 3; + + &:before { + content: counter(getstarted-steps); + display: block; + background: rgba($brand-05, .3); + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + text-align: center; + line-height: 1.75rem; + font-size: $font-size-base; + font-weight: $font-weight-bold; + margin-bottom: $spacer / 1.5; + } +} + +.getstarted__text { + opacity: .9; +} + // // Connect diff --git a/_src/_data/content-front.yml b/_src/_data/content-front.yml index 0194274..b5082a4 100644 --- a/_src/_data/content-front.yml +++ b/_src/_data/content-front.yml @@ -61,8 +61,8 @@ roadmap: status: planned getstarted: - title: "Get started" - description: "GET https://test.ipdb.io/api/" + title: "Get started with IPDB" + description: "Since you don’t need to setup and maintain your own BigchainDB node, you can get started with IPDB in no time." connect: diff --git a/_src/index.html b/_src/index.html index 1f1052f..cdc1bf6 100644 --- a/_src/index.html +++ b/_src/index.html @@ -170,9 +170,59 @@ css: page-front
-

{{ content.getstarted.title }}

-

{{ content.getstarted.description }}

+
+
+

{{ content.getstarted.title }}

+

{{ content.getstarted.description }}

+
+
+ +

TL;DR

+ + + + + +
+
+
+
+ + BigchainDB + + +
+
+ +
+

Just want to have a quick look into a transaction?

+

Over on the BigchainDB site you can quickly create your first transaction, and learn how to craft a proper one.

+ Send your first transaction +
+
+