From 2bda10188569e524c1f31677494bc3c0e7fa79da Mon Sep 17 00:00:00 2001
From: Hendrik Niefeld <hello@niefeld.com>
Date: Wed, 22 Apr 2020 21:32:41 +0200
Subject: [PATCH] compare operator user 01

---
 homepage/theme/static/css/fix.css   | 33 +++++++++++++++-
 homepage/theme/templates/index.html | 60 +++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index 6723e43..192c2fd 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -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 */
 .cclr-mid-yellow {
diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html
index 2f7616b..51e0476 100644
--- a/homepage/theme/templates/index.html
+++ b/homepage/theme/templates/index.html
@@ -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>
+
+