initial: template and responsive 3 blocks

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>

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>

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>

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;
+  }
+}