-
Notifications
You must be signed in to change notification settings - Fork 0
/
konzept.html
160 lines (160 loc) · 15.7 KB
/
konzept.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en" wp-template wp-template-master="index.html" wp-template-post-template wp-template-post-template-name="Konzept">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Material Buffet</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" type="text/css">
<script>/* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='@media ' + pgia_small_mq + '{ html:not(.pg-ia-no-preview) [data-pg-ia-hide="mobile"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="mobile"] {opacity:1;visibility:visible;display:block;}}';pgcss+='@media ' + pgia_large_mq + '{html:not(.pg-ia-no-preview) [data-pg-ia-hide="desktop"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="desktop"] {opacity:1;visibility:visible;display:block;}}';style.innerHTML=pgcss;document.querySelector('head').appendChild(style);}}catch(e){console&&console.log(e);}})()</script>
<script type="text/javascript" src="script.js"></script>
<meta name="description" content="dein gemeinnütziger Second-Hand-Baumarkt in Leipzig">
<link rel="stylesheet" href="tailwind_theme/tailwind.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="bg-secondary_buffet-600 font-sans overflow-x-hidden relative text-neutral_buffet-600" data-pg-ia='{"l":[{"trg":"load","a":"fadeIn"}]}' data-pg-ia-hide>
<div id="toggler" class="menu__toggler lg:hidden" onclick="toggle()">
<span></span>
</div>
<header class="bg-bg-100 bg-opacity-90 fixed mx-auto top-0 w-full z-30">
<nav class="relative md:container md:flex md:flex-wrap md:mx-auto lg:w-10/12 xl:w-8/12 2xl:w-7/12">
<a href="/"><img id="topBtn" src="assets/logo/MB_Icon_Black-01.png" class="logo cursor-pointer hidden md:block md:relative z-20" data-pg-ia='{"l":[{"trg":"mouseenter","a":"swing"}]}'></a>
<div id="menu" class="absolute flex menu ml-auto mt-10 pl-5 space-y-2 z-50 md:h-20 md:items-center md:relative md:space-y-0 md:text-right md:w-auto" style="background-repeat: no-repeat; background-position: left top; background-size: contain; background-image: url('assets/textures/Element1.png');" data-name="nav-menu">
<div cms-menu="primary">
<a onclick="toggle()" href="/" class="font-light hover:text-pastel_buffet-500 px-0 py-2 transition-colors uppercase md:px-4">Das Rezept</a>
<a onclick="toggle()" href="/#lageplan" class="font-light hover:text-pastel_buffet-500 px-0 py-2 transition-colors uppercase md:px-4">Lageplan</a>
<a onclick="toggle()" href="/konzept" class="font-light hover:text-pastel_buffet-500 px-0 py-2 transition-colors uppercase md:px-4">Unterstützen</a>
</div>
</div>
</nav>
</header>
<main id="main" class="nav-margin mx-auto overflow-hidden relative lg:w-10/12 xl:w-8/12 2xl:w-7/12 text-center">
<div style="background-image: url('assets/bilder/farbe.jpeg'); background-position: center center; background-size: cover;">
<div class="container flex flex-col-reverse h-full mx-auto p-4 relative md:h-80">
<h1 class="break text-6xl text-left text-white lg:text-8xl md:absolute md:bottom-0 md:inset-x-0 md:mb-10 md:text-center" cms-post-title>das konzept</h1>
<a href="/"><img src="assets/logo/MB_Icon_White-01.png" class="block bottom-20 h-52 left-0 z-20 md:hidden" data-pg-ia="{"l":[{"trg":"now","a":"rollIn"},{"trg":"mouseenter","a":"swing"}]}"></a>
</div>
</div>
</main>
<section class="my-10 py-10 relative">
<img src="assets/textures/Element2.png" class="absolute bottom-20 right-0 w-8/12 md:w-5/12 xl:w-4/12" data-pg-ia-scene="{"s":"auto","l":[{"p":"scroll","a":"rotateInDownRight"}]}">
<div class="container mx-auto relative lg:w-10/12 xl:w-8/12 2xl:w-7/12">
<img src="assets/textures/Element6.png" class="-left-5 -top-10 absolute w-1/3 z-0" data-pg-ia-scene="{"s":"onEnter","l":[{"name":"gentleFadeInLeft","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0,"x":"-25%"},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":1,"l":{"autoAlpha":1,"x":"0%"},"e":"Power1.easeOut"}]}]}}]}">
<div class="content px-4 z-20" wp-acf-get-field="rezeptText1">
<div class="mb-10 mx-auto w-full">
<h1 class="mb-4 text-3xl md:text-5xl">Rohstoffe verschwenden? Bäh</h1>
<p class="mb-4 text-xl md:text-2xl">Ob Theater oder Ausstellungshäuser, nach Events, Film- und Fernsehproduktionen, in Betrieben und bei Großveranstaltungen - überall landen wiederverwendbare Materialien im Müll: Holz, Farben, Textilien, Metall, Deko, Ausstattung, Büroartikel, Fehlproduktionen. Viel zu schade und scheiße für die Umwelt? That's what we thought.</p>
</div>
<div class="mb-10 mx-auto w-full">
<h1 class="mb-4 text-3xl md:text-5xl">Lokale Materialkreisläufe fördern</h1>
<p class="mb-4 text-xl md:text-2xl">Unser Ziel ist es, Reststoffe vor der Entsorgung zu retten und zurück in den Kreislauf zu führen - indem wir sie Menschen wieder zugänglich machen. Dafür werden die Materialien bei uns gesammelt, aufbereitet, sortiert und schließlich weitergegeben. Ob Holz für's Hochbett, Stoffe für den Kids-Workshop, Deko für den nächsten Rave oder Teppiche für das Kunstfestival. Ob auf Dauer oder nur als Leihgabe. Wir haben was für jeden Geschmack.</p>
</div>
<div class="mb-10 mx-auto w-full">
<h1 class="mb-4 text-3xl md:text-5xl">Rezepte für das gute Leben: das Bildungsbuffet</h1>
<p class="mb-4 text-xl md:text-2xl">Mit dem Bildungsbuffet planen wir ein breites Weiterbildungsangebot rund um Themen wie Zero Waste, Circular Society, Upcycling & DIY. Wir glauben daran, dass nur durch Sensibilisierung, Bildung und Selbsterfahrung nachhaltiges Handeln in den Alltag implementiert werden kann. Und. Das. Müssen. Wir. Alle.</p>
</div>
<div class="mb-5 mx-auto w-full">
<h1 class="mb-4 text-3xl text-center md:text-5xl">Schmeckt Dir?</h1>
</div>
</div>
<div class="mb-28 mx-auto text-center">
<a href="/moneten-spenden/" class="bg-pastel_buffet-300 duration-500 ease-in-out font-medium hover:-translate-y-1 hover:scale-110 hover:shadow-xl inline-block px-20 py-2 rounded-full text-center text-white text-xl transform transition uppercase" wp-acf-get-field="rezeptBtn1_text" wp-acf-get-field-2="rezeptBtn1_link" wp-acf-get-field-2-set="href">Unterstütze Uns</a>
</div>
<div class="container mb-4 px-4">
<div class="content" wp-acf-get-field="rezeptText2">
<h1 class="mb-4 text-3xl md:text-5xl pb-5">Wie viel CO2 können wir durch Wiederverwendung sparen...</h1>
<p class="mb-5 text-xl md:text-2xl">Zum Vergleich: Pro Jahr bindet eine Buche ca. 12,5 Kilogramm CO2. Du müsstest also 80 Bäume pflanzen, um 1 Tonne CO2 durch Bäume wieder zu kompensieren.</p>
<p class="mb-5 text-xl md:text-2xl">...wenn Materialien nicht entsorgt und für Andere nicht neu produziert werden müssen? Das haben wir uns auch gefragt und dir mal folgende Beispiele berechnet. Wissenschaft können wir nämlich auch.</p>
<p class="mb-5 text-xl md:text-2xl">Eine Tonne der folgenden Materialien enstsprechen:</p>
</div>
<div class="mb-10 mx-auto">
<div class="materialSwiper swiper w-full my-4 h-20">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/co2/1_kvh.png" class="h-16 mx-auto"/>
</div>
<div class="swiper-slide">
<img src="assets/co2/2_molton.png" class="h-16 mx-auto"/>
</div>
<div class="swiper-slide">
<img src="assets/co2/3_stahl.png" class="h-16 mx-auto"/>
</div>
<div class="swiper-slide">
<img src="assets/co2/4_wandfarbe.png" class="h-16 mx-auto"/>
</div>
<div class="swiper-slide">
<img src="assets/co2/5_styropor.png" class="h-16 mx-auto"/>
</div>
<div class="swiper-slide">
<img src="assets/co2/6_messeteppich.png" class="h-16 mx-auto"/>
</div>
</div>
</div>
<p class="mb-5 text-xl md:text-2xl" wp-acf-get-field="material_caption">*kgCO2e = Kilogramm CO2-Äquivalent: Masseinheit zur Vereinheitlichung der Klimawirkung der unterschiedlichen Treibhausgase.</p>
</div>
</div>
<div class="mb-28 mx-auto text-center text-xl w-full">
<a href="/material-spenden/" class="bg-pastel_buffet-300 duration-500 ease-in-out font-medium hover:-translate-y-1 hover:scale-110 hover:shadow-xl inline-block px-20 py-2 rounded-full text-center text-white text-xl transform transition uppercase" wp-acf-get-field="rezeptBtn2_text" wp-acf-get-field-2="rezeptBtn2_link" wp-acf-get-field-2-set="href">Jetzt Material spenden und CO2 sparen</a>
</div>
</div>
</section>
<footer class="bg-pastel_buffet-500 overflow-hidden pt-12">
<div class="container mx-auto px-4 relative">
<div class="flex flex-wrap -mx-4">
<div class="p-4 w-full sm:w-1/2 lg:w-4/12">
<h2 class="font-bold mb-8 text-lg uppercase">Spendenkonto</h2>
<p><b>IBAN: </b>DE13 4306 0967 1141 9261 00</p>
<p><b>BIC:</b> GENODEM1GLS </p>
<p><b>Bank:</b> GLS Gemeinschaftsbank eG </p>
<p><b>Kontoinhaber:</b> Materialbuffet e.V.</p>
</div>
<div class="p-4 w-full sm:w-1/2 lg:w-4/12">
<h2 class="font-bold mb-8 text-lg uppercase">Folge uns auf Insta<br></h2>
<p class="mb-4">Für unser aktuelles Angebot. Dir wird das Wasser im Mund zusammenlaufen.</p>
<div class="flex-wrap inline-flex mx-auto space-x-3">
<a title="Instagram" href="https://www.instagram.com/materialbuffet_ev/?fbclid=IwAR3qxLQ41AZWTqjhaijiiX3cZEQ2eZEtahbVsooAfsbeJ_uxGuU4Edvyyng" target="_blank"><i class="fa-2x fa-instagram fab hover:text-bold_buffet-300"></i></a>
<a title="Email" href="mailto:[email protected]"><i class="fa fa-2x fa-envelope hover:text-bold_buffet-300"></i></a>
</div>
</div>
<div class="p-4 w-full sm:w-1/2 lg:w-4/12">
<h2 class="font-bold mb-8 text-lg uppercase">Auf der Suche nach Leckerbissen?</h2>
<p class="mb-4">Newsletter gibt's noch nicht, aber bald. Meld dich am besten schonmal an, damit du keine Schmankerl verpasst!</p>
<form method="post" action="https://materialbuffet.de/?na=s">
<input type="hidden" name="nlang" value="">
<div class="tnp-field tnp-field-email bg-white border-2 border-gray-400 border-pastel_buffet-500 flex items-center mb-6 overflow-hidden p-1">
<input class="appearance-none border-none flex-1 focus:border-t-0 font-light outline-none p-2 w-full" placeholder="Deine E-Mail" type="email" name="ne" id="tnp-1" value="" required>
<button type="submit" class="tnp-submit bg-pastel_buffet-500 font-medium inline-block px-6 py-2 text-center text-white uppercase" aria-label="submit" ype="submit" value="Submit">
<svg viewBox="0 0 24 24" fill="currentColor" class="h-4 inline-block w-4">
<path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
</svg>
</button>
</div>
</form>
<div class="tnp tnp-subscription">
</div>
</div>
</div>
<img src="assets/textures/Element10.png" class="w-8/12" data-pg-ia-scene='{"s":"onEnter","d":"100%","l":[{"a":"fadeInRight"}],"o":"-200px"}'/>
<img src="assets/textures/Element10.png" class="ml-40 w-8/12" data-pg-ia-scene='{"s":"onEnter","o":"-200px","l":[{"a":"fadeInRight"}],"d":"75%"}'/>
<img src="assets/textures/Element10.png" class="ml-80 w-8/12" data-pg-ia-scene='{"s":"onEnter","o":"-200px","l":[{"a":"fadeInRight"}],"d":"50%"}'/>
<div class="py-4 text-sm">
<hr class="border-gray-400 mb-4">
<div class="flex flex-wrap -mx-4 items-center">
<div class="px-4 py-2 w-full md:flex-1">
<p>© Material Buffet e.V.</p>
</div>
<div class="px-4 py-2 w-full sm:w-auto">
<a href="/datenschutz" class="hover:text-mpink-500">Datenschutz</a> |
<a href="/impressum" class="hover:text-mpink-500">Impressum</a>
</div>
</div>
</div>
</div>
</footer>
<script src="pgia/lib/pgia.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>