spielwiese #201
@ -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,
|
||||
|
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user