more details index

homepage/theme/static/css/fix.css

@@ -150,8 +150,9 @@ LAYOUT
 .hx-more {
 	height: 30rem;
 }
-.hx50 {
+.hx-compare-c,
-	height: 50rem;
+.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 {
+#bg-yellow-pattern {
-  background: url(/theme/images/gfx-feature-3.png) center;
+  background: url(/theme/images/gfx-bg-yellow-pattern.svg) #BBD9D3 14rem -1rem;
-	background-repeat: no-repeat;
-	background-size: 640px 480px;
-	transform: rotate(180deg);
 }
-#bg-feature {
+#bg-mint-pattern {
-  background: url(/theme/images/gfx-bg-feature.svg) #BBD9D3 center;
+  background: url(/theme/images/gfx-bg-mint-pattern.svg) #BBD9D3 1rem 2rem;
 }
 #bg-explainer {
   background:

homepage/theme/templates/index.html

@@ -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="w-100 w-third-l cclr-bg-mint-fade-a">
-        <div class="hx-feature" id="bg-feature-3">
+        <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>