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

cta and layout

Browse Source
This commit is contained in:
Hendrik Niefeld 2020-04-25 08:16:43 +02:00
parent 5eff8b4464
commit 17f99474d0
6 changed files with 52 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,8 +36,12 @@ COLORS NEW
/* White */
.cclr-bg-white-fade {
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F3F0E7;
}
.cclr-bg-white-fade-metrics {
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F3F0E7;
}
/* ---------------------------------------------------
@ -130,14 +134,15 @@ LAYOUT
.hx24 {
height: 24rem;
}
.hx30 {
.hx-features,
.hx-try-user {
height: 30rem;
}
.hx50 {
height: 50rem;
}
.hx150 {
height: 150rem;
.hx-metrics {
height: 100%;
}
.wx24,
.wx24-metrics {
@ -145,11 +150,14 @@ LAYOUT
}
/* Tachyons breakpoints 30 & 60 */
@media only screen and (min-width: 30em) {
.hx-try-user {
height: 26rem;
}
.wx24,
.wx24-metrics {
width: 24rem;
}
.hx150 {
.hx-metrics {
height: 118rem;
}
}
@ -521,14 +529,10 @@ GRAPHICS
}
/* --------------------------------------------- */
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
background: url(/theme/images/gfx-bg-feature.svg) #BBD9D3 center;
}
#bg-cta-top {
background: url(/theme/images/gfx-object-white.svg) center;
}
#bg-outro {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
#bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
#bg-explainer {
background:
url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,
url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x;
}

3
homepage/theme/static/images/gfx-bg-explainer.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1440" height="121" viewBox="0 0 1440 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-1" width="1441" height="121" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 163 B

0
homepage/theme/static/images/gfx-pattern-mint-bright.svg → homepage/theme/static/images/gfx-bg-feature.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

1
homepage/theme/static/images/gfx-object-white.svg
View File

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

Before

Width:  |  Height:  |  Size: 34 KiB

1
homepage/theme/static/images/gfx-pattern-mint-mid.svg
View File

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

Before

Width:  |  Height:  |  Size: 21 KiB

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

@ -78,12 +78,12 @@
<!-- INSIGHTS -->
<div class="w-100 dib bg-white">
<div class="mh4">
<p class="tc f1-ns f2 lh-solid ma0 mt5">
<div class="tc mh4">
<p class="f1-ns f2 lh-solid ma0 mt6">
Gain insights in an ethical way
</p>
<div class="mw6 center">
<p class="tc f5 ma0 mt3 mb5 gray">
<p class="f5 ma0 mt3 mb6 gray">
Web analytics is still an unfair and impenetrable business. A proper alternative to common tools is missing. Therefore we develop one. <a class="b link dim gray" href="/deep-dive/">Learn more</a>
</p>
</div>
@ -93,7 +93,7 @@
<!-- COMPARE -->
<div class="w-100">
<div class="w-100" id="bg-explainer">
<div class="mw8 center flex flex-wrap justify-center">
<!-- COMPARE A -->
@ -294,7 +294,7 @@
<!-- COMPARE E -->
<div class="w-50-l w-100">
<div class="w-100 hx30 dib cclr-bg-yellow-mid">
<div class="w-100 hx-features dib cclr-bg-yellow-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
@ -334,7 +334,7 @@
<!-- COMPARE F -->
<div class="w-50-l w-100">
<div class="w-100 hx30 dib cclr-bg-mint-mid">
<div class="w-100 hx-try-user dib cclr-bg-mint-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
Try as user
@ -346,14 +346,14 @@
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
</div>
</div>
<div class="w-100 dn db-l h4 bg-light-gray">
<div class="w-100 dn db-l h4 bg-white">
</div>
</div>
</div>
<!-- METRICS -->
<div class="w-100 hx150 dib cclr-bg-white-fade">
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
<div class="wx24-metrics center">
@ -405,7 +405,7 @@
<!-- BOX 4 -->
<div class="relative">
<div class="relative absolute-m absolute-l stackbox-4 center">
<div class="relative absolute-m absolute-l stackbox-4 center mb5 mb0-ns">
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
<p class="lh-solid ma0 mb4">
Weekly retention
@ -421,7 +421,28 @@
</div>
</div>
<!-- CTA -->
<div class="w-100 dib bg-white">
<div class="tc mh4">
<p class="f1-ns f2 lh-solid ma0 mt6 mb5">
Switch to fair web analytics
</p>
<div class="flex flex flex-wrap justify-center">
<div class="mw5 mb5 mh0 mh4-ns">
<p class="tc f5 ma0 gray mb3">
Single binary file for Linux, Windows or MacOS
</p>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a>
</div>
<div class="mw5 mb7 mh0 mh4-ns">
<p class="tc f5 ma0 gray mb3">
All you need to use Offen in production
</p>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
</div>
</div>
</div>
</div>