Technigo · NelchenB · Nov 23, 2021 · Nov 23, 2021 · Nov 23, 2021 · Nov 23, 2021
diff --git a/README.md b/README.md
diff --git a/code/example-recipe-background.png b/code/example-recipe-background.png
diff --git a/code/images/AlvaneuSkateline.jpg b/code/images/AlvaneuSkateline.jpg
diff --git a/code/images/Davos Bolgen.jpg b/code/images/Davos Bolgen.jpg
diff --git a/code/images/DavosBolgen.jpg b/code/images/DavosBolgen.jpg
diff --git a/code/images/DavosEisstadion.jpg b/code/images/DavosEisstadion.jpg
diff --git a/code/images/Engadin.jpg b/code/images/Engadin.jpg
diff --git a/code/images/family.jpg b/code/images/family.jpg
diff --git a/code/index.html b/code/index.html
diff --git a/code/ontour_20211120.css b/code/ontour_20211120.css
@@ -0,0 +1,196 @@
+@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
+
+body{
+	background:rgb(238, 232, 170)
+}
+
+h1 {
+    color: rgb(96, 96, 84);
+    font-family: "Reenie Beanie";
+    font-size: 50px;
+	margin: 40px 40px 40px 80px;
+	}
+
+h2 {
+    color: rgb(96, 96, 84);
+    font-family: "Reenie Beanie";
+    font-size: 50px;
+    margin: 40px 40px 40px 0px;
+	}
+
+h3 {
+	color: rgb(96, 96, 84);
+	font-family: "Reenie Beanie";
+	font-size: 50px;
+	margin: 40px 40px 40px 0px;
+	}
+
+article {
+	min-height: 600px;
+	background-color: rgb(238, 232, 170);
+	color: rgb(96, 96, 84);
+	padding: 5em;
+	}
+
+
+.paragraph {
+    color: rgb(96, 96, 84);
+    font-family: "Reenie Beenie";
+    font-size: 30px;
+	font-weight: 200;
+}
+
+menu{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: "Reenie Beanie";
+	border: 5px; 
+	border-color: rgb(96, 96, 84)(96, 96, 84);
+
+}
+
+menu a {
+    display: flex;
+    padding: 10px 15px;
+    background: hsla(44, 75%, 50%, .1);
+    color: rgb(96, 96, 84);
+    font-size: 40px;
+	font-weight: bold;
+    text-decoration:none;
+	border-radius: 10px;
+	margin: 10px;
+
+}
+
+menu a:hover {
+    background: rgb(238, 221, 130);
+    color: white;
+}
+
+#galerie {
+	box-sizing: border-box;
+	background-size: 58px 58px;
+	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
+	padding: 0 50px;
+
+}
+
+
+#galerie div {
+	background: #FFF;
+	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	height: 240px;
+	overflow: hidden;
+	margin: 40px 0px 0 20px;
+	padding: 5px 5px 40px 5px;
+	width: 240px;
+	transition: all 0.25s ease-in;
+}
+
+#galerie div img {
+	width: 240px;
+	height: 240px;
+}
+
+#galerie div:hover,
+#galerie div:focus {
+	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
+	width: 240px;
+	z-index: 2;
+	transform: scale(2);
+}
+
+#galerie figcaption {
+	color: rgb(96, 96, 84);
+	font: cursive 10px/150%;
+	font-family: "Reenie Beanie", cursive;
+	text-align: left;
+	width: 240px;
+	font-size: 20px;
+
+}
+
+#galerie figure:nth-child(3n-2):hover,
+#galerie figure:nth-child(3n-2):focus {
+	transform: scale(2) rotate(-2.5deg);
+}
+
+#galerie figure:nth-child(5n):hover,
+#galerie figure:nth-child(5n):focus {
+	transform: scale(2) rotate(2.5deg);
+}
+
+#galerie:after {
+	clear: both;
+	content: " ";
+	display: block;
+}
+
+.parallaxhead {
+	background-image: url("images/family_web1.jpg");
+	min-height: 60vh;
+	width: 100%;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+    background-attachment: fixed;
+}
+
+.parallaxwir {
+	background-image: url("images/DavosEisstadion.jpg");
+    min-height: 60vh;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+    background-attachment: fixed;
+}
+
+.parallaxplan {
+	background-image: url("images/LaaxSkipiste.jpg");
+    min-height: 60vh;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+    background-attachment: fixed;
+}
+
+.parallaxhighlight {
+	background-image: url("images/LaaxSkipiste.jpg");
+    min-height: 60vh;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+    background-attachment: fixed;
+}
+
+.parallaxgalerie {
+	background-image: url("images/LaaxSkipiste.jpg");
+    min-height: 60vh;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+    background-attachment: fixed;
+}
+
+@media only screen and (max-width: 667px) {
+	#galerie {
+		width: 100%;
+		margin: 100px auto;
+	}
+}
+
+@media only screen and (max-width: 1024px) {
+	body {
+		width: 100%;
+		margin: 2% 0;
+		padding: 5%;
+	}
+	#galerie {
+		width: 850px;
+		margin: 100px auto;
+	}
+}
+
+
diff --git a/code/ontour_20211120.html b/code/ontour_20211120.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Fünf auf Tour</title>
+  <link rel="stylesheet" type="text/css" href="ontour_20211120.css"/>
+</head>
+
+<body>
+<h1>Wir legen los, unsere Reise beginnt!</h1>
+
+<div class="parallaxhead"></div>
+
+<menu>
+  <a href="#wir">Wir Fünf</a>
+  <a href="#plan">Unser Plan</a>
+  <a href="#highlight">Unsere Highlights</a>
+  <a href="#galerie">Fotos</a>
+  <a href="#besteplaetze">Beste Übernachtungsplätze</a>
+
+</menu>
+
+<main>
+<article>
+<h2 id="wir">Wir fünf auf Tour</h2>
+<p class="paragraph">Ein bisschen verrückt, ein bisschen chaotisch und ein bisschen bünzli.
+   Wir sind Linda, Nando, Milena, Daniela und Fabian.
+   Reisen ist seit jeher unsere Leidenschaft. Fabian war bereits als Kind mit seinen Eltern viel auf reisen und hat sogar ein Jahr in Kanada verbracht. 
+   Daniela hat ihre Liebe zum Reisen bei verschiedenen Trips durch Lateinamerika neu entdeckt. 
+   Zusammen haben wir verschiedene Teile der Welt erkundet. Mit Backpack, Bus, Wohnmobil und Auto.
+   Nun wollen wir unseren Kindern zeigen, dass es sich lohnt, in die Welt heraus zu gehen und Neues zu entdecken. 
+   Ausserdem wollen wir die Zeit als Familie geniessen und uns fern von Alltag und Verpflichtungen einfach treiben lassen.
+</p>
+</article>
+
+<div class="parallaxwir"></div>
+
+<article>
+<h2 id="plan">Unser Plan - keinen zu haben</h2>
+<p class="paragraph">Da wir echte Winterkinder sind, nehmen wir uns zuerst einfach mal Zeit, den Schnee so richtig zu geniessen.
+   Wir verbringen deshalb die ersten fünf Wochen unseres Abenteuers in den Schweizer Alpen mit skifahren, schlitteln, Schneemann bauen und schlittschüelen.
+   Den Rest der Reise haben wir nicht geplant. Wir packen einfach das Wohnmobil und schauen, wo uns die Reise hinführt. Einzig die Erkundung von Schweden ist unser Ziel.
+   Wann, wie lange und wo genau - da lassen wir uns treiben.  Wir sind gespannt, wo uns die Reise hinführt.
+</p>
+</article>
+
+<div class="parallaxplan"></div>
+
+<!--Bild(er) und kurzen Text einfügen-->
+<article>
+<h2 id="highlight">Unsere Highlights</h2>
+<p class="paragraph">Unsere lustigsten, eindrücklichsten oder bewegendsten Erlebnisse auf unserer Reise möchten wir euch nicht vorenthalten. Hier erzählen wir euch, was
+  uns in unserem Reisealltag beschäftigt.
+</p>
+</article>
+
+<div class="parallaxhighlight"></div>
+
+<!--Bildgalerie ergänzen-->
+<article>
+<h2 id="galerie">Fotos der schönsten Orte</h2>
+<p class="paragraph">Wir besuchen so viele tolle Orte und sind beeindruckt von der Natur, den Menschen und den aussergewöhnlichen Dinge, die wir sehen dürfen.
+  Hier findet ihr unsere tollsten Fotos.
+</p>
+
+<h3>Davos</h3>
+<section id="galerie">
+	<div> <img src="images/DavosBolgen.jpg" alt="Schneespass auf dem Bolgen">
+		<figcaption>Skischule auf dem Bolgen</figcaption>
+    </div>
+	<div> <img src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
+		<figcaption>Brücke über die Pegnitz</figcaption>
+    </div>
+	<div> <img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
+		<figcaption>Mauermühle und Judenturm</figcaption>
+    </div>
+	<div> <img src="https://wiki.selfhtml.org/images/e/e7/Lauf-4.jpg" alt="Lauf an der Pegnitz - Rathaus">
+		<figcaption>Rathaus</figcaption>
+    </div>
+</section>
+
+<h3>Italien</h3>
+<section id="galerie">
+	<div> <img src="images/Davos Bolgen.jpg" alt="Lauf an der Pegnitz - Wappensaal">
+		<figcaption>Wappensaal im Wenzelschloss</figcaption>
+    </div>
+	<div> <img src="https://wiki.selfhtml.org/images/c/c2/Lauf-6.jpg" alt="Lauf an der Pegnitz - Schleifmühle">
+		<figcaption>Reichel'sche Schleifmühle</figcaption>
+    </div>
+    <div> <img src="images/DavosBolgen.jpg" alt="Schneespass auf dem Bolgen">
+		<figcaption>Skischule auf dem Bolgen</figcaption>
+    </div>
+</section>
+
+</article>
+
+<div class="parallaxgalerie"></div>
+
+<article>
+<h2 id=besteplaetze>Beste Übernachtungsplätze</h2>
+<p class="paragraph">Wir lieben campen. Was uns aber nicht so gefällt, sind überfüllte Campingplätze, bei denen man sich wie im Hasenstall vorkommt.
+   Wir haben gerne ein bisschen mehr Platz und brauchen kein Glamping.
+   Geht es dir auch so? Hier haben wir eine Liste mit unseren Lieblingscamping- und Stellplätzen zusammengestellt.
+</p>
+</article>
+
+
+<footer>
+    <p> © 2021 by Daniela </p>
+</footer>
+
+
+</body>
+
diff --git a/code/style.css b/code/style.css