Migration

.htaccess

@@ -0,0 +1,6 @@
+AddType application/x-httpd-php55 .php
+
+RewriteEngine On
+RewriteBase /
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.php [L]

assets/css/normalize.css

@@ -0,0 +1,2 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

assets/ico/close.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="51" height="50" viewBox="0 0 51 50">
+  <g fill="none" fill-rule="evenodd" stroke="#000000" transform="translate(1)" stroke-linecap="square">
+    <path d="M0 49.5716579L48.5912658.980392157M.490196078.490196078L49.0814619 49.0814619"/>
+  </g>
+</svg>

assets/img/elipse.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="277" height="194" viewBox="0 0 277 194">
+  <g fill="#FFFFFF" fill-rule="evenodd" transform="rotate(-180 144 112.5)">
+    <ellipse cx="143.947" cy="131.068" opacity=".806" transform="rotate(10 143.947 131.068)" rx="133.449" ry="71.248"/>
+    <ellipse cx="165.197" cy="127.827" opacity=".806" transform="rotate(-6 165.197 127.827)" rx="123.163" ry="82.436"/>
+    <ellipse cx="148.018" cy="127.976" opacity=".609" transform="rotate(20 148.018 127.976)" rx="117.543" ry="93.4"/>
+  </g>
+</svg>

assets/js/base.js

@@ -0,0 +1,9 @@
+/*
+ * Wikimedia Entdecke Wikipedia
+ *
+ * Copyright (c) 2013 Atelier Disko - All rights reserved.
+ *
+ * Use of this source code is governed by the AGPL v3
+ * license that can be found in the LICENSE file.
+ */
+requirejs.config({baseUrl:"/assets/js",waitSeconds:60,paths:{jquery:"jquery",domready:"require/domReady",scrollTo:"scrollTo",waypoints:"waypoints",modernizr:"compat/modernizr"},shim:{scrollTo:{deps:["jquery"],exports:"jQuery.fn.scrollTo"},waypoints:{deps:["jquery"],exports:"jQuery.fn.waypoint"},modernizr:{exports:"Modernizr",deps:["domready!"]}}});

assets/js/require/domReady.js

@@ -0,0 +1 @@
+define(function(){var isTop,testDiv,scrollIntervalId,isBrowser=typeof window!=="undefined"&&window.document,isPageLoaded=!isBrowser,doc=isBrowser?document:null,readyCalls=[];function runCallbacks(callbacks){var i;for(i=0;i<callbacks.length;i+=1){callbacks[i](doc)}}function callReady(){var callbacks=readyCalls;if(isPageLoaded){if(callbacks.length){readyCalls=[];runCallbacks(callbacks)}}}function pageLoaded(){if(!isPageLoaded){isPageLoaded=true;if(scrollIntervalId){clearInterval(scrollIntervalId)}callReady()}}if(isBrowser){if(document.addEventListener){document.addEventListener("DOMContentLoaded",pageLoaded,false);window.addEventListener("load",pageLoaded,false)}else{if(window.attachEvent){window.attachEvent("onload",pageLoaded);testDiv=document.createElement("div");try{isTop=window.frameElement===null}catch(e){}if(testDiv.doScroll&&isTop&&window.external){scrollIntervalId=setInterval(function(){try{testDiv.doScroll();pageLoaded()}catch(e){}},30)}}}if(document.readyState==="complete"){pageLoaded()}}function domReady(callback){if(isPageLoaded){callback(doc)}else{readyCalls.push(callback)}return domReady}domReady.version="2.0.1";domReady.load=function(name,req,onLoad,config){if(config.isBuild){onLoad(null)}else{domReady(onLoad)}};return domReady});

assets/js/scrollTo.js

@@ -0,0 +1,8 @@
+/*
+ * Minimalistic Scroll To functionality
+ *
+ * Copyright (c) 2013 Atelier Disko - All rights reserved.
+ *
+ * Use of this source code is governed by the BSD 3-clause license.
+ */
+define("scrollTo",["jquery"],function($){function toOffsets(x,y,speed,easing){var result=new $.Deferred();$("html, body").animate({scrollTop:y,scrollLeft:x},speed||"normal",easing||"swing",result.resolve);return result}function toElement(element,speed,easing){var offset=$(element).offset();return toOffsets(offset.left,offset.top,speed,easing)}return{element:toElement,offsets:toOffsets}});

assets/js/views/layouts/default.js

@@ -0,0 +1,9 @@
+/*
+ * Wikimedia Entdecke Wikipedia
+ *
+ * Copyright (c) 2013 Atelier Disko - All rights reserved.
+ *
+ * Use of this source code is governed by the AGPL v3
+ * license that can be found in the LICENSE file.
+ */
+require(["jquery","scrollTo","modernizr","waypoints","domready!"],function($,ScrollTo,Modernizr){$(".scrollto").on("click",function(ev){ev.preventDefault();ScrollTo.element($(this).attr("href"))});var $body=$("body");var $imprint=$(".imprint");var $close=$(".imprint-close");var $toggle=$(".imprint-toggle");$toggle.on("click",function(ev){ev.preventDefault();var o=$toggle.offset();var imprintOffset=$imprint.offset();if($imprint.hasClass("invis")){ScrollTo.offsets(o.left,imprintOffset.top+2)}$imprint.toggleClass("invis");$close.toggleClass("invis")});$close.on("click",function(ev){ev.preventDefault();$close.addClass("invis");$imprint.addClass("invis")});$(".block--animate").waypoint(function(direction){if(direction=="up"){$(this.element).removeClass("come-in")}else{$(this.element).addClass("come-in")}},{offset:"75%"})});

index.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Wikimedia Entdecke Wikipedia
+ *
+ * Copyright (c) 2017 Atelier Disko - All rights reserved.
+ *
+ * Use of this source code is governed by the AGPL v3
+ * license that can be found in the LICENSE file.
+ */
+
+define('APP_PATH', __DIR__);
+define('DOMAIN', 'entdecke.wikipedia.de');
+
+$path = $_SERVER['REQUEST_URI'];
+
+// Link Controller
+$url = function($goal) {
+	return '/' . trim($goal, '/');
+};
+
+// View Controller
+$viewFileFromURI = function($path) {
+	$viewBase = APP_PATH . '/views/pages/';
+	$viewName = str_replace('/', '_', trim($path, '/'));
+
+	$viewFile = $viewBase . '/' . $viewName . '.php';
+	$viewFile = realpath($viewFile);
+
+	if ($viewName === '') {
+		return $viewBase . '/home.php';
+	}
+	// Security: prevents directory traversal attack.
+	// see http://stackoverflow.com/a/4205278
+	if ($viewFile === false || strpos($viewFile, $viewBase) !== 0) {
+		return false;
+	}
+	return $viewFile;
+};
+
+// View Renderer
+$viewFile = $viewFileFromURI($path);
+
+if ($viewFile === false || trim($path, '/') === 'home') {
+	header('HTTP/1.1 400 Bad Request');
+	exit();
+}
+
+require APP_PATH . '/views/elements/header.php';
+require $viewFile;
+require APP_PATH . '/views/elements/footer.php';
+
+?>

views/elements/footer.php

@@ -0,0 +1,158 @@
+<footer class="main-footer serif clearfix">
+	<div class="main-footer__upper">
+		<div class="limit--l t--gamma">
+			<p class="main-footer__info-block">
+				Wikimedia Deutschland e. V.<br>
+				Tempelhofer Ufer 23-24<br>
+				10963 Berlin<br>
+				Telefon: <a href="tel:004930219158260">+49 (0)30-219 15 826-0</a><br>
+				<a href="mailto:info@wikimedia.de">info@wikimedia.de</a><br>
+				<a href="https://wikimedia.de" target="new">wikimedia.de</a>
+			</p>
+			<div class="main-footer__info-block">
+				Blog: <a href="https://blog.wikimedia.de" target="new">blog.wikimedia.de</a><br>
+				Twitter: <a href="https://twitter.com/WikimediaDE" target="new">twitter.com/WikimediaDE</a><br>
+				Facebook: <a href="https://facebook.com/WMDEeV" target="new">facebook.com/WMDEeV</a>
+				<p class="limit--block">
+					Diese Seite ist ein Angebot von Wikimedia Deutschland, Verein zur Förderung
+					Freien Wissens, der unter anderem Wikipedia unterstützt.
+				</p>
+			</div>
+		</div>
+		<nav class="main-footer__nav limit--l t--beta">
+			<a class="imprint-toggle main-footer__link" href="#imprint-toggle">Impressum</a>
+		</nav>
+	</div>
+	<article id="imprint" class="imprint invis">
+		<div class="block limit--l cp--h cp--v clearfix">
+			<div class="bubble"><img class="bubble__image" src="/assets/img/bubble_imprint.png"></div>
+			<a class="imprint-close image-replace invis" href="#imprint-close invis"></a>
+
+			<h2 class="question t--alpha">Impressum</h2>
+			<div class="imprint__content limit--block t--beta serif">
+				<h2>Diensteanbieter</h2>
+				<p>
+					Wikimedia Deutschland – Gesellschaft zur Förderung Freien<br>
+					Wissens e. V.<br>
+					Tempelhofer Ufer 23/24<br>
+					10963 Berlin<br>
+					E-Mail: <a href="mailto:info@wikimedia.de">info@wikimedia.de</a><br>
+					Telefon: +49 (0)30-219 15 826-0<br>
+					Fax: +49 (0)30-219 158 26-9
+				</p>
+				<p>
+					Geschäftsführender Vorstand: Abraham Taherivand
+					Eingetragen im Vereinsregister des Amtsgerichts Charlottenburg,
+					VR 23855. Inhaltlich Verantwortlicher gemäß § 55 Abs. 2 RStV:
+					Abraham Taherivand (Anschrift wie oben).
+				</p>
+				<h2>Datenschutzerklärung entdecke.wikipedia.de</h2>
+				<p>
+					Diese Datenschutzerklärung beschreibt, Art, Umfang und Zweck der Verarbeitung
+					personenbezogener Daten und den Einsatz von Cookies auf dieser Website.
+				</p>
+				<h2>Erhebung und Verwendung personenbezogener Daten</h2>
+				<p>
+					Log-Files: Bei der Nutzung unserer Website werden automatisch die von Ihrem
+					Browser an den Server übermittelten Daten erfasst und gespeichert. Dies umfasst
+					üblicherweise Informationen über den Typ und die Version des von Ihnen
+					verwendeten Browsers, das verwendete Betriebssystem, die Referrer URL (die
+					Website, von der aus Sie zu dieser Website gelangt sind), den Hostnamen des
+					zugreifenden Rechners (die IP Adresse) sowie die Uhrzeit der Serveranfrage.
+					Diese Daten lassen sich ohne weitere Informationen nicht bestimmten Personen –
+					und damit auch nicht Ihnen – zuordnen. Weder wird zu diesem Zweck ein Abgleich
+					der Daten mit anderen Daten vorgenommen noch werden sie hierfür mit anderen
+					Daten zusammengeführt. Die Daten werden ausschließlich für statistische Zwecke
+					verwendet und nach der statistischen Auswertung gelöscht.
+				</p>
+				<p>
+					Piwik: Diese Website verwendet Piwik, eine Open-Source-Software zur
+					statistischen Auswertung und Analyse der Besucherzugriffe. Dabei speichert
+					Piwik kleine Textdateien auf Ihrem Computer (sog. „Cookies“), die
+					Nutzungsinformationen (einschließlich Ihrer gekürzten IP-Adresse) auf unsere
+					Server in Deutschland übertragen und speichern. Dabei wird Ihre IP-Adresse
+					sofort nach der Verarbeitung und vor deren Speicherung anonymisiert. Die von
+					Piwik erfassten Daten werden nicht auf andere Server übertragen oder an Dritte
+					weitergegeben, sondern in anonymisierter Form dazu verwendet, unser Angebot zu
+					verbessern.
+				</p>
+				<p>
+					Sie können die Installation der Cookies durch eine entsprechende Einstellung
+					Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie
+					in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website
+					vollumfänglich nutzen können. Zudem haben Sie die Möglichkeit, der
+					Datenverarbeitung durch Piwik für die Zukunft zu widersprechen. Entfernen Sie
+					hierfür das Häkchen in dem unten abgebildeten Kasten. In der Folge wird ein
+					Piwik-Deaktivierungs-Cookie in Ihrem Browser abgelegt. Bitte beachten Sie, dass
+					der Piwik-Deaktivierungs-Cookie dieser Website gelöscht wird, wenn Sie die in
+					Ihrem Browser abgelegten Cookies entfernen.
+				</p>
+				<p>
+					Vimeo: Auf unserer Website sind Plugins des Videoportals Vimeo der Vimeo, LLC,
+					555 West 18th Street, New York, New York 10011, USA eingebunden.
+				</p>
+				<p>
+					Wenn Sie die mit einem solchen Plugin versehenen Seiten unserer Website
+					aufrufen, wird zur Darstellung des Plugins eine direkte Verbindung zu den
+					Vimeo-Servern in den USA hergestellt. Hierdurch wird an den Vimeo-Server
+					übermittelt, welche unserer Internetseiten Sie besucht haben. Außerdem werden
+					möglicherweise Log-Files von unserer Website an Vimeo übermittelt und Cookies
+					durch Vimeo auf Ihrem Computer gespeichert. Sind Sie dabei als Mitglied bei
+					Vimeo eingeloggt, ordnet Vimeo diese Informationen Ihrem persönlichen
+					Benutzerkonto zu. Bei Nutzung des Plugins wie z.B. Anklicken des Start-Buttons
+					eines Videos werden diese Informationen ebenfalls Ihrem Benutzerkonto
+					zugeordnet. Sie können diese Zuordnung verhindern, indem Sie sich vor der
+					Nutzung unserer Website aus ihrem Vimeo-Benutzerkonto abmelden und die
+					entsprechenden Cookies von Vimeo löschen.
+				</p>
+				<p>
+					Außerdem ruft Vimeo über einen iFrame, in dem das Video
+					aufgerufen wird, den Tracker Google Analytics auf. Dabei handelt es sich um ein
+					eigenes Tracking von Vimeo, auf das wir keinen Zugriff haben. Sie können das
+					Tracking durch Google Analytics unterbinden, indem Sie die Deaktivierungs-Tools
+					einsetzen, die Google für einige Internet-Browser anbietet. Die Nutzer können
+					darüber hinaus die Erfassung der durch Google Analytics erzeugten und auf ihre
+					Nutzung der Website bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie
+					die Verarbeitung dieser Daten durch Google verhindern, indem sie das unter dem
+					folgenden Link verfügbare Browser-Plugin herunterladen und installieren:
+				</p>
+				<a href="http://tools.google.com/dlpage/gaoptout?hl=de" target="new">http://tools.google.com/dlpage/gaoptout?hl=de</a>
+				<p>
+					Weitere Informationen zur Datenverarbeitung und Hinweise zur Cookie-Nutzung
+					durch Vimeo finden Sie unter
+					<a href="https://vimeo.com/privacy" target="new">https://vimeo.com/privacy</a> und
+					<a href="https://vimeo.com/cookie_policy" target="new">https://vimeo.com/cookie_policy</a>.
+				</p>
+				<h2>Weitergabe personenbezogener Daten an Dritte</h2>
+				<p>
+					Wir geben Ihre personenbezogenen Informationen grundsätzlich nicht an Dritte
+					weiter. Eine Übermittlung erfolgt nur dann, wenn wir zur Weitergabe gesetzlich
+					berechtigt oder verpflichtet sind oder wenn Sie uns eine entsprechende
+					Einwilligung erteilt haben.
+				</p>
+				<h2>Auskunft, Löschung, Sperrung</h2>
+				<p>
+					Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre
+					gespeicherten personenbezogenen Daten sowie ein Recht auf Berichtigung,
+					Sperrung oder Löschung dieser Daten. Zur Ausübung Ihrer Rechte und bei Fragen
+					zu unseren Datenschutzbestimmungen können Sie gerne über die E-Mail-Adresse
+					<a href="mailto:info@wikimedia.de">info@wikimedia.de</a> Kontakt zu uns aufnehmen.
+				</p>
+				<h2>Lizenzhinweise</h2>
+				<p>
+					Design und Umsetzung: Atelier Disko UG (haftungsbeschränkt) &
+					Co. KG, <a href="https://atelierdisko.de/" target="new">atelierdisko.de</a><br>
+					Redaktion: Elisabeth Mandl (Wikimedia Deutschland)
+				</p>
+				<p>
+				Soweit nicht anders angegeben, stehen die Texte, Bilder, das
+				Layout und der Code dieser Webseite unter der
+				<a href="https://creativecommons.org/licenses/by/4.0/" target="new">Creative Commons
+				Attribution-Lizenz (CC BY-SA) in der Version 4.0</a>.
+				</p>
+			</div>
+		</div>
+	</article>
+</footer>
+</body>
+</html>

views/elements/header.php

@@ -0,0 +1,34 @@
+<?php
+if ($path === '/') {
+	$title = 'Entdecke Wikipedia';
+} else {
+	$title = implode(' – ', array_reverse($title));
+}
+
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="UTF-8">
+	<title><?php echo $title ?></title>
+
+	<?php if ($path === '/'): ?>
+		<meta name="description" content="Auf dieser Seite erfährst du, wie du dein Wissen in Wikipedia festhalten kannst. Sich mit Neuem auseinandersetzen ist viel mehr als eine schöne Erinnerung – es erweitert den eigenen Horizont.">
+	<?php endif ?>
+
+	<link rel="icon" href="/assets/ico/app.png?v=1+ba4fbbd">
+	<link rel="stylesheet" href="/assets/css/normalize.css?v=1+ba4fbbd">
+	<link rel="stylesheet" href="/assets/css/base.css?v=1+ba4fbbd">
+
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+
+	<script src="/assets/js/require.js?v=1+ba4fbbd"></script>
+	<script src="/assets/js/base.js?v=1+ba4fbbd"></script>
+	<script src="/assets/js/views/layouts/default.js?v=1+ba4fbbd"></script>
+</head>
+<body>
+
+<!-- Piwik Image Tracker-->
+<img src="https://stats.wikimedia.de/piwik.php?idsite=6&amp;rec=1&amp;action_name=Entdecke+WPDE" style="border:0;position:absolute;" alt="" />
+<!-- End Piwik -->

views/pages/home.php

@@ -0,0 +1,162 @@
+<main class="home">
+	<section class="teaser block--green">
+		<div class="teaser__head limit--l clearfix">
+			<img src="/assets/img/wikipedia_logo.png" class="wikipedia-logo" />
+			<div class="teaser__headline"></div>
+		</div>
+		<div class="limit--l cp--h cp--v clearfix">
+			<div class="teaser__video-wrapper">
+				<div class="teaser__video video__embed-container">
+					<iframe src="https://player.vimeo.com/video/197889226?byline=0&title=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+				</div>
+			</div>
+			<div class="teaser__text limit--block t--beta">
+				Sich mit Neuem auseinandersetzen ist viel mehr als eine
+				schöne Erinnerung – es erweitert den eigenen Horizont.
+				Aber ist dieses Wissen nicht viel zu schade, um nur im
+				eigenen Reisetagebuch zu bleiben? Auf dieser Seite
+				erfährst du, wie du dein Wissen in Wikipedia festhalten
+				kannst.
+			</div>
+			<a class="action-button" href="https://de.wikipedia.org/w/index.php?title=Spezial:Benutzerkonto_anlegen&campaign=wmde2017summer2&wmdesource=bannerclick" target="new">
+				<svg class="action-button__graphic" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 277 194">
+					<g fill="#FFFFFF" fill-rule="evenodd" transform="rotate(-180 144 112.5)">
+						<ellipse class="ellipse-1" cx="143.947" cy="131.068" opacity=".806" rx="133.449" ry="71.248"/>
+						<ellipse class="ellipse-2" cx="165.197" cy="127.827" opacity=".806" rx="123.163" ry="82.436"/>
+						<ellipse class="ellipse-3" cx="148.018" cy="127.976" opacity=".609" rx="117.543" ry="93.4"/>
+					</g>
+				</svg>
+				<span class="action-button__text">Jetzt beginnen und <strong>Benutzerkonto anlegen</strong></span>
+			</a>
+		</div>
+	</section>
+	<section class="block block--1 block--animate">
+		<div class="limit--l cp--h cp--v clearfix">
+			<div class="bubble"><img class="bubble__image" src="/assets/img/bubble_1.png"></div>
+			<h2 class="question t--alpha">
+				Warum solltest du deine Entdeckungen in Wikipedia festhalten?
+			</h2>
+			<div class="block__text serif limit--block t--beta">
+				Im Sommer entdecken viele Menschen etwas Interessantes. Vielleicht hast
+				du an einer japanischen Teezeremonie teil genommen, eine unterirdische
+				Höhle in Island besucht oder ein Umgebindehaus in Sachsen fotografiert.
+				Wikipedia ist der Ort, wo du dieses Neu-Entdeckte sammeln und an andere
+				weitergeben kannst. Erstelle einen Artikel zu einem Thema, das dich
+				wirklich interessiert. Wenn es den Artikel schon gibt, kannst du neue,
+				aktuelle Aspekte hinzufügen, die bisher einfach noch nicht beschrieben
+				wurden. Natürlich brauchst du für deine Entdeckungen gute Quellen, damit
+				die Enzyklopädie auch neutral und sachlich bleibt. Oder du kannst einen
+				Querverweis zu einem anderen Thema erstellen, auf den vielleicht noch
+				niemand gekommen ist. Mithilfe von Wikipedia kannst du deine Entdeckungen
+				also strukturieren, einordnen und vertiefen. Und, fast nebenbei, teilst du
+				dein neu gewonnenes Wissen mit der ganzen Welt.
+			</div>
+	</section>
+	<section class="banner">
+	</section>
+	<section class="block block--2 block--green">
+		<div class="limit--l cp--h cp--v clearfix">
+			<div class="block-2__upper clearfix">
+				<h2 class="question t--alpha">
+					Wie kannst du dein Wissen in Wikipedia festhalten?
+				</h2>
+				<div class="block__text serif limit--block t--beta">
+					Dein neues Wissen wie die Entstehungsgeschichte der isländischen
+					Höhle oder die Bilder des Umgebindehauses kannst du auf
+					verschiedenste Weise in Wikipedia festhalten. Schau dir einfach die
+					Möglichkeiten an und probiere es selbst aus.
+				</div>
+			</div>
+			<hr>
+			<nav class="tutorial-nav t--beta">
+				<a class="tutorial-link tutorial-link--create scrollto" href="#howto-create">
+					<img class="tutorial-link__image" src="/assets/img/link_create.png">
+					<span class="tutorial-link__text">Artikel anlegen</span>
+				</a>
+				<a class="tutorial-link tutorial-link--update scrollto" href="#howto-update">
+					<img class="tutorial-link__image" src="/assets/img/link_update.png">
+					<span class="tutorial-link__text">Artikel ergänzen<br>oder aktualisieren</span>
+				</a>
+				<a class="tutorial-link tutorial-link--insert scrollto" href="#howto-insert">
+					<img class="tutorial-link__image" src="/assets/img/link_insert.png">
+					<span class="tutorial-link__text">Bilder einbinden</span>
+				</a>
+			</nav>
+		</div>
+	</section>
+	<section id="howto-create" class="block block--3 block--animate limit--l cp--h cp--v clearfix">
+		<div class="bubble"><img class="bubble__image" src="/assets/img/bubble_2.png"></div>
+		<h2 class="question t--alpha">
+			Was musst du<br>
+			dafür machen?
+		</h2>
+		<div class="tutorial limit--block t--beta">
+			<div class="tutorial__video video__embed-container">
+				<iframe src="https://player.vimeo.com/video/198340267?byline=0&title=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+			</div>
+			<h3 class="tutorial__headline">Artikel anlegen</h3>
+			<div class="serif">
+				Vor dem <a href="https://de.wikipedia.org/wiki/Hilfe:Neuen_Artikel_anlegen?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">Anlegen eines Artikels</a> sind einige Vorarbeiten nötig. Zunächst solltest
+				du herausfinden, was zum geplanten Thema an Artikeln in der Wikipedia schon
+				existiert, damit du nicht Artikel anlegst, die es schon gibt. In dem Video
+				erklärt Benutzerin Das Monstaaa dir genau, wie das funktioniert. Dabei kann dir
+				die Suchfunktion eine gute Hilfe sein. Oft existieren auch in anderen
+				Sprachversionen der Wikipedia, vor allem in der englischen Wikipedia, schon
+				Artikel, aus denen du Informationen nach eigener Prüfung übersetzen und
+				übernehmen  kannst.
+			</div>
+		</div>
+		<div id="howto-update" class="tutorial limit--block t--beta">
+			<div class="tutorial__video video__embed-container">
+				<iframe src="https://player.vimeo.com/video/197909241?byline=0&title=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+			</div>
+			<h3 class="tutorial__headline">Artikel ergänzen oder aktualisieren</h3>
+			<div class="serif">
+				Anstatt einen neuen Artikel anzulegen, kannst du auch
+				<a href="https://de.wikipedia.org/wiki/Wikipedia:Beteiligen?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">bisherige Artikel
+				verbessern</a> oder aktualisieren. Dafür gibt es viele Möglichkeiten. Einer
+				davon ist die Beseitigung von vorhandenen Mängeln, denn die Wikipedia ist in
+				keiner Weise perfekt. Findest du also einen Fehler in einem Artikel, sei mutig
+				und behebe ihn. Benutzerin WS_ReNu zeigt dir in dem Video, wie es geht.
+			</div>
+		</div>
+		<div id="howto-insert" class="tutorial limit--block t--beta">
+			<div class="tutorial__video video__embed-container">
+				<iframe src="https://player.vimeo.com/video/198338036?byline=0&title=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+			</div>
+			<h3 class="tutorial__headline">Bilder einbinden</h3>
+			<div class="serif">
+				Ein Bild sagt manchmal mehr als tausend Worte. Daher ist es oft
+				sinnvoll, <a href="https://de.wikipedia.org/wiki/Hilfe:Bilder?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">Bilder in die Artikel einzubinden</a>.
+				In dem Video erklärt dir Benutzer Raymond, wie du
+				Fotos in die Wikipedia schnell und einfach einfügst. Dazu kannst du eigene
+				Fotos hochladen oder dich in dem riesigen Medienarchiv Wikimedia Commons
+				umschauen. Ob und welche Bilder sinnvoll sind, kannst du
+				<a href="https://de.wikipedia.org/wiki/Wikipedia:Artikel_illustrieren?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">hier</a> genauer
+				nachlesen. Du findest in der Wikipedia auch
+				<a href="https://de.wikipedia.org/wiki/Wikipedia:Fototipps?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">Beschreibungen</a>, wie du gute Bilder
+				aufnehmen kannst.
+			</div>
+		</div>
+	</section>
+	<section class="block block--4 block--green cp--v">
+		<div class="limit--l cp--h">
+			<div class="teaser__text limit--block t--beta">
+				Du brauchst noch weitere Einstiegshilfen oder Informationen? Im
+				<a href="https://de.wikipedia.org/wiki/Wikipedia:Mentorenprogramm?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">Mentorenprogramm</a> findest du erfahrene Wissensteiler, die dir in jedem Schritt
+				zur Seite stehen. Außerdem gibt es jede Menge <a href="https://de.wikipedia.org/wiki/Hilfe:%C3%9Cbersicht?campaign=wmde2017summer2&wmdesource=bannerclick" target="new">Hilfeseiten</a> zu den einzelnen
+				Themen.
+			</div>
+			<a class="action-button" href="https://de.wikipedia.org/w/index.php?title=Spezial:Benutzerkonto_anlegen&campaign=wmde2017summer2&wmdesource=bannerclick" target="new">
+				<svg class="action-button__graphic" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 277 194">
+					<g fill="#FFFFFF" fill-rule="evenodd" transform="rotate(-180 144 112.5)">
+						<ellipse class="ellipse-1" cx="143.947" cy="131.068" opacity=".806" rx="133.449" ry="71.248"/>
+						<ellipse class="ellipse-2" cx="165.197" cy="127.827" opacity=".806" rx="123.163" ry="82.436"/>
+						<ellipse class="ellipse-3" cx="148.018" cy="127.976" opacity=".609" rx="117.543" ry="93.4"/>
+					</g>
+				</svg>
+				<span class="action-button__text">Jetzt beginnen und <strong>Benutzerkonto anlegen</strong></span>
+			</a>
+		</div>
+	</section>
+</main>