Added form styling
This commit is contained in:
Andre Beging
@@ -1,8 +1,46 @@
|
||||
---
|
||||
title: Kontakt & Anfahrt
|
||||
title: Anmeldung
|
||||
date: '2020-02-12'
|
||||
---
|
||||
|
||||
Anmeldeformular kommt
|
||||
|
||||
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBLKLXulGQOIXj123Q6vQL2a-w5qPV342561C9GE0O_6FDcg/viewform?embedded=true" width="100%" height="1491" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
|
||||
<div class="center-container">
|
||||
<div style="width: 100%;max-width: 600px;">
|
||||
<p>
|
||||
Die Anmeldung ist vorerst nur für Chapter-Mitglieder geöffnet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-container">
|
||||
<form class="form">
|
||||
<div class="grow-1">
|
||||
<input id="name" name="name" type="text" required />
|
||||
<label for="name">Name</label>
|
||||
</div>
|
||||
<div class="grow-1">
|
||||
<input id="mail" name="mail" type="email" required />
|
||||
<label for="mail">E-Mail</label>
|
||||
</div>
|
||||
<div class="grow-1">
|
||||
<input id="hex" name="hex" type="text" placeholder="0x00" required pattern="[0-9a-fA-F]{1,2}x[0-9a-fA-F]{1,2}f" />
|
||||
<label for="hex">Hex-ID (z.B. 0xC0)</label>
|
||||
</div>
|
||||
<div class="grow-1">
|
||||
<input id="chapter" name="chapter" type="text" required />
|
||||
<label for="chapter">Chapter</label>
|
||||
</div>
|
||||
<div class="grow-2">
|
||||
<select id="ernaehrung" name="ernaehrung" required>
|
||||
<option selected></option>
|
||||
<option value="Fleisch">Ich esse Fleisch</option>
|
||||
<option value="Vegetarier">Vegetarier</option>
|
||||
<option value="Veganer">Veganer</option>
|
||||
</select>
|
||||
<label for="ernaehrung">Ernährung</label>
|
||||
</div>
|
||||
<div class="grow-2">
|
||||
</div>
|
||||
<div class="grow-2">
|
||||
<input class="btn" type="submit" value="Verbindlich anmelden" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -8,6 +8,7 @@
|
||||
{{ end }}
|
||||
<div id="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<hr />
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div id="hero">
|
||||
<div>
|
||||
<div>
|
||||
<h1>Das erste alljährliche<small>*</small><br /><img src="assets/dd_white.png">-Wochenende</DD></h1>
|
||||
<h1>Das erste alljährliche*<br /><img src="assets/dd_white.png">-Wochenende</DD></h1>
|
||||
<h2>28.08 - 30.08.2020</h2>
|
||||
<h3><a href='{{ "anmeldung/" | absURL }}' class="btn btn-light btn-lg">INFOS</a> <a href='{{ "anmeldung/" | absURL }}' class="btn btn-light btn-lg">JETZT ANMELDEN!</a></h3>
|
||||
</div>
|
||||
|
||||
82
src/style/_form.scss
Normal file
82
src/style/_form.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
.form {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: .7em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.grow-1, .grow-2 {
|
||||
margin-bottom: 0px;
|
||||
flex-basis: 50%;
|
||||
padding: 5px;
|
||||
|
||||
&.single-line label {
|
||||
display: inline;
|
||||
font-size: inherit;
|
||||
opacity: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.grow-1 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.grow-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-xs) {
|
||||
.grow-1, .grow-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=email], select, textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
border-left: 5px solid $primary-color;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display:none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 3px;
|
||||
border: 2px solid $primary-color;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
content: "";
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label::before {
|
||||
box-shadow: inset 0px 0px 0px 3px #fff;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -6,6 +6,7 @@
|
||||
@import "_style.scss";
|
||||
@import "_footer.scss";
|
||||
@import "_cards.scss";
|
||||
@import "_form.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: "SFMoviePoster";
|
||||
@@ -91,11 +92,25 @@ p {
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: $primary-color;
|
||||
text-align: left;
|
||||
margin-left:0;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
input.btn, a.btn {
|
||||
color: #000 !important;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
@@ -183,9 +198,9 @@ body.hero {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 15vw;
|
||||
font-size: 14vw;
|
||||
font-weight: normal;
|
||||
line-height: 15vw;
|
||||
line-height: 11vw;
|
||||
|
||||
img {
|
||||
width: 18vw;
|
||||
|
||||
@@ -6112,6 +6112,84 @@ footer .footer-row img {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.form label {
|
||||
display: block;
|
||||
font-size: 0.7em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.form .grow-1,
|
||||
.form .grow-2 {
|
||||
margin-bottom: 0px;
|
||||
flex-basis: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
.form .grow-1.single-line label,
|
||||
.form .grow-2.single-line label {
|
||||
display: inline;
|
||||
font-size: inherit;
|
||||
opacity: inherit;
|
||||
}
|
||||
.form .grow-1 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.form .grow-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.form .grow-1,
|
||||
.form .grow-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.form input[type='text'],
|
||||
.form input[type='email'],
|
||||
.form select,
|
||||
.form textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
border-left: 5px solid maroon;
|
||||
}
|
||||
.form input[type='submit'] {
|
||||
width: 100%;
|
||||
}
|
||||
.form input[type='text']:focus,
|
||||
.form input[type='email']:focus,
|
||||
.form select:focus,
|
||||
.form textarea:focus {
|
||||
border-color: maroon;
|
||||
}
|
||||
.form input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
.form input[type='checkbox'] + label::before {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 3px;
|
||||
border: 2px solid maroon;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
content: '';
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.form input[type='checkbox']:checked + label::before {
|
||||
box-shadow: inset 0px 0px 0px 3px #fff;
|
||||
background-color: maroon;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SFMoviePoster';
|
||||
src: url('../font/SFMoviePoster.ttf') format('truetype');
|
||||
@@ -6199,10 +6277,25 @@ p {
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: maroon;
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input.btn,
|
||||
a.btn {
|
||||
color: #000 !important;
|
||||
border: 1px solid #ccc;
|
||||
@@ -6221,23 +6314,29 @@ a.btn {
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
input.btn.btn-sm,
|
||||
a.btn.btn-sm {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
input.btn.btn-lg,
|
||||
a.btn.btn-lg {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
input.btn.btn-xl,
|
||||
a.btn.btn-xl {
|
||||
font-size: 2em;
|
||||
}
|
||||
input.btn:hover,
|
||||
a.btn:hover {
|
||||
color: #333 !important;
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
input.btn.btn-light,
|
||||
a.btn.btn-light {
|
||||
color: #fff !important;
|
||||
}
|
||||
input.btn.btn-light:hover,
|
||||
a.btn.btn-light:hover {
|
||||
color: #333 !important;
|
||||
}
|
||||
@@ -6304,9 +6403,9 @@ body.hero {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
#hero h1 {
|
||||
font-size: 15vw;
|
||||
font-size: 14vw;
|
||||
font-weight: normal;
|
||||
line-height: 15vw;
|
||||
line-height: 11vw;
|
||||
}
|
||||
#hero h1 img {
|
||||
width: 18vw;
|
||||
|
||||
2
static/css/ndws.min.css
vendored
2
static/css/ndws.min.css
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user