2
0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00

compare operator user 02

This commit is contained in:
Hendrik Niefeld 2020-04-23 13:29:00 +02:00
parent 2bda101885
commit 1bf44206c6
3 changed files with 106 additions and 45 deletions

View File

@ -97,6 +97,7 @@ LAYOUT
} }
} }
/* Custom Tachyons class */ /* Custom Tachyons class */
/* OLD */
.w55-container, .w55-container,
.w55 { .w55 {
width: 20rem; width: 20rem;
@ -112,6 +113,21 @@ LAYOUT
} }
} }
/* NEW */
.wx28 {
width: 28rem;
}
.hx24 {
height: 24rem;
}
/* Tachyons breakpoints 30 & 60 */
@media only screen and (max-width: 30em) {
.wx28 {
width: 100%;
}
}
/* --------------------------------------------------- /* ---------------------------------------------------
TYPO AND LAYOUT ELEMENTS TYPO AND LAYOUT ELEMENTS
----------------------------------------------------*/ ----------------------------------------------------*/

View File

@ -0,0 +1,3 @@
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22.5" cy="22.5" r="22.5" fill="#C4C4C4"/>
</svg>

After

Width:  |  Height:  |  Size: 157 B

View File

@ -78,69 +78,111 @@
<!-- INSIGHTS --> <!-- INSIGHTS -->
<div class="w-100 dib bg-white"> <div class="w-100 dib bg-white">
<p class="tc f1-ns f2 lh-solid ma0 mt5"> <div class="mh4">
Gain insights in an ethical way <p class="tc f1-ns f2 lh-solid ma0 mt5">
</p> Gain insights in an ethical way
<div class="mw6 center">
<p class="tc f5 ma0 mt3 mb5 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> </p>
<div class="mw6 center">
<p class="tc f5 ma0 mt3 mb5 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>
</div> </div>
</div> </div>
<!-- COMPARE --> <!-- COMPARE -->
<div class="w-100"> <div class="w-100">
<div class="mw8 center flex flex-wrap justify-center"> <div class="mw8 center flex flex-wrap justify-center">
<div class="w-50-l w-100">
<div class="w-50-l w-100"> <div class="w-100 dib cclr-bg-yellow-mid">
<div class="w-100 dib cclr-bg-yellow-mid"> <div class="wx28 center">
<p class="ma0 mt6 mb3 mh4"> <p class="f25 lh-solid ma0 mt6 mb3 mh4">
temp Your job
</p>
</div>
<div class="w-100 dib cclr-bg-white-fade">
<p class="ma0 mt4 mb2 mh4">
temp
</p>
<p class="ma0 mt4 mb2 mh4">
temp
</p>
<p class="ma0 mt4 mb2 mh4">
temp
</p>
<p class="ma0 mt4 mb2 mh4">
temp
</p> </p>
</div> </div>
</div> </div>
<div class="w-100 hx24 dib cclr-bg-white-fade">
<div class="w-50-l w-100"> <div class="wx28 center">
<div class="w-100 dib h3 bg-white"> <div class="flex items-center mt4 mh4">
</div> <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<div class="w-100 dib cclr-bg-mint-mid"> <p class="ma0 ml3">
<p class="ma0 mt4 mb3 mh4"> Self host Offen and thereby comply with GDPR guidelines.
temp </p>
</p> </div>
</div> <div class="flex items-center mt4 mh4">
<div class="w-100 dib cclr-bg-white-fade"> <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 mv4 mh4"> <p class="ma0 ml3">
temp Integrate the code snippet into pages you want to track.
</p> </p>
</div>
<div class="flex items-center mt4 mh4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
Make your users aware of the access to their data.
</p>
</div>
<div class="flex items-center mt4 mh4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
Improve your services with fair and transparent insights.
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-50-l w-100">
<div class="w-100 dn db-l h3 bg-white">
</div>
<div class="w-100 dib cclr-bg-mint-mid">
<div class="wx28 center">
<p class="f25 lh-solid ma0 mt5 mb3 mh4">
Benefits for your users
</p>
</div>
</div>
<div class="w-100 hx24 dib cclr-bg-white-fade">
<div class="wx28 center">
<div class="flex items-center mt4 mh4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
Opt in to data collection or decide to not participate at all.
</p>
</div>
<div class="flex items-center mt4 mb2 mh4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
Review own data with detailed explanations of metrics and terms.
</p>
</div>
<div class="flex items-center mt4 mb2 mh4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
Delete only usage data or opt out completly at any time.
</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>