ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2024-11-22 09:36:52 +01:00
Code Releases Activity

first try at get started section

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-09-04 21:54:50 +02:00
parent e5721e5446
commit fe9b832e66
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 138 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_src/_assets/scss/_sections.scss
View File

@ -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;

81
_src/_assets/scss/page-front.scss
View File

@ -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

4
_src/_data/content-front.yml
View File

@ -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:

50
_src/index.html
View File

@ -170,9 +170,59 @@ css: page-front
<section class="section section--background section--getstarted">
<div class="row">
<header class="section__header">
<div class="grid grid--full grid-medium--columns grid--gutters">
<div class="grid__col grid__col--4">
<h1 class="section__title">{{ content.getstarted.title }}</h1>
<p class="section__description">{{ content.getstarted.description }}</p>
</div>
</div>
</header>
<h2>TL;DR</h2>
<div class="grid grid--full grid-medium--third">
<div class="grid__col">
<a class="getstarted" href="{{ site.signup.link }}">
<h2 class="getstarted__title">Create account</h2>
<p class="getstarted__text">Creating an account is free and takes just a second.</p>
</a>
</div>
<div class="grid__col">
<a class="getstarted" href="">
<h2 class="getstarted__title">Add your app</h2>
<p class="getstarted__text">Add your app and receive your <code>app_id</code> &amp; <code>app_key</code>.</p>
</a>
</div>
<div class="grid__col">
<a class="getstarted" href="https://www.bigchaindb.com/getstarted/#drivers">
<h2 class="getstarted__title">Get drivers &amp; tools</h2>
<p class="getstarted__text">Point your apps to <code>test.ipdb.io</code> and code along.</p>
</a>
</div>
</div>
<footer class="section__actions">
<a href="/docs/" class="button button--text">IPDB Documentation</a>
</footer>
<div class="getstarted-bigchaindb">
<div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
<div class="grid__col grid__col--2">
<figure class="feature__image">
<svg aria-labelledby="title">
<title>BigchainDB</title>
<use xlink:href="/assets/img/sprite.svg#feature-bigchaindb"></use>
</svg>
</figure>
</div>
<div class="grid__col grid__col--4">
<h1 class="feature__title">Just want to have a quick look into a transaction?</h1>
<p class="feature__text">Over on the BigchainDB site you can quickly create your first transaction, and learn how to craft a proper one.</p>
<a class="button button--text" href="https://www.bigchaindb.com/getstarted/">Send your first transaction</a>
</div>
</div>
</div>
</div>
</section>