mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
add get-started page
This commit is contained in:
parent
cffa98d15b
commit
96bd068dca
4
homepage/content/pages/get-started.md
Normal file
4
homepage/content/pages/get-started.md
Normal file
@ -0,0 +1,4 @@
|
||||
title: Get started | Offen
|
||||
description: temp
|
||||
slug: get-started
|
||||
template: getstarted
|
@ -11,12 +11,18 @@ COLORS
|
||||
.brd-cclr-mid-yellow {
|
||||
border-color: #F7BF08;
|
||||
}
|
||||
.cclr-bright-yellow {
|
||||
.cclr-yellow-bright {
|
||||
background-color: #fde28c;
|
||||
}
|
||||
.fnt-cclr-yellow-bright {
|
||||
color: #fde28c;
|
||||
}
|
||||
.cclr-mid-mint {
|
||||
background-color: #BBD9D3;
|
||||
}
|
||||
.fnt-cclr-mint-bright {
|
||||
color: #E2F6F2;
|
||||
}
|
||||
.cclr-mid-black {
|
||||
background-color: #39352A;
|
||||
}
|
||||
@ -100,6 +106,10 @@ em {
|
||||
background: linear-gradient(transparent 66%, #fde28c 66%);
|
||||
font-style: normal;
|
||||
}
|
||||
.em-extra {
|
||||
background: linear-gradient(transparent 66%, #BBD9D3 66%);
|
||||
font-style: normal;
|
||||
}
|
||||
hr {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
@ -116,6 +126,9 @@ ul {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
}
|
||||
.tracked-min {
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
@ -320,4 +333,3 @@ GRAPHICS
|
||||
#bg-cta-bottom {
|
||||
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
|
||||
}
|
||||
|
||||
|
@ -40,6 +40,7 @@
|
||||
<div class="icon">
|
||||
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||
</div>
|
||||
{% if is_getstarted != 'true' %}
|
||||
<nav>
|
||||
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
|
||||
<ul class="nav-list">
|
||||
@ -63,6 +64,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -74,6 +76,7 @@
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% if is_getstarted != 'true' %}
|
||||
{% block outro %}
|
||||
<div class="w-100 cclr-mid-yellow">
|
||||
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
|
||||
@ -113,6 +116,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
<div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
|
||||
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
|
||||
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
|
||||
|
51
homepage/theme/templates/getstarted.html
Normal file
51
homepage/theme/templates/getstarted.html
Normal file
@ -0,0 +1,51 @@
|
||||
{% extends "page.html" %}
|
||||
|
||||
{% set is_getstarted = 'true' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="w-100 mt5-ns cclr-mid-mint">
|
||||
<div class="pv5 ph4">
|
||||
<div class="mw8 center flex flex-column flex-row-ns">
|
||||
<div class="w-100 w-60-ns">
|
||||
<h2 class="f25 normal ma0 mb3">
|
||||
<em>Our alpha release</em>
|
||||
</h2>
|
||||
<p class="ma0 mb3">
|
||||
Offen is in active development. Do something brave and test our very first alpha release today. It’s free and always will be.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 w-40-ns ml4-m ml6-l">
|
||||
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
|
||||
Single binary file for <br>Linux, Windows or MacOS
|
||||
</p>
|
||||
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="#">Download</a>
|
||||
<div class="tc">
|
||||
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="#">Open GitHub release page</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 cclr-mid-yellow">
|
||||
<div class="pv5 ph4">
|
||||
<div class="mw8 center flex flex-column flex-row-ns mb3">
|
||||
<div class="w-100 w-60-ns">
|
||||
<h2 class="f25 normal ma0 mb3">
|
||||
<em class="em-extra">
|
||||
Get started now
|
||||
</em>
|
||||
</h2>
|
||||
<p class="ma0 mb3">
|
||||
Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides will help you kick off.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 w-40-ns ml4-m ml6-l">
|
||||
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
|
||||
Details on how to run, use <br>and develop Offen
|
||||
</p>
|
||||
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="#">Open guides</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue
Block a user