stacking images

homepage/theme/static/css/fix.css

@@ -133,9 +133,6 @@ LAYOUT
 
 
 /* HWidths and heights */
-.hx-feature {
-	height: 30rem;
-}
 .wx18 {
 	width: 18rem;
 }
@@ -144,7 +141,13 @@ LAYOUT
 	width: 86%;
 }
 
-.hx-features, {
+.hx24 {
+	height: 24rem;
+}
+.hx-feature {
+	height: 30rem;
+}
+.hx-more {
 	height: 30rem;
 }
 .hx50 {
@@ -155,16 +158,14 @@ LAYOUT
 }
 
 @media only screen and (min-width: 30em) {
-	.hx24 {
-		height: 24rem;
-	}
-	.hx-try-user {
-		height: 24rem;
-	}
 	.wx24,
 	.wx24-metrics {
 		width: 24rem;
 	}
+
+	.hx-try-user {
+		height: 24rem;
+	}
 	.hx-metrics {
 		height: 124rem;
 	}
@@ -174,6 +175,7 @@ LAYOUT
 	.wx24-metrics {
 		width: 100%;
 	}
+
 	.hx-metrics {
 		height: 128rem;
 	}
@@ -526,6 +528,37 @@ IMAGES
 }
 
 
+/* ---------------------------------------------------
+STACKING IMAGES
+----------------------------------------------------*/
+.bg-compare-a-pfeil {
+	top: -10rem;
+	left: 0;
+	z-index : 510;
+}
+.bg-compare-b-smile {
+	top: 17rem;
+	left: 6rem;
+	z-index : 520;
+}
+.bg-compare-c-pfeil {
+	top: -5rem;
+	left: 7rem;
+	z-index : 530;
+}
+
+@media only screen and (min-width: 30em) {
+		.bg-compare-c-pfeil {
+			top: -5rem;
+			left: 10rem;
+		}
+}
+
+@media only screen and (min-width: 60em) {
+
+}
+
+
 /* ---------------------------------------------------
 BACKROUND IMAGES
 ----------------------------------------------------*/

homepage/theme/templates/index.html

@@ -98,8 +98,6 @@
     </div>
   </div>
 
-
-
   <!-- COMPARE -->
   <div class="w-100" id="bg-explainer">
     <div class="mw8 center flex flex-wrap justify-center">
@@ -108,8 +106,15 @@
       <div class="w-50-l w-100">
 
         <div class="cclr-bg-yellow-mid">
-          <div class="w-100 dib" id="bg-compare-a-pfeil">
+          <div class="w-100 dib">
             <div class="wx24 center">
+
+              <div class="relative">
+                <div class="absolute bg-compare-a-pfeil">
+                  <img src="/theme/images/gfx-compare-a-pfeil.png" alt="arrow" width="40px" height=="120px">
+                </div>
+              </div>
+
               <p class="f25 lh-solid ma0 mt6 mb3">
                 Your job
               </p>
@@ -163,7 +168,14 @@
         <div class="w-100 hx24 dib cclr-bg-white-fade">
           <div class="wx24 center">
 
+            <div class="relative">
+              <div class="absolute bg-compare-b-smile">
+                <img src="/theme/images/gfx-compare-b-smile.png" alt="smile" width="210px" height="140px">
+              </div>
+            </div>
+
             <div class="flex flex-wrap justify-center">
+
               <div class="w-20 mt4">
                 <img src="/theme/images/gfx-compare-b.png" alt="ok" width="75px" height="315px">
               </div>
@@ -177,7 +189,7 @@
                 <p class="ma0 ml3 mt4">
                   Only delete usage data or opt out completly at any time.
                 </p>
-                <img src="/theme/images/gfx-compare-b-smile.png" alt="smile" width="300px" height="140px">
+
               </div>
             </div>
 
@@ -205,6 +217,13 @@
 
             <!-- BOX -->
             <div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
+
+              <div class="relative">
+                <div class="absolute bg-compare-c-pfeil">
+                  <img src="/theme/images/gfx-compare-c-pfeil.png" alt="arrow" width="150px" height="150px">
+                </div>
+              </div>
+
               <p class="f25 lh-solid ma0 mb2">
                 478
               </p>
@@ -303,7 +322,7 @@
       <!-- COMPARE E -->
       <div class="w-50-l w-100">
 
-        <div class="w-100 hx-features dib cclr-bg-yellow-mid">
+        <div class="w-100 hx-more dib cclr-bg-yellow-mid">
           <div class="wx24 center">
 
             <p class="f25 lh-solid ma0 mt5">