mirror of
https://github.com/ipdb/website.git
synced 2024-11-13 16:54:50 +01:00
first try at get started section
This commit is contained in:
parent
e5721e5446
commit
fe9b832e66
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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:
|
||||
|
@ -170,9 +170,59 @@ css: page-front
|
||||
<section class="section section--background section--getstarted">
|
||||
<div class="row">
|
||||
<header class="section__header">
|
||||
<h1 class="section__title">{{ content.getstarted.title }}</h1>
|
||||
<p class="section__description">{{ content.getstarted.description }}</p>
|
||||
<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> & <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 & 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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user