layout 6

website/theme/static/css/styles.css

@@ -53,7 +53,9 @@ LAYOUT
   padding-bottom: 0.75rem;
   padding-left: 3rem;
 }
-
+.gapExtra {
+  grid-gap: 1rem;
+}
 
 /* ---------------------------------------------------
 TYPOGRAPHY

website/theme/static/images/gfx-index.svg

@@ -1,13 +1,13 @@
 <svg width="768" height="432" viewBox="0 0 768 432" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="768" height="432" fill="#E9500A"/>
-<ellipse cx="70" cy="97" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="70" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="70" cy="319" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="70" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="698" cy="97" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="698" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="698" cy="319" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="698" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="384" cy="97" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="384" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="384" cy="319" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="384" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="227" cy="97" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="227" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="227" cy="319" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="227" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="541" cy="97" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="541" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="541" cy="319" rx="70" ry="69" fill="#D9D9D9"/>
+<ellipse cx="541" cy="319" rx="70" ry="69" fill="#4B1202"/>
 </svg>

website/theme/templates/index.html

@@ -35,32 +35,122 @@
 
 <!-- FOLD -->
 
-<div class="w-100 colorOrange bgColorWhite pv5 mt5">
+<div class="w-100 colorWine bgColorOrange pv5 mt5">
 
   <div class="mw7 center paddingExtra">
 
-    <h3 class="f4 f2-ns fw7 fw4-ns ma0 mb3">
-      Humane computer programs
-    </h3>
     <p class="ma0 mb3">
-      The world is in flux, and it’s a unique opportunity to <span class="fw7">facilitate change </span>for the better.
+      The world is in flux, and it’s a unique opportunity to <span class="fw7">facilitate change for the better.</span>
     </p>
-    <p class="ma0">
+    <p class="ma0 mb3">
       We want to enable the makers that are driving this change by providing them with <span class="fw7">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
     </p>
-
-    <h3 class="f4 f2-ns fw7 fw4-ns ma0 mt5 mb3">
-      Simple, resilient and accessible
-    </h3>
     <p class="ma0 mb3">
-      Located in Berlin, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
+      <span class="fw7">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
     </p>
     <p class="ma0 mb3">
-      Working fully open source allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
+      <span class="fw7">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
     </p>
     <p class="ma0">
-      Our clients value simple, resilient and accessible tools that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
+      Our clients value <span class="fw7">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
     </p>
+    <div class="flex justify-center pt6 pb4">
+      <a class="link dim br1 f5 fw7 ttu tc trackedExtraWide buttonPadding colorWhite bgColorWine" href="###" rel="noopener">Work with us</a>
+    </div>
+
+  </div>
+
+</div>
+
+<!-- FOLD -->
+
+<div class="w-100 pv5 ph3">
+
+  <div class="flex flex-wrap justify-center gapExtra">
+
+    <div class="colorWhite bgColorOrange pa4">
+      <p class="fw7 ma0 mb3">
+        We offer
+      </p>
+      <p class="ma0 mb2">
+        Web Application and website development
+      </p>
+      <p class="ma0 mb2">
+        Independent infrastructure solutions
+      </p>
+      <p class="ma0">
+        Support and guidance with self hosting
+      </p>
+    </div>
+
+    <div class="colorWhite bgColorOrange pa4">
+      <p class="fw7 ma0 mb3">
+        We created
+      </p>
+      <p class="ma0 mb2">
+        Offen Fair Web Analytics
+      </p>
+      <p class="ma0 mb2">
+        analytics.txt
+      </p>
+      <p class="ma0">
+        docker-volume-backup
+      </p>
+    </div>
+
+    <div class="colorWhite bgColorOrange pa4">
+      <p class="fw7 ma0 mb3">
+        We worked with
+      </p>
+      <p class="ma0 mb2">
+        NLNet
+      </p>
+      <p class="ma0 mb2">
+        RBB
+      </p>
+      <p class="ma0 mb2">
+        Ecosia
+      </p>
+      <p class="ma0">
+        Wikimedia
+      </p>
+    </div>
+
+    <div class="colorWhite bgColorOrange pa4">
+      <p class="fw7 ma0 mb3">
+        We are Frederik Ring
+      </p>
+      <p class="ma0 mb2">
+        Currently interested in
+      </p>
+      <p class="ma0 mb2">
+        Minimal Kubernetes distributions
+      </p>
+      <p class="ma0 mb2">
+        Open Source Tomato Seeds
+      </p>
+      <p class="ma0">
+        Psychological aspects of Software Development
+      </p>
+    </div>
+
+    <div class="colorWhite bgColorOrange pa4">
+      <p class="fw7 ma0 mb3">
+        We are Hendrik Niefeld
+      </p>
+      <p class="ma0 mb2">
+        Currently interested in
+      </p>
+      <p class="ma0 mb2">
+        Generative systems
+      </p>
+      <p class="ma0 mb2">
+        Literal present tense in Korean
+      </p>
+      <p class="ma0">
+        Sociological aspects of hyperpolitics
+      </p>
+    </div>
 
   </div>