assets/css/style.css

@@ -652,6 +652,7 @@ hr.-even {
 }
 
 .content__box,
+.contact__box,
 .content__half_box,
 .content__third_box,
 .content__aggregate_box {
@@ -776,6 +777,39 @@ hr.-even {
     width: 100%;
 }
 
+/* Contact form on homepage - start */
+.contact__box {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+.contact__box h1 {
+    grid-area: 1 / 1 / 2 / 3;
+    text-align: right;
+    transform-origin: top right;
+    transform: translateX(-95%) rotate(-80deg);
+    padding: 0;
+    font-size: 9rem;
+    z-index: 0;
+}
+
+.contact__box .contact_info__box {
+    grid-area: 1 / 1 / 2 / 2;
+    margin-left: 11rem;
+    z-index: 1;
+}
+
+.contact__box .contact_form_box {
+    grid-area: 1 / 2 / 3 / 2;
+    z-index: 1;
+}
+
+.contact_info__box {
+    align-self: end;
+}
+/* Contact form on homepage - end */
+
 .content__box p, .content__box li {
     hyphens: auto;
 }
@@ -833,6 +867,7 @@ hr.-even {
 .nav__wrapper,
 .header__wrapper,
 .content__box,
+.contact__box,
 .content__half_box,
 .footer__wrapper,
 .content__third_box,

templates/homepage.html

@@ -1,5 +1,7 @@
 {% extends "header_with_logo.html" %}
+
 {%- block title -%}{{ this.title }}{%- endblock -%}
+
 {%- block meta_description -%}
   {%- if this.meta_description is defined and this.meta_description != "" -%}
     {{ this.meta_description }}
@@ -7,10 +9,70 @@
     Werkkooperative der Technikfreundinnen eG
   {%- endif -%}
 {%- endblock -%}
-{% block body %}
 
+{% block body %}
   {% for blk in this.section.blocks %}
     {{ blk }}
   {% endfor %}
 
+  <div class="contact__box">
+    <h1>Kontakt</h1>
+
+      <div class="contact_info__box">
+      <p>
+        <strong>WTF Kooperative eG</strong><br>
+        Forsmannstr. 14 b<br>
+        22303 Hamburg
+      </p>
+      <p>
+        <strong>E-Mail:</strong><br>
+        office@wtf-eg.de
+      </p>
+      <p>
+        <strong>GnuPG Key:</strong><br>
+        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc">1129A9F509FE1B36287202A2FE8772F9FB5D572F</a>
+      </p>
+    </div>
+      <section class="contact_form_box">
+      <div class="content__box">
+          <div class="content__inner_box -width_constraint">
+              {{ this.body }}
+          </div>
+          <div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none">
+            <h2>Kontaktformular</h2>
+            <form id="contact_form" class="content__contact_form">
+              <p class="contact_form__note">
+                Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
+                <span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span></span>
+              </p>
+              <p class="contact_form__text_input">
+                <label for="name">Betreff <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
+              </p>
+              <p class="contact_form__textarea">
+                <label for="message">Nachricht <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
+              </p>
+              <p class="contact_form__text_input">
+                <label for="name">Name <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
+              </p>
+              <p class="contact_form__text_input">
+                <label for="email">E-Mail-Adresse <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
+              </p>
+              <p class="contact_form__captcha">
+                <label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
+              </p>
+              <p class="contact_form__submit">
+                <input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
+                <p class="contact_form__feedback"></p>
+              </p>
+            </form>
+          </div>
+      </div>
+    </section>
+
+  </div>
 {% endblock %}