Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:kengetallenboek [2025/03/31 19:22] – support
+++ handleiding_nieuw:kengetallenboek [2025/04/01 12:19] (current) – support
@@ Line 1: / Line 1: @@
 <html>
-<div style="display: flex; align-items: flex-start; gap: 2em; flex-wrap: wrap;">
+<style>
-  <div style="flex: 1; min-width: 320px; max-width: 600px;">
+.tegelcontainer {
-    <h1>Kengetallenboek</h1>
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  margin-top: 2em;
+}
+.tegel {
+  width: 84px;
+  height: 48px;
+  background: #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 0.84em;
+  font-weight: bold;
+  border-radius: 4px;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+  transition: background 0.3s ease;
+}
+.tegel a {
+  text-decoration: none;
+  color: #000;
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0.5em;
+}
+.tegel:hover {
+  background: #ccc;
+}
+.kopgroep {
+  font-size: 1.2em;
+  font-weight: bold;
+  margin-top: 2em;
+  margin-bottom: 0.5em;
+}
+.flexgroep {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  margin-bottom: 2em;
+}
+</style>
-    <p>Welkom bij het digitale Kengetallenboek van Sumsonite. Dit boek is gebaseerd op het oorspronkelijke boekje dat in samenwerking met Gebiedsmanagers Maassluis is ontwikkeld.</p>
+<div style="display: flex; gap: 2em; align-items: flex-start; flex-wrap: wrap;">
+  <div style="flex: 1; min-width: 300px;">
+    <div class="kopgroep" style="text-align: left;">Wegprofielen</div>
+    <div class="flexgroep">
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_klimaat">KLIMAAT-<br>OPLOSSINGEN</a></div>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_wijkbuurt">WIJK/BUURT</a></div>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_woonstraten">WOONSTRATEN</a></div>
+    </div>
-    <p>Per profiel vind je hier:</p>
+    <div class="kopgroep">Leefgebieden en ontmoetingsplekken</div>
-    <ul>
+    <div class="flexgroep">
-      <li>Een beschrijving van het profiel</li>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_pleinen">PLEINEN</a></div>
-      <li>De kostprijs per strekkende meter en per m²</li>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_parken">PARKEN</a></div>
-      <li>De bijbehorende doorsnede</li>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_winkelstraten">WINKELSTRATEN</a></div>
-      <li>Een interactieve module om het effect van klimaatadaptieve maatregelen op de kostprijs te berekenen</li>
+    </div>
-    </ul>
-    <p><strong>Kies een profielcategorie:</strong></p>
+    <div class="kopgroep">Overige kostenbepalende elementen</div>
-    <ul>
+    <div class="flexgroep">
-      <li><a href="/wiki/doku.php?id=sub_wijkbuurt">Wijk/buurt</a></li>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_watergangen">WATERGANGEN</a></div>
-      <li><a href="/wiki/doku.php?id=sub_woonstraten">Woonstraten</a></li>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_elementen">ELEMENTEN</a></div>
-      <li><a href="/wiki/doku.php?id=sub_pleinen">Pleinen</a></li>
+      <div class="tegel" style="margin-left: 2em;"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_infooverons">OVER ONS</a></div>
-      <li><a href="/wiki/doku.php?id=sub_parken">Parken</a></li>
+    </div>
-      <li><a href="/wiki/doku.php?id=sub_winkelstraten">Winkelstraten</a></li>
-      <li><a href="/wiki/doku.php?id=sub_watergangen">Watergangen</a></li>
-      <li><a href="/wiki/doku.php?id=sub_elementen">Elementen</a></li>
-    </ul>
   </div>
-  <div style="flex: 1; min-width: 320px; text-align: right;">
-    <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:kengetallen:voorblad.jpg" alt="Kengetallen voorblad" style="max-width: 100%; height: auto;">
+  <div style="flex: 1; min-width: 450px; text-align: right;">
+    <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:kengetallen:voorblad.jpg" alt="Kengetallen voorblad" style="width: 100%; max-width: 640px; height: auto;">
   </div>
 </div>
 </html>