mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
feat: Styling home page
This commit is contained in:
Joshua Seigler
parent
b6ea201bb7
commit
a1e4167abf
21 changed files with 312 additions and 579 deletions
276
index.html
276
index.html
|
|
@ -4,182 +4,200 @@ title: pages.home.title
|
|||
description: pages.home.description
|
||||
---
|
||||
|
||||
|
||||
|
||||
{% tf home/hero.html %}
|
||||
|
||||
<div class="content">
|
||||
|
||||
<!--
|
||||
<div id="page-home">
|
||||
|
||||
<!--
|
||||
WHAT IS DASH?
|
||||
LINK TO VIDEO.
|
||||
-->
|
||||
<div class="row" style="text-align:center;">
|
||||
<section>
|
||||
<div class="content">
|
||||
<h2>{% t pages.home.video-heading %}</h2>
|
||||
{% tmd pages.home.video-text %}
|
||||
|
||||
<a href="#" class="btn-blue">{% t pages.home.video-btn %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
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 %}
|
||||
<section>
|
||||
<div class="content row features-collection">
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
MERCHANTS
|
||||
-->
|
||||
<div class="row" style="text-align:center;">
|
||||
<h2>{% t pages.home.merchants-heading %}</h2>
|
||||
<section>
|
||||
<div class="content">
|
||||
<div>
|
||||
<h2>{% t pages.home.merchants-heading %}</h2>
|
||||
|
||||
{% tmd pages.home.merchants-text %}
|
||||
</div>
|
||||
{% 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="logo-collection">
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/bolehvpn.png">
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/node40.png">
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/protonmail.png">
|
||||
</div>
|
||||
<div class="logo">
|
||||
<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>
|
||||
|
||||
<!--
|
||||
<div>
|
||||
<a href="#" class="btn-blue">{% t pages.home.merchants-btn %}</a>
|
||||
<a href="#" class="btn-blue">{% t pages.home.merchants-join-btn %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
NETWORK ARCHITECTURE
|
||||
-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.architecture-heading %}</h2>
|
||||
<section>
|
||||
<div class="content row">
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.architecture-heading %}</h2>
|
||||
|
||||
{% tmd pages.home.architecture-text %}
|
||||
{% tmd pages.home.architecture-text %}
|
||||
|
||||
<a href="#" class="btn-blue">{% t pages.home.architecture-btn %}</a>
|
||||
<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>
|
||||
<div class="col-sm-6">
|
||||
<img src="/assets/img/home/code.png" alt="{% t pages.home.architecture-heading %}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
</section>
|
||||
|
||||
<!--
|
||||
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%}">
|
||||
<section>
|
||||
<div class="content row">
|
||||
<div class="col-sm-6 col-sm-push-6">
|
||||
<h2>{% t pages.home.governance-heading%}</h2>
|
||||
|
||||
{% tmd pages.home.governance-text %}
|
||||
|
||||
<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 class="col-sm-6 col-sm-pull-6">
|
||||
<img src="/assets/img/home/budgets.png" alt="{% t pages.home.governance-heading%}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.governance-heading%}</h2>
|
||||
</section>
|
||||
|
||||
{% tmd pages.home.governance-text %}
|
||||
|
||||
<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>
|
||||
<section>
|
||||
<div class="content row">
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.network-growth-heading %}</h2>
|
||||
|
||||
{% tmd pages.home.network-growth-text %}
|
||||
{% tmd pages.home.network-growth-text %}
|
||||
|
||||
<a href="#" class="btn-blue">{% t pages.home.network-growth-btn %}</a>
|
||||
<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>
|
||||
<div class="col-sm-6">
|
||||
<img src="/assets/img/home/graph.png" alt="{% t pages.home.network-growth-heading %}">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
EVOLUTION
|
||||
-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
|
||||
<section>
|
||||
<div class="content row">
|
||||
<div class="col-sm-6 col-sm-push-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 class="col-sm-6 col-sm-pull-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.evolution-heading %}</h2>
|
||||
</section>
|
||||
|
||||
{% 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>
|
||||
<section>
|
||||
<div class="content">
|
||||
<h2>{% t pages.home.news-heading %}</h2>
|
||||
|
||||
<div class="row">
|
||||
{% for post in site.posts limit:4 %}
|
||||
<div class="col-sm-3">
|
||||
<div class="news-post">
|
||||
<div class="news-image">
|
||||
{% if post.image %}
|
||||
<img src="{{ post.image }}">
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
{% for post in site.posts limit:4 %}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="news-post">
|
||||
<div class="news-image">
|
||||
{% if post.image %}
|
||||
<img src="{{ post.image }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="news-body">
|
||||
<h3 class="news-title">{{ post.title }}</h3>
|
||||
<div class="date">{{ post.date | date: "%b %d, %Y" }}</div>
|
||||
<p>{{ post.excerpt | strip_html | truncate: 250 }}</p>
|
||||
<a class="read-more" href="{{ post.url }}">Read More...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-title">
|
||||
<h3>{{ post.title }}</h3>
|
||||
</div>
|
||||
<span class="date">{{ post.date | date: "%b %d, %Y" }}</span>
|
||||
<p>{{ post.excerpt | strip_html | truncatewords: 20 }}</p>
|
||||
<a href="{{ post.url }}">Read More...</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="#" class="btn-blue">{% t pages.home.news-btn %}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section>
|
||||
<div class="content">
|
||||
<h2>{% t pages.home.get-started-heading %}</h2>
|
||||
|
||||
{% tmd pages.home.get-started-text %}
|
||||
{% tmd pages.home.get-started-text %}
|
||||
|
||||
<a href="#" class="btn-blue">{% t pages.home.get-started-btn %}</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<a href="#" class="btn-blue">{% t pages.home.get-started-btn %}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue