Merge branch 'master' of edugit.org:hacknfun/hacknfun.org

content/pages/de/informationen/freizeiten.md

@@ -3,54 +3,65 @@ date: 2021-04-08
 lang: de
 template: page_text
 
-<div class="jumbotron">
-  Jedes Jahr führen wir verschiedene Ferien- und Wochenendfreizeiten an. Kinder und Jugendliche erleben in verschiedenen Formaten Themen der Informatik und ein umfangreiches soziales Rahmenprogramm. Unsere Formate stellen wir im Folgenden genauer vor.
-</div>
-<div class="container" id="project-columns">
-  <div class="row">
-    <div class="col">
-      <div class="jumbotron">
-        <h4>Froglabs</h4>
-        <p>
-          Die Froglabs sind Begleitveranstaltungen zu Konferenzen, die sich mit
+Jedes Jahr führen wir verschiedene Ferien- und Wochenendfreizeiten an. Kinder und Jugendliche erleben in verschiedenen Formaten Themen der Informatik und ein umfangreiches soziales Rahmenprogramm. Unsere Formate stellen wir im Folgenden genauer vor.
+
+<div class="row">
+  <div class="col-sm-6">
+    <div class="card hacknfun-card">
+      <div class="card-body">
+        <h5 class="card-title">FrogLabs</h5>
+        <p class="card-text">Die FrogLabs sind Begleitveranstaltungen zu Konferenzen, die sich mit
           freier Software beschäftigen.  Bei den Froglabs bieten wir unseren
           Teilnehmern Workshops zu informatisch-technischen Themen an.  Es gibt die
-          Froglabs auf vielen Freizeiten wie FrOSCon, Tübix, GLT und CLT.  Hier
-          findest du einen <a href="https://teckids.org/de/neuigkeiten/2020/10/22/froglabs-september-2020">Bericht über die letzen Froglabs</a>
-        </p>
+          FrogLabs auf vielen Freizeiten wie der FrOSCon, Tübix, GLT und CLT.</p>
+      </div>
+      <div class="card-footer">
+        <a href="https://teckids.org/de/neuigkeiten/2020/10/22/froglabs-september-2020" class="btn btn-primary btn-fullwidth">Bericht der letzten FrogLabs</a>
       </div>
     </div>
-    <div class="col">
-      <div class="jumbotron">
-        <h4>Fahrten</h4>
-        <p>
-          Zusätzlich zu den Froglabs gibt es noch Fahrten zu Konferenzen, bei
+  </div>
+  <div class="col-sm-6">
+    <div class="card hacknfun-card">
+      <div class="card-body">
+        <h5 class="card-title">Fahrten</h5>
+        <p class="card-text">Zusätzlich zu den Froglabs gibt es noch Fahrten zu Konferenzen, bei
           denen wir keine eigenen Workshops anbieten, sondern die besuchte Konferenz
-          im Vordergrund steht.  Ein Beispiel dafür ist die Hack'n'Fun XMas-Edition.
-        </p>
+          im Vordergrund steht.  Ein Beispiel dafür ist die Hack'n'Fun XMas-Edition.</p>
+      </div>
+      <div class="card-footer">
+        <a href="https://www.teckids.org/de/neuigkeiten/2020/01/09/hacknfun-x-mas-edition-2019/" class="btn btn-primary btn-fullwidth">Bericht der letzten Hack'n'Fun</a>
       </div>
     </div>
   </div>
-  <div class="row">
-    <div class="col">
-      <div class="jumbotron">
-        <h4>Hack'n'Sun</h4>
-        <p>
-          Die <a href="hacknsun.html">Hack'n'Sun</a> ist eine Kinder- und
-          Jugendveranstaltung, die auf dem Jugendzeltplatz in Bonn stattfindet. 
-          2½ Tage lang, vom 7.  bis 10.  Juli und vom 10.  bis 13.  Juli, finden
-          Workshops zu "Elektronik" und "Spieleprogrammieren mit pygame" statt,
-          und es gibt ein umfangreiches Rahmenprogramm mit Übernachtungen und
-          Aktivitäten.
-        </p>
+</div>
+
+<p>
+<br>
+</p>
+
+<div class="row">
+  <div class="col-sm-6">
+    <div class="card hacknfun-card">
+      <div class="card-body">
+        <h5 class="card-title">Hack'n'Sun</h5>
+        <p class="card-text">Die <a href="hacknsun.html">Hack'n'Sun</a> ist eine Kinder- und
+          Jugendveranstaltung, bei der ohne Anbindung an eine Konferenz Workshops
+          angeboten werden. Bei umfangreichem Rahmenprogramm lernen die Teilnehmenden
+          verschiedene Themen aus technisch-naturwissenschaftlichen Feldern kennen.</p>
+      </div>
+      <div class="card-footer">
+        <a href="#" class="btn btn-primary btn-fullwidth">Bericht der letzten Hack'n'Sun</a>
       </div>
     </div>
-    <div class="col">
-      <div class="jumbotron">
-        <h4>Termine und Anmeldung</h4>
-        <p>
-          Hier findest du <a href="https://www.teckids.org/de/veranstaltungen/nachste-veranstaltungen/">unsere aktuellen Veranstaltungen</a>
-        </p>
+  </div>
+  <div class="col-sm-6">
+    <div class="card hacknfun-card">
+      <div class="card-body">
+        <h5 class="card-title">Termine und Anmeldung</h5>
+        <p class="card-text">Hier findest du unsere aktuellen Veranstaltungen</p>
+      </div>
+      <div class="card-footer">
+        <a href="#" class="btn btn-primary btn-fullwidth">Aktuelle Veranstaltungen</a>
       </div>
     </div>
   </div>

content/static/css/custom.css

@@ -23,6 +23,10 @@
   border-bottom: var(--teckids-secondary-dark) 3px solid;
 }
 
+div.hacknfun-card {
+  height: 100%;
+}
+
 a.btn-fullwidth {
   width: 100%;
 }