update feature section

homepage/theme/static/css/fix.css

@@ -22,6 +22,13 @@ COLORS NEW
 .cclr-bg-mint-bright {
 	 background-color: #DEF0ED;
 }
+.cclr-bg-mint-fade-a {
+	background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3;
+}
+.cclr-bg-mint-fade-b {
+	background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3;
+	transform: rotate(-180deg);
+}
 
 /* Black */
 .cclr-bg-black-mid {
@@ -86,11 +93,13 @@ COLORS OLD
 /* ---------------------------------------------------
 LAYOUT
 ----------------------------------------------------*/
+
+/* Menu - UPDATE!!!! */
 .menu {
   width: 100%;
   height: 4rem;  /* Tachyons mt5 */
   position: fixed;
-  z-index: 10;
+  z-index: 999;
   top: 0;
   right: 0;
 }
@@ -111,26 +120,29 @@ LAYOUT
     position: static;
   }
 }
-/* Custom Tachyons class */
+
+
+
 /* OLD */
-.w55-container,
 .w55 {
 	width: 20rem;
 }
-.w56 {
-  width: 20rem;
-	height: 480px;
-}
-/* Custom media query - extra small */
-@media only screen and (max-width: 40em) {
-  .w55-container {
-    width: 100%;
-  }
-}
-
 
 
 /* NEW */
+
+
+/* HWidths and heights */
+.hx-feature {
+	height: 30rem;
+}
+.wx18 {
+	width: 18rem;
+}
+.wx24,
+.wx24-metrics {
+	width: 86%;
+}
 .hx24 {
 	height: 24rem;
 }
@@ -144,91 +156,103 @@ LAYOUT
 .hx-metrics {
 	height: 100%;
 }
-.wx24,
+
-.wx24-metrics {
-	width: 86%;
-}
-/* Tachyons breakpoints 30 & 60 */
 @media only screen and (min-width: 30em) {
 	.hx-try-user {
-		height: 26rem;
+		height: 24rem;
 	}
 	.wx24,
 	.wx24-metrics {
 		width: 24rem;
 	}
 	.hx-metrics {
-		height: 118rem;
+		height: 124rem;
 	}
 }
+
 @media only screen and (min-width: 60em) {
 	.wx24-metrics {
 		width: 100%;
 	}
+	.hx-metrics {
+		height: 128rem;
+	}
 }
 
-
+/* Stacking boxes */
-/* ---------------------------------------------------
+.stackbox-10 img,
-STACKING BOXES
+.stackbox-20 img,
-----------------------------------------------------*/
+.stackbox-30 img,
-/* Tachyons breakpoints 30 & 60 */
+.stackbox-40 img,
-.stackbox-1 img,
+.stackbox-50 img {
-.stackbox-2 img,
-.stackbox-3 img,
-.stackbox-4 img {
 	max-width: 100%;
 }
-.stackbox-1,
+.stackbox-10,
-.stackbox-2,
+.stackbox-20,
-.stackbox-3,
+.stackbox-30,
-.stackbox-4 {
+.stackbox-40,
+.stackbox-50 {
 	width: 86%;
 }
 @media only screen and (min-width: 30em) {
-	.stackbox-1 img,
+	.stackbox-10 img,
-	.stackbox-2 img,
+	.stackbox-20 img,
-	.stackbox-3 img,
+	.stackbox-30 img,
-	.stackbox-4 img {
+	.stackbox-40 img,
+	.stackbox-50 img {
 		max-width: none;
 	}
-	.stackbox-1,
+	.stackbox-10,
-	.stackbox-2,
+	.stackbox-20,
-	.stackbox-3,
+	.stackbox-30,
-	.stackbox-4 {
+	.stackbox-40,
+	.stackbox-50 {
 		width: 24rem;
 	}
-	.stackbox-1 {
+	.stackbox-10 {
-		z-index : 1;
+		z-index : 110;
-		top: 4rem;
+		top: 2rem;
-		left: 3rem;
-	}
-	.stackbox-2 {
-		z-index : 3;
-		top: 20rem;
 		left: calc(100% - 27rem)
 	}
-	.stackbox-3 {
+	.stackbox-20 {
-		z-index : 2;
+		z-index : 120;
-		top: 45rem;
+		top: 12rem;
 		left: 3rem;
 	}
-	.stackbox-4 {
+	.stackbox-30 {
-		z-index : 4;
+		z-index : 140;
-		top: 64rem;
+		top: 33rem;
+		left: calc(100% - 27rem)
+	}
+	.stackbox-40 {
+		z-index : 130;
+		top: 52rem;
+		left: 3rem;
+	}
+	.stackbox-50 {
+		z-index : 148;
+		top: 74rem;
 		left: calc(100% - 27rem)
 	}
 }
 @media only screen and (min-width: 60em) {
-	.stackbox-1 {
+	.stackbox-10 {
+		left: 34rem;
+	}
+	.stackbox-20 {
+		top: 14rem;
 		left: 6rem;
 	}
-	.stackbox-2 {
+	.stackbox-30 {
+		top: 28rem;
 		left: 29rem;
 	}
-	.stackbox-3 {
+	.stackbox-40 {
+		top: 55rem;
 		left: 10rem;
 	}
-	.stackbox-4 {
+	.stackbox-50 {
+		top: 74rem;
 		left: 31rem;
 	}
 }
@@ -521,11 +545,13 @@ GRAPHICS
   background: url(/theme/images/gfx-feature-2.png) center;
 	background-repeat: no-repeat;
 	background-size: 640px 480px;
+	transform: rotate(180deg);
 }
 #bg-feature-3 {
   background: url(/theme/images/gfx-feature-3.png) center;
 	background-repeat: no-repeat;
 	background-size: 640px 480px;
+	transform: rotate(180deg);
 }
 /* --------------------------------------------- */
 #bg-feature {

homepage/theme/templates/index.html

@@ -30,46 +30,54 @@
     </div>
   </div>
 
-  <div class="w-100" id="bg-feature">
+  <div class="w-100 cclr-bg-mint-mid">
-      <div class="center">
+    <div class="mw8 flex flex-wrap justify-center center tc">
-          <div class="flex flex-wrap justify-center w-100">
+
-            <div class="flex justify-center w55-container" id="bg-feature-1">
+      <div class="w-100 w-third-l cclr-bg-mint-fade-a">
-              <div class="w56 tc pa3">
+        <div class="hx-feature" id="bg-feature-1">
-                <h2 class="f25 normal lh-solid mt5 mb3">
+
+          <h2 class="f25 normal lh-solid ma0 mb3 pt5">
             <em class="em-mint-1">
               Free & Open
             </em>
           </h2>
-                <p class="ma0 mb5">
+          <p class="wx18 center ma0">
             Our open source code can be fully audited by the community. It will always be available for free. Seriously.
           </p>
+
         </div>
       </div>
-            <div class="flex justify-center w55-container" id="bg-feature-3">
+
-              <div class="w56 tc pa3">
+      <div class="w-100 w-third-l cclr-bg-mint-fade-b">
-                <h2 class="f25 normal lh-solid mt6 mb3">
+        <div class="hx-feature" id="bg-feature-2">
+
+          <h2 class="f25 normal lh-solid ma0 mb3 pt6">
             <em class="em-mint-1">
               Self hosted
             </em>
           </h2>
-                <p class="ma0">
+          <p class="wx18 center ma0">
             Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
           </p>
         </div>
+
       </div>
-            <div class="flex justify-center w55-container" id="bg-feature-2">
+
-              <div class=" w56 tc pa3">
+      <div class="w-100 w-third-l cclr-bg-mint-fade-b">
-                <h2 class="f25 normal lh-solid mt7 mb3">
+        <div class="hx-feature" id="bg-feature-3">
+
+          <h2 class="f25 normal lh-solid ma0 mb3 pt7">
             <em class="em-mint-1">
               Fair & Secure
             </em>
           </h2>
-                <p class="ma0">
+          <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>
+
     </div>
   </div>
 
@@ -367,9 +375,21 @@
           </p>
         </div>
 
-        <!-- BOX 1 Bars -->
+        <!-- BOX 10 Real -->
         <div class="relative">
-          <div class="relative absolute-m absolute-l stackbox-1 center">
+          <div class="relative absolute-m absolute-l stackbox-10 center">
+            <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
+              <p class="lh-solid ma0 mb4">
+                Real time
+              </p>
+              <img src="/theme/images/gfx-metrics-real.svg" alt="temp" width="320px" class="mb3">
+            </div>
+          </div>
+        </div>
+
+        <!-- BOX 20 Bars -->
+        <div class="relative">
+          <div class="relative absolute-m absolute-l stackbox-20 center">
             <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
               <p class="lh-solid ma0 mb4">
                 Page views and users
@@ -379,9 +399,9 @@
           </div>
         </div>
 
-        <!-- BOX 2 Pages -->
+        <!-- BOX 30 Key -->
         <div class="relative">
-          <div class="relative absolute-m absolute-l stackbox-2 center">
+          <div class="relative absolute-m absolute-l stackbox-30 center">
             <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
               <p class="lh-solid ma0 mb4">
                 Key metrics
@@ -391,9 +411,9 @@
           </div>
         </div>
 
-        <!-- BOX 3 -->
+        <!-- BOX 40 Pages -->
         <div class="relative">
-          <div class="relative absolute-m absolute-l stackbox-3 center">
+          <div class="relative absolute-m absolute-l stackbox-40 center">
             <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
               <p class="lh-solid ma0 mb4">
                 Top pages
@@ -403,9 +423,9 @@
           </div>
         </div>
 
-        <!-- BOX 4 -->
+        <!-- BOX 50 Retention -->
         <div class="relative">
-          <div class="relative absolute-m absolute-l stackbox-4 center mb5 mb0-ns">
+          <div class="relative absolute-m absolute-l stackbox-50 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