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

compare operator user 01

This commit is contained in:
Hendrik Niefeld 2020-04-22 21:32:41 +02:00
parent 399528c0bf
commit 2bda101885
2 changed files with 92 additions and 1 deletions

View File

@ -1,5 +1,36 @@
/* --------------------------------------------------- /* ---------------------------------------------------
COLORS COLORS NEW
----------------------------------------------------*/
/* Yellows */
.cclr-bg-yellow-mid {
background-color: #F7BF08;
}
.cclr-bg-yellow-bright {
background-color: #FDE28C;
}
.cclr-bg-yellow-bright-very {
background-color: #F9F7F2;
}
/* Mint */
.cclr-bg-mint-dark {
background-color: #9BC5BC;
}
.cclr-bg-mint-mid {
background-color: #BBD9D3;
}
.cclr-bg-mint-bright {
background-color: #DEF0ED;
}
/* White */
.cclr-bg-white-fade {
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
}
/* ---------------------------------------------------
COLORS OLD
----------------------------------------------------*/ ----------------------------------------------------*/
/* Custom Tachyons classes */ /* Custom Tachyons classes */
.cclr-mid-yellow { .cclr-mid-yellow {

View File

@ -76,6 +76,62 @@
<!-- INSIGHTS -->
<div class="w-100 dib bg-white">
<p class="tc f1-ns f2 lh-solid ma0 mt5">
Gain insights in an ethical way
</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>
<!-- COMPARE -->
<div class="w-100">
<div class="mw8 center flex flex-wrap justify-center">
<div class="w-50-l w-100">
<div class="w-100 dib cclr-bg-yellow-mid">
<p class="ma0 mt6 mb3 mh4">
temp
</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>
</div>
</div>
<div class="w-50-l w-100">
<div class="w-100 dib h3 bg-white">
</div>
<div class="w-100 dib cclr-bg-mint-mid">
<p class="ma0 mt4 mb3 mh4">
temp
</p>
</div>
<div class="w-100 dib cclr-bg-white-fade">
<p class="ma0 mv4 mh4">
temp
</p>
</div>
</div>
@ -83,6 +139,10 @@
</div>
</div>