offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00
Code Issues Projects Releases Wiki Activity

more details index

Browse Source
This commit is contained in:
Hendrik Niefeld 2020-04-26 13:44:53 +02:00
parent 5bf0446914
commit 0b19a193ec
7 changed files with 115 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
homepage/theme/static/css/fix.css
View File

@ -150,8 +150,9 @@ LAYOUT
.hx-more {
height: 30rem;
}
.hx50 {
height: 50rem;
.hx-compare-c,
.hx-compare-d {
height: 100%;
}
.hx-metrics {
height: 100%;
@ -176,6 +177,10 @@ LAYOUT
width: 100%;
}
.hx-compare-c,
.hx-compare-d {
height: 50rem;
}
.hx-metrics {
height: 128rem;
}
@ -249,6 +254,7 @@ LAYOUT
}
@media only screen and (min-width: 60em) {
.stackbox-10 {
top: -2rem;
left: 34rem;
}
.stackbox-20 {
@ -531,6 +537,21 @@ IMAGES
/* ---------------------------------------------------
STACKING IMAGES
----------------------------------------------------*/
.bg-feature-1 img,
.bg-feature-3 img {
max-width: none;
}
.bg-feature-1 {
top: 0;
left: -25%;
z-index : 400;
}
.bg-feature-3 {
top: 0;
left: -35%;
z-index : 410;
}
.bg-compare-a-pfeil {
top: -10rem;
left: 0;
@ -546,48 +567,71 @@ STACKING IMAGES
left: 7rem;
z-index : 530;
}
.bg-metrics-bulb {
top: 7rem;
left: calc(100% - 10rem);
z-index : 550;
}
.bg-cta-pfeil {
top: -11rem;
left: 66%;
z-index : 570;
}
@media only screen and (min-width: 30em) {
.bg-feature-1 {
left: calc(50% - 21rem);
}
.bg-feature-3 {
left: calc(50% - 18rem);
}
.bg-compare-c-pfeil {
top: -5rem;
left: 10rem;
}
.bg-metrics-bulb {
top: 11rem;
left: calc(100% - 30rem);
z-index : 550;
}
.bg-cta-pfeil {
top: -12rem;
left: 72%;
}
}
@media only screen and (min-width: 60em) {
.bg-feature-1 {
left: -50%;
}
.bg-feature-3 {
left: -50%;
}
.bg-metrics-bulb {
top: -1rem;
left: calc(100% - 20rem);
}
.bg-cta-pfeil {
top: -12rem;
left: 66%;
}
}
/* ---------------------------------------------------
BACKROUND IMAGES
----------------------------------------------------*/
#bg-compare-a-pfeil {
padding-top: 20px;
margin-top: -20px;
background: url(/theme/images/gfx-compare-a-pfeil.png) top center;
background-repeat: no-repeat;
background-size: 370px 120px;
}
#bg-feature-1 {
background: url(/theme/images/gfx-feature-1.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
}
#bg-feature-2 {
background: url(/theme/images/gfx-feature-2.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
transform: rotate(180deg);
}
#bg-feature-3 {
background: url(/theme/images/gfx-feature-3.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
transform: rotate(180deg);
#bg-yellow-pattern {
background: url(/theme/images/gfx-bg-yellow-pattern.svg) #BBD9D3 14rem -1rem;
}
#bg-feature {
background: url(/theme/images/gfx-bg-feature.svg) #BBD9D3 center;
#bg-mint-pattern {
background: url(/theme/images/gfx-bg-mint-pattern.svg) #BBD9D3 1rem 2rem;
}
#bg-explainer {
background:

1
homepage/theme/static/images/gfx-bg-mint-pattern.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

1
homepage/theme/static/images/gfx-bg-yellow-pattern.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
homepage/theme/static/images/gfx-cta-pfeil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
homepage/theme/static/images/gfx-feature-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
homepage/theme/static/images/gfx-metrics-bulb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

56
homepage/theme/templates/index.html
View File

@ -30,13 +30,19 @@
</div>
</div>
<div class="w-100 cclr-bg-mint-mid">
<div class="w-100 overflow-hidden" id="bg-mint-pattern">
<div class="mw8 flex flex-wrap justify-center center tc">
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature" id="bg-feature-1">
<div class="hx-feature">
<h2 class="f25 normal lh-solid ma0 mb3 pt5">
<div class="relative">
<div class="absolute bg-feature-1">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
</div>
</div>
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Free & Open
</em>
@ -51,7 +57,7 @@
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-2">
<h2 class="f25 normal lh-solid ma0 mb3 ptx-feature-2">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted
</em>
@ -63,10 +69,17 @@
</div>
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-3">
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<h2 class="f25 normal lh-solid ma0 mb3 ptx-feature-3">
<div class="relative">
<div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
</div>
</div>
<div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1">
Fair & Secure
</em>
@ -74,6 +87,7 @@
<p class="wx18 center ma0">
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
</p>
</div>
</div>
</div>
@ -105,7 +119,7 @@
<!-- COMPARE A -->
<div class="w-50-l w-100">
<div class="cclr-bg-yellow-mid">
<div id="bg-yellow-pattern">
<div class="w-100 dib">
<div class="wx24 center">
@ -157,7 +171,7 @@
<div class="w-100 dn db-l h3 bg-white">
</div>
<div class="w-100 dib cclr-bg-mint-mid">
<div class="w-100 dib" id="bg-mint-pattern">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3">
Benefits for your users
@ -201,7 +215,7 @@
<!-- COMPARE C -->
<div class="w-50-l w-100">
<div class="w-100 hx50 dib cclr-bg-white-fade">
<div class="w-100 hx-compare-c dib cclr-bg-white-fade">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<em>
@ -216,7 +230,7 @@
</p>
<!-- BOX -->
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
<div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
<div class="relative">
<div class="absolute bg-compare-c-pfeil">
@ -268,7 +282,7 @@
<!-- COMPARE D -->
<div class="w-50-l w-100">
<div class="w-100 hx50 dib cclr-bg-white-fade">
<div class="w-100 hx-compare-d dib cclr-bg-white-fade">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<em class="em-mint-2">
@ -283,7 +297,7 @@
</p>
<!-- BOX -->
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
<div class="w-100 dib br2 mb5 mb0-l pa4 shadow-4 cclr-fnt-black-mid bg-white">
<p class="f25 lh-solid ma0 mb2">
1
</p>
@ -381,6 +395,14 @@
<div class="wx24-metrics center">
<div class="relative">
<div class="absolute bg-metrics-bulb">
<img src="/theme/images/gfx-metrics-bulb.png" alt="smile" width="170px" height="170px">
</div>
</div>
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Essential metrics
@ -459,7 +481,15 @@
<!-- CTA -->
<div class="w-100 dib bg-white">
<div class="tc mh4">
<div class="relative">
<div class="absolute bg-cta-pfeil">
<img src="/theme/images/gfx-cta-pfeil.png" alt="arrow" width="150px" height="150px">
</div>
</div>
<p class="f1-ns f2 lh-solid ma0 mt6 mb5">
Switch to fair web analytics
</p>