Applied basic grid layout to homepage.

This commit is contained in:
Perry Woodin 2016-08-08 10:24:53 -04:00
parent 6976448840
commit 78272f8757
6 changed files with 154 additions and 50 deletions

View file

@ -5,6 +5,7 @@
// stuff every page really needs
@import "reset";
@import "grid";
@import "colors";
@import "typography";
@import "layout";

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
assets/img/home/node40.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
assets/img/home/qhoster.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8 KiB

View file

@ -8,35 +8,94 @@ description: pages.home.description
{% tf home/hero.html %}
<div class="content">
<!--
WHAT IS DASH?
LINK TO VIDEO.
-->
<div class="row" style="text-align:center;">
<h2>{% t pages.home.video-heading %}</h2>
{% tmd pages.home.video-text %}
<a href="#" class="btn-blue">{% t pages.home.video-btn %}</a>
</div>
<!--
DASH FEATURES
PRIVATE | INSTANT | SECURE
-->
<div class="row" style="text-align:center;">
<div class="col-sm-4">
<img src="/assets/img/home/icon_private.png" alt="{% t pages.home.feature-private-heading %}">
<h2>{% t pages.home.feature-private-heading %}</h2>
{% tmd pages.home.feature-private-text %}
</div>
<div class="col-sm-4">
<img src="/assets/img/home/icon_instant.png" alt="{% t pages.home.feature-instant-heading %}">
<h2>{% t pages.home.feature-instant-heading %}</h2>
{% tmd pages.home.feature-instant-text %}
</div>
<div class="col-sm-4">
<img src="/assets/img/home/icon_secure.png" alt="{% t pages.home.feature-secure-heading %}">
<h2>{% t pages.home.feature-secure-heading %}</h2>
{% tmd pages.home.feature-secure-text %}
</div>
</div>
<!--
MERCHANTS
-->
<div class="row" style="text-align:center;">
<h2>{% t pages.home.merchants-heading %}</h2>
{% tmd pages.home.merchants-text %}
</div>
<div class="row" style="text-align:center;">
<div class="col-sm-3">
<img src="/assets/img/home/bolehvpn.png">
</div>
<div class="col-sm-3">
<img src="/assets/img/home/node40.png">
</div>
<div class="col-sm-3">
<img src="/assets/img/home/protonmail.png">
</div>
<div class="col-sm-3">
<img src="/assets/img/home/qhoster.png">
</div>
</div>
<div class="row" style="text-align:center;">
<a href="#" class="btn-blue">{% t pages.home.merchants-btn %}</a>
<a href="#" class="btn-blue">{% t pages.home.merchants-join-btn %}</a>
</div>
<!--
NETWORK ARCHITECTURE
-->
<div class="row">
<div class="col-sm-6">
<h2>{% t pages.home.architecture-heading %}</h2>
{% tmd pages.home.architecture-text %}
<a href="#" class="btn-blue">{% t pages.home.architecture-btn %}</a>
</div>
<div class="col-sm-6">
<img src="/assets/img/home/code.png" alt="{% t pages.home.architecture-heading %}">
</div>
</div>
<!--
SELF GOVERNING | SELF FUNDING
-->
<div class="row">
<div class="col-sm-6">
<img src="/assets/img/home/budgets.png" alt="{% t pages.home.governance-heading%}">
</div>
<div class="col-sm-6">
<h2>{% t pages.home.governance-heading%}</h2>
{% tmd pages.home.governance-text %}
@ -44,26 +103,70 @@ description: pages.home.description
<a href="#" class="btn-blue">{% t pages.home.proposal-btn %}</a>
<a href="#" class="btn-blue">{% t pages.home.proposal-submit-btn %}</a>
</div>
</div>
<!--
FASTEST GROWING NETWORK
-->
<div class="row">
<div class="col-sm-6">
<h2>{% t pages.home.network-growth-heading %}</h2>
{% tmd pages.home.network-growth-text %}
<a href="#" class="btn-blue">{% t pages.home.network-growth-btn %}</a>
</div>
<div class="col-sm-6">
<img src="/assets/img/home/graph.png" alt="{% t pages.home.network-growth-heading %}">
</div>
</div>
<!--
EVOLUTION
-->
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<h2>{% t pages.home.evolution-heading %}</h2>
{% tmd pages.home.evolution-text %}
<a href="#" class="btn-blue">{% t pages.home.evolution-btn %}</a>
</div>
</div>
<!--
LATEST NEWS
-->
<div class="row" style="text-align:center;">
<h2>{% t pages.home.news-heading %}</h2>
</div>
<div class="row">
<div class="col-sm-3">News</div>
<div class="col-sm-3">News</div>
<div class="col-sm-3">News</div>
<div class="col-sm-3">News</div>
</div>
<div class="row" style="text-align:center;">
<a href="#" class="btn-blue">{% t pages.home.news-btn %}</a>
</div>
<!--
GET STARTED
-->
<div class="row" style="text-align:center;">
<h2>{% t pages.home.get-started-heading %}</h2>
{% tmd pages.home.get-started-text %}
<a href="#" class="btn-blue">{% t pages.home.get-started-btn %}</a>
</div>
</div>