diff --git a/assets/css/style.css b/assets/css/style.css index 57ab02d7..333fe957 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -209,6 +209,7 @@ header { max-width: 1200px; display: flex; flex-direction: column; + margin-bottom: 3rem; } .header__top_box { @@ -223,7 +224,9 @@ header { grid-row: 1 / span 1; } -.header__button, .content__button { +.header__button, +.content__button, +.claim__button { height: 3rem; margin: 1.5rem 1rem 0rem 0; padding: 0.5rem 2.5rem 0.5rem 2.5rem; @@ -246,7 +249,7 @@ header { background-size: cover; display: grid; - grid-template-rows: 46px 18px 12rem 8.5rem 55px 18px auto; + grid-template-rows: 46px 18px 12rem 8.5rem 55px 18px; grid-template-columns: 15% 82px auto 96px 22.5%; z-index: 0; } @@ -291,11 +294,11 @@ header { } .bg_box__unicorns { - grid-row: 2 / span 6; + grid-row: 2 / span 5; grid-column: 1 / span 5; background-image: url("../images/white_unicorns.svg"); background-position: top 5% left 95% ; - background-size: auto 65%; + background-size: auto 80%; background-repeat: no-repeat; z-index: 10; } @@ -383,9 +386,9 @@ header { } .header__sub_claim { - grid-row: 4 / span 4; + grid-row: 4 / span 3; grid-column: 3 / span 3; - margin: 1rem 2rem -3rem 1.5rem; + margin: 3.5rem 2rem -3rem 1.5rem; padding: 0.5rem 1.5rem 0 1.5rem; background-color: var(--wtf-orange); z-index: 15; @@ -394,14 +397,16 @@ header { background-color: transparent; } -.sub_claim__box { - padding: 0.5rem 1.5rem 1.5rem 1.5rem; +.sub_claim__box, .claim__background_box { + padding: 0.5rem 1.5rem 3.5rem 1.5rem; background-color: var(--wtf-orange); + z-index: 5; } -.sub_claim__button { +.sub_claim__button, .claim__button { align-self: flex-end; margin-top: -1.5rem; + z-index: 5; } .header__sub_claim h2 { @@ -426,16 +431,21 @@ header { text-decoration: none; } -.content__inner_third_button_link { - color: white; - font-family: 'Lato Bold; +.content__inner_third_button_link, +.claim__button_link { + color: white !important; + font-family: 'Lato Bold'; } -.header__button_link, .content__inner_third_button_link { +.header__button_link, +.content__inner_third_button_link, +.claim__button_link { text-decoration: none !important; } -.header__button_link:hover, .content__inner_third_button_link:hover { +.header__button_link:hover, +.content__inner_third_button_link:hover, +.claim__button_link:hover { text-decoration: underline !important; } /* header - Ende */ @@ -586,6 +596,52 @@ hr.-even { width: 33%; } +.flex_heading { + margin-top: 0.5rem; + z-index: 5; +} + +.claim { + display: flex; + flex-direction: column; +} + +.claim__text { + color: white; + font-size: 1.2rem; + line-height: 1.4em; + margin: 0.5rem 0 1.5rem 0; +} + +.claim__button { + z-index: 5; +} + +.card { + margin: 3rem 1.5rem 0 1.5rem; + max-width: 300px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.card__icon { + width: 7rem; + margin: 0 auto; +} + +.card__heading { + color: white; + font-family: 'Lato'; + font-size: 1.3rem; + text-align:center; + margin: 1rem 0; +} + +.card__text { + text-align: center; +} + .content__inner_third_image { margin-bottom: 1.5rem; } @@ -683,6 +739,45 @@ hr.-even { margin-bottom: 1.5rem; } +.content__box.-card_box { + margin-top: -7rem; + padding-top: 7rem; + + /* + * Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#729baf+0,8ea8a9+100 + * + * Dunkler, Kontrast zum Fließtext und zum Koffer-Icon fragwürdig. + */ + background: #729baf; + background: -moz-linear-gradient(45deg, #729baf 0%, #8ea8a9 100%); + background: -webkit-linear-gradient(45deg, #729baf 0%,#8ea8a9 100%); + background: linear-gradient(45deg, #729baf 0%,#8ea8a9 100%); + + /* + * Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5491ad+0,add7d8+100 + * + * Heller, Kontrast zur Überschrift und zum Group-Icon fragwürdig. + * + background: #5491ad; + background: -moz-linear-gradient(45deg, #5491ad 0%, #add7d8 100%); + background: -webkit-linear-gradient(45deg, #5491ad 0%,#add7d8 100%); + background: linear-gradient(45deg, #5491ad 0%,#add7d8 100%); + */ + + z-index: 0; +} + +.content__inner_box.-card_box, +.content__inner_box.-card_box_head { + display: flex; + justify-content: space-around; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + padding-bottom: 3rem; + margin: 0; +} + .content__box.-columns { -webkit-column-count: var(--column-count); -moz-column-count: var(--column-count); @@ -819,6 +914,10 @@ footer { } @media screen and (max-width: 1044px) and (min-width: 960px) { + header { + margin-bottom: 4rem; + } + .header__bg_box { grid-template-columns: 15% 82px auto 96px 22.5%; } @@ -856,9 +955,26 @@ footer { .content__button { width: 100%; } + + .content__inner_box.-card_box_head { + flex-direction: column-reverse; + } + + .flex_heading { + margin: 1.5rem 0 -1.5rem 1.5rem; + } + + .content__box.-card_box { + margin-top: 0; + padding-top: 0; + } } @media screen and (max-width: 959px) and (min-width: 790px) { + header { + margin-bottom: 1rem; + } + .header__bg_box { grid-template-columns: 15% 82px auto 96px 22.5%; } @@ -908,6 +1024,19 @@ footer { .content__button { width: 100%; } + + .content__inner_box.-card_box_head { + flex-direction: column-reverse; + } + + .flex_heading { + margin: 1.5rem 0 -1.5rem 1.5rem; + } + + .content__box.-card_box { + margin-top: 0; + padding-top: 0; + } } @media screen and (max-width: 850px) and (min-width: 790px) { @@ -946,6 +1075,19 @@ footer { .content__button { width: 100%; } + + .content__inner_box.-card_box_head { + flex-direction: column-reverse; + } + + .flex_heading { + margin: 1.5rem 0 -1.5rem 1.5rem; + } + + .content__box.-card_box { + margin-top: 0; + padding-top: 0; + } } @media screen and (max-width: 789px) and (min-width: 596px) { @@ -953,6 +1095,10 @@ footer { --column-count: 2 } + header { + margin-bottom: 0; + } + header, .header__bg_box, .header__slim_box { display: flex; flex-direction: column; @@ -1075,6 +1221,23 @@ footer { .content__inner_third_heading { margin-top: 3rem; } + + .content__inner_box.-card_box_head { + flex-direction: column-reverse; + } + + .flex_heading { + margin: 1.5rem 0 -1.5rem 1.5rem; + } + + .content__box.-card_box { + margin-top: 0; + padding-top: 0; + } + + .card { + max-width: 250px; + } /* homepage - end */ } @@ -1272,5 +1435,22 @@ footer { .content__inner_third_heading { margin-top: 3rem; } + + .content__inner_box.-card_box_head { + flex-direction: column-reverse; + } + + .flex_heading { + margin: 1.5rem 0 -1.5rem 1.5rem; + } + + .content__box.-card_box { + margin-top: 0; + padding-top: 0; + } + + .card { + max-width: 450px; + } /* homepage - end */ } diff --git a/templates/homepage.html b/templates/homepage.html index 4103c172..896c27a5 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -115,6 +115,80 @@ + +
+
+
+
+

Vielfältige Vorteile

+
+
+
+

Werde Teil der Community

+

Hackergemeinschaft, Cowdfunding, Crowdbuying, Startup, Ausschreibung, …
+ Wir realisieren gemeinsam Projekte, in bester Genossenschaft.

+
+ +
+
+
+ +
+
+
+ +

Genossenschaftlich solidarisch

+

Eine Hackergemeinschaft ist aeine Aufstellung, die im Markt allerhand bewegen kann.

+
+ +
+ +

Genossenschaftlich stark

+

Was eine/r allein nicht kann, das schaffen viele zusammen. Sowohl intellektuell, finanziell und in rechtsscierer, wirtschaftlich stabiler Umgebung.

+
+ +
+ +

Auf eigene Rechnung oder angestellt

+

Mach Deine Genossenschaft zu deinem Arbeitgeber in dem Du Dich bei der Genossenschaft anstellen lässt.

+
+ +
+ +

Helfen und lernen

+

Profitiere von Know-How und Erfahrungsaustausch in der Genossenschaft.

+
+ +
+ +

Die eigene Arbeit managen und abrechnen lassen

+

Rechnungen schreiben? Gewerbeanmeldung? Mehraufwand für Buchführung und Steuererklärung? Spare Dir den Aufand, lass' das deine Genossenschaft machen!

+
+ +
+ +

Virtuelle Teams, großartige Jobs

+

Viele von uns arbeiten freiberuflich. Von überall her, überall hin, flexibel und freundlich, klein und häufig allein. An manche, interesanten Aufgaben und Kunden kommt man als Einzelkämpfer nicht ran. An öffentliche Aufträge schon gar nicht.

+
+ +
+ +

Langfristige Träume verwirklichen

+

Ein Wohnungsprojekt, einen Altersruhesitz für Haecksen und Hacker einrichten, Geld zurücklegen, Förderung beantragen …

+
+ +
+ +

Helfen und Lernen

+

Profitiere von Know-How und Erfahrungsaustausch in der Genossenschaft. DIESER TEXT IST DOPPELT

+
+ +
+
+ +
+ + {% for blk in this.section.blocks %}
{% if blk.title %}