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:
parent
a1e4167abf
commit
3109c0048d
4 changed files with 210 additions and 96 deletions
240
_sass/_home.scss
240
_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,69 +28,185 @@
|
|||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-post {
|
||||
background-color: $white;
|
||||
box-shadow: 0 1px 4px rgba($black, 0.25);
|
||||
margin: 20px 0;
|
||||
.news-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60%;
|
||||
background-color: #999;
|
||||
.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;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@supports (object-fit: cover) {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.news-body {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 90px;
|
||||
background: linear-gradient(to top, white 50%, rgba(white, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
color: $blue;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.date {
|
||||
color: lighten($black, 50%);
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
a.read-more {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
z-index: 1;
|
||||
@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;
|
||||
.news-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60%;
|
||||
background-color: #999;
|
||||
> img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@supports (object-fit: cover) {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.news-body {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 90px;
|
||||
background: linear-gradient(to top, white 50%, rgba(white, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
color: $blue;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.date {
|
||||
color: lighten($black, 50%);
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
a.read-more {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
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 |
66
index.html
66
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,22 +27,24 @@ description: pages.home.description
|
|||
PRIVATE | INSTANT | SECURE
|
||||
-->
|
||||
<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 class="content">
|
||||
<div class="row features-collection">
|
||||
<div class="col-sm-4">
|
||||
<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" 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 %}">
|
||||
<h2>{% t pages.home.feature-secure-heading %}</h2>
|
||||
{% tmd pages.home.feature-secure-text %}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<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,16 +86,18 @@ description: pages.home.description
|
|||
NETWORK ARCHITECTURE
|
||||
-->
|
||||
<section>
|
||||
<div class="content row">
|
||||
<div class="col-sm-6">
|
||||
<h2>{% t pages.home.architecture-heading %}</h2>
|
||||
<div class="content">
|
||||
<div class="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>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<img src="/assets/img/home/code.png" alt="{% t pages.home.architecture-heading %}">
|
||||
<a href="#" class="btn-blue">{% t pages.home.architecture-btn %}</a>
|
||||
</div>
|
||||
<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