From 81256d5828485e4b7373548516de1446a6d65695 Mon Sep 17 00:00:00 2001
From: David Madl <git@abanbytes.eu>
Date: Fri, 8 May 2026 15:28:22 +0200
Subject: [PATCH] initial: template and responsive 3 blocks

---
 hero_bg.svg       | 105 ++++++++++++++++++++++++++++++++++++++++++++++
 hero_bg_plain.svg | 105 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html        |  16 +++++++
 main.css          |  60 ++++++++++++++++++++++++++
 4 files changed, 286 insertions(+)
 create mode 100644 hero_bg.svg
 create mode 100644 hero_bg_plain.svg
 create mode 100644 index.html
 create mode 100644 main.css

diff --git a/hero_bg.svg b/hero_bg.svg
new file mode 100644
index 0000000..5f81d2f
--- /dev/null
+++ b/hero_bg.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="28.700001mm"
+   viewBox="0 0 210 28.700001"
+   version="1.1"
+   id="svg27358"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="hero_bg.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview27360"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.3161819"
+     inkscape:cx="359.7527"
+     inkscape:cy="174.36799"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs27355" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+       id="rect3266-7"
+       width="43"
+       height="2.5"
+       x="89.490257"
+       y="26.195309" />
+    <circle
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+       id="path840-6"
+       cx="21.07"
+       cy="6.0946097"
+       r="6.0700002" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+       id="path840-7-0"
+       cx="21.07"
+       cy="6.0946097"
+       r="3.5699999" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+       id="rect3266-3"
+       width="43"
+       height="2.5"
+       x="26.175133"
+       y="4.8446097" />
+    <circle
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+       id="path840-1"
+       cx="188.33421"
+       cy="17.136074"
+       r="6.0700002" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+       id="path840-7-3"
+       cx="188.33421"
+       cy="17.136074"
+       r="3.5699999" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+       id="rect3266-1"
+       width="43"
+       height="2.5"
+       x="141.76421"
+       y="15.886071" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
+       id="rect3266-9-7"
+       width="31.23"
+       height="2.4999993"
+       x="52.339809"
+       y="-45.488544"
+       transform="rotate(45)" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0224908"
+       id="rect3266-9-7-5"
+       width="15.615"
+       height="2.4999993"
+       x="73.394249"
+       y="111.4756"
+       transform="rotate(-45)" />
+  </g>
+</svg>
diff --git a/hero_bg_plain.svg b/hero_bg_plain.svg
new file mode 100644
index 0000000..6f1cfe6
--- /dev/null
+++ b/hero_bg_plain.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="28.700001mm"
+   viewBox="0 0 210 28.700001"
+   version="1.1"
+   id="svg27358"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="hero_bg_plain.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview27360"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.3161819"
+     inkscape:cx="359.7527"
+     inkscape:cy="174.36799"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs27355" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+       id="rect3266-7"
+       width="43"
+       height="2.5"
+       x="89.490257"
+       y="26.195309" />
+    <circle
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+       id="path840-6"
+       cx="21.07"
+       cy="6.0946097"
+       r="6.0700002" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+       id="path840-7-0"
+       cx="21.07"
+       cy="6.0946097"
+       r="3.5699999" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+       id="rect3266-3"
+       width="43"
+       height="2.5"
+       x="26.175133"
+       y="4.8446097" />
+    <circle
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+       id="path840-1"
+       cx="188.33421"
+       cy="17.136074"
+       r="6.0700002" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+       id="path840-7-3"
+       cx="188.33421"
+       cy="17.136074"
+       r="3.5699999" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+       id="rect3266-1"
+       width="43"
+       height="2.5"
+       x="141.76421"
+       y="15.886071" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
+       id="rect3266-9-7"
+       width="31.23"
+       height="2.4999993"
+       x="52.339809"
+       y="-45.488544"
+       transform="rotate(45)" />
+    <rect
+       style="fill:#003b5c;fill-opacity:1;stroke-width:0.0224908"
+       id="rect3266-9-7-5"
+       width="15.615"
+       height="2.4999993"
+       x="73.394249"
+       y="111.4756"
+       transform="rotate(-45)" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1bd6e57
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+<div class="blocks">
+  <div class="block">
+    <h2>Optimizing software</h2>
+  </div>
+  <div class="block">
+    <h2>Feasibility studies</h2>
+  </div>
+  <div class="block">
+    <h2>Designing software</h2>
+  </div>
+</div>
+<div class="body">
+  <p>Lorem ipsum</p>
+</div>
+<div class="footer">
+</div>
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..f0a0145
--- /dev/null
+++ b/main.css
@@ -0,0 +1,60 @@
+.blocks {
+  display: flex;
+  /*gap: 20px;*/
+  padding-top: 5.78vw;
+  
+  background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% auto;
+}
+
+/* Gap between block 1 and 2 */
+.block:nth-child(1) {
+  margin-right: 11.3vw;
+  /* margin-top */
+  margin-left: 12.85vw;
+}
+/* Gap between block 2 and 3 */
+.block:nth-child(2) {
+  margin-right: 6.01vw;
+  margin-top: 10.16vw;
+}
+.block:nth-child(3) {
+  /* margin-right */
+  margin-top: 5.26vw;
+  margin-right: 13.05vw;
+}
+
+.block h2 {
+  margin-top: 0px;
+}
+.block {
+  flex: 1;
+  height: 200px;
+  background: #e5e7eb;
+  border: 1px solid #ccc;
+  display: flex;
+  /*align-items: center;
+  justify-content: center;*/
+}
+
+/* Small screens */
+@media (max-width: 600px) {
+  .blocks {
+    flex-direction: column;
+    padding-top: 15.92vw;
+    margin: 2.25vw;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  .block:nth-child(1), .block:nth-child(2), .block:nth-child(3) {
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 2.25vw;
+    margin-left: 0;
+  }
+}
\ No newline at end of file