mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
feat: homepage styles
This commit is contained in:
Joshua Seigler
parent
a1e4167abf
commit
3109c0048d
4 changed files with 210 additions and 96 deletions
134
_sass/_home.scss
134
_sass/_home.scss
|
|
@ -1,4 +1,4 @@
|
|||
#page-home {
|
||||
.page-home {
|
||||
> section {
|
||||
padding: 40px 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -17,16 +17,8 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-collection {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .logo {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -36,10 +28,127 @@
|
|||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-post {
|
||||
.col-sm-6 {
|
||||
z-index: 2; // Lets me use z-index:1 for columns that underlap
|
||||
}
|
||||
|
||||
.home-architecture-graphic,
|
||||
.home-budgets-graphic,
|
||||
.home-network-graphic,
|
||||
.home-evolution-graphic {
|
||||
min-height: 350px;
|
||||
@media (min-width: 768px) {
|
||||
> img {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
> img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-architecture-graphic {
|
||||
> img {
|
||||
max-width: 100%;
|
||||
box-shadow: -5px 0 10px $black;
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.home-budgets-graphic {
|
||||
@media (min-width: 768px) {
|
||||
min-height: 385px;
|
||||
> img {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-network-graphic {
|
||||
min-height: 250px;
|
||||
max-width: none;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
z-index: 1;
|
||||
> img {
|
||||
right: -20px;
|
||||
bottom: -50px;
|
||||
max-width: 150%;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: -50px;
|
||||
width: 819px;
|
||||
height: 339px;
|
||||
max-width: 150%;
|
||||
background: linear-gradient(to right, $gray-light, rgba($gray-light, 0.5) 33%, rgba($gray-light, 0) 75%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-evolution-graphic {
|
||||
@media (min-width: 768px) {
|
||||
z-index: 1;
|
||||
> img {
|
||||
top: -40px;
|
||||
bottom: -40px;
|
||||
max-width: none;
|
||||
max-height: calc(100% + 80px);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
bottom: -40px;
|
||||
width: 200%;
|
||||
background: linear-gradient(to left, $white 50%, rgba($white, 0) 87.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-get-started-cta {
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1, h2, h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.btn-white-solid {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-collection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .logo {
|
||||
flex: 1 1 auto;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.news-post {
|
||||
background-color: $white;
|
||||
box-shadow: 0 1px 4px rgba($black, 0.25);
|
||||
margin: 20px 0;
|
||||
|
|
@ -100,5 +209,4 @@
|
|||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB After Width: | Height: | Size: 232 KiB |
BIN
assets/img/home/macbook.png
Normal file
BIN
assets/img/home/macbook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
32
index.html
32
index.html
|
|
@ -7,7 +7,7 @@ description: pages.home.description
|
|||
|
||||
{% tf home/hero.html %}
|
||||
|
||||
<div id="page-home">
|
||||
<div class="page-home">
|
||||
|
||||
<!--
|
||||
WHAT IS DASH?
|
||||
|
|
@ -27,24 +27,26 @@ description: pages.home.description
|
|||
PRIVATE | INSTANT | SECURE
|
||||
-->
|
||||
<section>
|
||||
<div class="content row features-collection">
|
||||
<div class="content">
|
||||
<div class="row features-collection">
|
||||
<div class="col-sm-4">
|
||||
<img src="/assets/img/home/icon_private.png" alt="{% t pages.home.feature-private-heading %}">
|
||||
<img src="/assets/img/home/icon_private.png" height="100" 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 %}">
|
||||
<img src="/assets/img/home/icon_instant.png" height="100" 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 %}">
|
||||
<img src="/assets/img/home/icon_secure.png" height="100" alt="{% t pages.home.feature-secure-heading %}">
|
||||
<h2>{% t pages.home.feature-secure-heading %}</h2>
|
||||
{% tmd pages.home.feature-secure-text %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
|
|
@ -84,7 +86,8 @@ description: pages.home.description
|
|||
NETWORK ARCHITECTURE
|
||||
-->
|
||||
<section>
|
||||
<div class="content row">
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.architecture-heading %}</h2>
|
||||
|
||||
|
|
@ -92,10 +95,11 @@ description: pages.home.description
|
|||
|
||||
<a href="#" class="btn-blue">{% t pages.home.architecture-btn %}</a>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="col-sm-6 home-architecture-graphic">
|
||||
<img src="/assets/img/home/code.png" alt="{% t pages.home.architecture-heading %}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
|
|
@ -112,7 +116,7 @@ description: pages.home.description
|
|||
|
||||
<a href="#" class="btn-blue">{% t pages.home.proposal-submit-btn %}</a>
|
||||
</div>
|
||||
<div class="col-sm-6 col-sm-pull-6">
|
||||
<div class="col-sm-6 col-sm-pull-6 home-budgets-graphic">
|
||||
<img src="/assets/img/home/budgets.png" alt="{% t pages.home.governance-heading%}">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,7 +134,7 @@ description: pages.home.description
|
|||
|
||||
<a href="#" class="btn-blue">{% t pages.home.network-growth-btn %}</a>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="col-sm-6 home-network-graphic">
|
||||
<img src="/assets/img/home/graph.png" alt="{% t pages.home.network-growth-heading %}">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -148,8 +152,8 @@ description: pages.home.description
|
|||
|
||||
<a href="#" class="btn-blue">{% t pages.home.evolution-btn %}</a>
|
||||
</div>
|
||||
<div class="col-sm-6 col-sm-pull-6">
|
||||
|
||||
<div class="col-sm-6 col-sm-pull-6 home-evolution-graphic">
|
||||
<img src="/assets/img/home/stock-photo-63187555-she-ll-source-whatever-her-customers-are-looking-for.jpg" alt="Merchant using a laptop">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -190,13 +194,15 @@ description: pages.home.description
|
|||
<!--
|
||||
GET STARTED
|
||||
-->
|
||||
<section>
|
||||
<section class="home-get-started-cta">
|
||||
<div class="content">
|
||||
<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>
|
||||
<a href="#" class="btn-white-solid">{% t pages.home.get-started-btn %}</a>
|
||||
|
||||
<img src="/assets/img/home/macbook.png" alt="">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue