add html structure

img/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>

img/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>

index.html

@@ -1,3 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>David Madl</title>
+  <link rel="stylesheet" href="main.css">
+</head>
+
+<body>
+
 <div class="blocks">
   <div class="block">
     <h2>Optimizing software</h2>
@@ -26,9 +38,17 @@
     </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>
+</div>
+
+</body>
+</html>

inkscape/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>

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;