From ac0571a6269b5ceff7c90d0fbdf30b321017e430 Mon Sep 17 00:00:00 2001
From: David Madl <git@abanbytes.eu>
Date: Fri, 8 May 2026 22:28:16 +0200
Subject: [PATCH] add contact link

---
 cta.svg             |  29 ++++++++++
 hero_bg_2.svg       | 128 ++++++++++++++++++++++++++++++++++++++++++++
 hero_bg_2_plain.svg | 116 +++++++++++++++++++++++++++++++++++++++
 index.html          |   9 +++-
 main.css            |  55 +++++++++++++++++--
 5 files changed, 331 insertions(+), 6 deletions(-)
 create mode 100644 cta.svg
 create mode 100644 hero_bg_2.svg
 create mode 100644 hero_bg_2_plain.svg

diff --git a/cta.svg b/cta.svg
new file mode 100644
index 0000000..b37bcc6
--- /dev/null
+++ b/cta.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="28mm"
+   height="12.5mm"
+   viewBox="0 0 28 12.5"
+   version="1.1"
+   id="svg29846"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs29843" />
+  <g
+     id="layer1">
+    <circle
+       style="fill:#00adee;fill-opacity:1;stroke-width:0.0555501"
+       id="path840-6-5"
+       cx="21.17"
+       cy="6.1161757"
+       r="6.0700002" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+       id="path840-7-0-6"
+       cx="21.17"
+       cy="6.1161757"
+       r="3.5699999" />
+  </g>
+</svg>
diff --git a/hero_bg_2.svg b/hero_bg_2.svg
new file mode 100644
index 0000000..b1a182e
--- /dev/null
+++ b/hero_bg_2.svg
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="600mm"
+   viewBox="0 0 210 600"
+   version="1.1"
+   id="svg13367"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="hero_bg_2.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="namedview13369"
+     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"
+     inkscape:zoom="1.7128681"
+     inkscape:cx="219.80676"
+     inkscape:cy="273.51784"
+     inkscape:window-width="2400"
+     inkscape:window-height="1261"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g13905" />
+  <defs
+     id="defs13364" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g13905"
+       transform="translate(-4.6826096,0.77377499)">
+      <rect
+         style="fill:#00adee;fill-opacity:1;stroke-width:0.13348"
+         id="rect3266-3-9"
+         width="550"
+         height="2.5"
+         x="-558.88629"
+         y="24.800598"
+         transform="rotate(-90)" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+         id="rect3266-7"
+         width="43"
+         height="2.5"
+         x="94.470894"
+         y="25.416904" />
+      <circle
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+         id="path840-6"
+         cx="26.050598"
+         cy="5.3162251"
+         r="6.0700002" />
+      <circle
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+         id="path840-7-0"
+         cx="26.050598"
+         cy="5.3162251"
+         r="3.5699999" />
+      <circle
+         style="fill:#00adee;fill-opacity:1;stroke-width:0.0555501"
+         id="path840-6-5"
+         cx="26.050598"
+         cy="114.77202"
+         r="6.0700002" />
+      <circle
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+         id="path840-7-0-6"
+         cx="26.050598"
+         cy="114.77202"
+         r="3.5699999" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+         id="rect3266-3"
+         width="43"
+         height="2.5"
+         x="31.155714"
+         y="4.0662231" />
+      <circle
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+         id="path840-1"
+         cx="193.31462"
+         cy="16.357677"
+         r="6.0700002" />
+      <circle
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+         id="path840-7-3"
+         cx="193.31462"
+         cy="16.357677"
+         r="3.5699999" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+         id="rect3266-1"
+         width="43"
+         height="2.5"
+         x="146.7446"
+         y="15.10769" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
+         id="rect3266-9-7"
+         width="31.23"
+         height="2.4999993"
+         x="55.311241"
+         y="-49.560772"
+         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="77.466377"
+         y="114.44683"
+         transform="rotate(-45)" />
+    </g>
+  </g>
+</svg>
diff --git a/hero_bg_2_plain.svg b/hero_bg_2_plain.svg
new file mode 100644
index 0000000..72fa2e8
--- /dev/null
+++ b/hero_bg_2_plain.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="600mm"
+   viewBox="0 0 210 600"
+   version="1.1"
+   id="svg13367"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="hero_bg_2.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="namedview13369"
+     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"
+     inkscape:zoom="1.7128681"
+     inkscape:cx="219.80676"
+     inkscape:cy="507.04428"
+     inkscape:window-width="2400"
+     inkscape:window-height="1261"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g13905" />
+  <defs
+     id="defs13364" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g13905"
+       transform="translate(-4.6826096,0.77377499)">
+      <rect
+         style="fill:#00adee;fill-opacity:1;stroke-width:0.13348"
+         id="rect3266-3-9"
+         width="550"
+         height="2.5"
+         x="-558.88629"
+         y="24.800598"
+         transform="rotate(-90)" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+         id="rect3266-7"
+         width="43"
+         height="2.5"
+         x="94.470894"
+         y="25.416904" />
+      <circle
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+         id="path840-6"
+         cx="26.050598"
+         cy="5.3162251"
+         r="6.0700002" />
+      <circle
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+         id="path840-7-0"
+         cx="26.050598"
+         cy="5.3162251"
+         r="3.5699999" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+         id="rect3266-3"
+         width="43"
+         height="2.5"
+         x="31.155714"
+         y="4.0662231" />
+      <circle
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
+         id="path840-1"
+         cx="193.31462"
+         cy="16.357677"
+         r="6.0700002" />
+      <circle
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
+         id="path840-7-3"
+         cx="193.31462"
+         cy="16.357677"
+         r="3.5699999" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
+         id="rect3266-1"
+         width="43"
+         height="2.5"
+         x="146.7446"
+         y="15.10769" />
+      <rect
+         style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
+         id="rect3266-9-7"
+         width="31.23"
+         height="2.4999993"
+         x="55.311241"
+         y="-49.560772"
+         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="77.466377"
+         y="114.44683"
+         transform="rotate(-45)" />
+    </g>
+  </g>
+</svg>
diff --git a/index.html b/index.html
index ad57e2a..aa38bf6 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,14 @@
     </ul>
   </div>
 </div>
-<div class="body">
+<div class="cta">
   <!--<p>Lorem ipsum</p>-->
+  <div class="cta-content">
+    <h2>Need results?</h2>
+    <p><svg style="height: 1.5em; vertical-align: -0.4em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M125.4 128C91.5 128 64 155.5 64 189.4C64 190.3 64 191.1 64.1 192L64 192L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 192L575.9 192C575.9 191.1 576 190.3 576 189.4C576 155.5 548.5 128 514.6 128L125.4 128zM528 256.3L528 448C528 456.8 520.8 464 512 464L128 464C119.2 464 112 456.8 112 448L112 256.3L266.8 373.7C298.2 397.6 341.7 397.6 373.2 373.7L528 256.3zM112 189.4C112 182 118 176 125.4 176L514.6 176C522 176 528 182 528 189.4C528 193.6 526 197.6 522.7 200.1L344.2 335.5C329.9 346.3 310.1 346.3 295.8 335.5L117.3 200.1C114 197.6 112 193.6 112 189.4z"/></svg> <a href="mailto:todo@example.com">todo@example.com</a></p>
+    <!--<h2>cta</h2>-->
+  </div>
 </div>
 <div class="footer">
-  <p>Footer</p>
+  <p>&copy; 2026 David Madl</p>
 </div>
\ No newline at end of file
diff --git a/main.css b/main.css
index 7ef28f1..4c8a00d 100644
--- a/main.css
+++ b/main.css
@@ -13,8 +13,9 @@ h1, h2, h3, h4, h5, h6 {
   /*gap: 20px;*/
   padding-top: 5.78vw; /* hor spacing from line to heading top */
   margin-top: 2.25vw;
+  margin-bottom: 0;
 
-  background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
+  background-image: url("https://abanbytes.eu/upload/hero_bg_2_plain.svg");
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100% auto;
@@ -45,6 +46,7 @@ h1, h2, h3, h4, h5, h6 {
   /*align-items: center;
   justify-content: center;*/
   flex-direction: column;
+  margin-bottom: 2.25vw; /* bottom distance to cta, in regular mode */
 }
 
 .block h2 {
@@ -66,7 +68,8 @@ h1, h2, h3, h4, h5, h6 {
     flex-direction: column;
     padding-top: 19.29vw;
     margin-top: 2.25vw;
-    margin-bottom: 2.25vw;
+    margin-bottom: 0;
+    width: max(100%, calc(15em + 2 * 12.85vw));
   }
 
   .block {
@@ -83,14 +86,58 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   .block:nth-child(1) {
-    margin-top: 
+    margin-top: 0;
+  }
+  .block:nth-child(3) {
+    margin-bottom: 4.5vw; /* bottom 2.25vw + distance to cta, in responsive mode */
   }
 }
 
-div.body, div.footer {
+.cta {
+  margin-left: 0;
+  margin-top: -0.3vw;
+  padding-left: 13vw;
+}
+
+div.cta {
+  /*width: 100%;*/
+  min-height: 5.95vw;
+  background-image: url("https://abanbytes.eu/upload/cta.svg");
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: auto 5.95vw;
+}
+
+div.footer {
   margin-left: 7.14vw;
   margin-right: 7.14vw;
 }
+div.cta {
+  margin-right: 7.14vw;
+}
+.cta {
+  /* set variables */
+  --circle-center-y: 2.905vw;
+  --cta-heading-size: 1.5rem;
+  --cta-heading-line-height: 1.2;
+}
+.cta h2 {
+  margin-top: 0px;
+  margin-bottom: 0.5rem; /* sensitive to .cta h2 font-size */
+  font-size: var(--cta-heading-size);
+  line-height: var(--cta-heading-line-height);
+}
+.cta p:first-of-type {
+  margin-top: 0.5rem;
+}
+
+div.cta-content {
+  padding-top: calc(
+    var(--circle-center-y) -
+    ((var(--cta-heading-size) * var(--cta-heading-line-height)) * 0.5)
+  );
+  margin-left: 2.25vw;
+}
 
 div.footer {
   margin-top: 7.14vw;