From 6ccbc89fc9c3879b6fe0b9831c340ba2c38191e7 Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Fri, 10 Apr 2020 20:11:47 +0200
Subject: [PATCH] [TASK] erster Entwurf mit Slider

---
 index.html | 65 +++++++++++++++++++++++++++++++++++++++++++++++-------
 script.js  |  8 +++++++
 2 files changed, 65 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 3041d8d..1b57925 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 
 <body>
     <div class="navbar-fixed">
-        <nav class="green lighten-2">
+        <nav class="light-green lighten-1">
             <div class="nav-wrapper container">
                 <a href="/" id="logo-container" class="brand-logo">
                     <img src="favicon.png" alt="Visitenkarten-Logo" height="64">
@@ -82,23 +82,68 @@
                 <h2>Ferienwohnung</h2>
             </div>
         </div>
+
+        <div class="row">
+            <div class="slider">
+                <ul class="slides">
+                    <li>
+                        <img src="bilder/1500px/6.jpg" alt="Blick auf den Hauseingang">
+                        <div class="caption right-align">
+                            <h5 class="light grey-text text-lighten-3">Das Haus</h5>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="bilder/1500px/4.jpg" alt="Wein mit Gläsern und Blumenstrauß">
+                        <div class="caption right-align ">
+                            <h5 class="light grey-text text-lighten-3">Herzlich <br> Willkommen</h5>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="bilder/1500px/5.jpg" alt="Schlafzimmer mit Kleiderschrank und Kingsize-Bett">
+                        <div class="caption left-align">
+                            <h5 class="light grey-text text-lighten-3">Schlafzimmer <br> mit Kingsize-Bett</h5>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="bilder/1500px/8.jpg" alt="Badezimmer mit Wanne und Duschkabine">
+                        <div class="caption left-align">
+                            <h5 class="light grey-text text-lighten-3">Badezimmer mit Wanne</h5>
+                        </div>
+                    </li>
+                    <li><img src="bilder/1500px/15.jpg" alt="Wohnbereich mit Holzkamin und Fernseher">
+                        <div class="caption left-align ">
+                            <h5 class="light grey-text text-lighten-3">Wohnbereich <br> mit Holzkamin</h5>
+                        </div>
+                    </li>
+                    <li><img src="bilder/1500px/13.jpg" alt="Küchenzeile mit Elektrogeräten">
+                        <div class="caption right-align">
+                            <h5 class="light grey-text text-lighten-3">voll ausgestattete <br> Küche</h5>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
         <div class="row">
             <div class="col s12 m8">
                 <p>
                     Unsere gemütliche Ferienwohnung "Wanderlust“ liegt im Zentrum des heilklimatischen Luftkurortes
                     Finsterbergen.
-                    In nur wenigen Gehminuten erreichen Sie den Thüringer Wald und Rennsteig-Höhenwanderweg mit seiner
+                    In nur wenigen Gehminuten erreichen Sie den Thüringer Wald und Rennsteig-Höhenwanderweg mit
+                    seiner
                     wundervollen Natur.
                 </p>
                 <p>
-                    Die lichtdurchflutete Ferienwohnung hat ca. 55m², ein separates Schlafzimmer mit King-Size-Bett mit
+                    Die lichtdurchflutete Ferienwohnung hat ca. 55m², ein separates Schlafzimmer mit King-Size-Bett
+                    mit
                     Platz
                     für
                     2 Erwachsene.
-                    Nach ihrem Ausflug lädt Sie unsere gemütliche Ferienwohnung zum Verweilen vor dem Kamin oder auf der
+                    Nach ihrem Ausflug lädt Sie unsere gemütliche Ferienwohnung zum Verweilen vor dem Kamin oder auf
+                    der
                     anliegenden Terrasse ein. Unsere Ferienwohnung bietet Ihnen den Komfort einer vollausgestattete
                     Küchenzeile
-                    und eines großzügigen Badezimmers mit Badewanne. Das Kingsize-Bett bietet Platz für zwei Personen.
+                    und eines großzügigen Badezimmers mit Badewanne. Das Kingsize-Bett bietet Platz für zwei
+                    Personen.
                     Um Thüringen auch kulinarisch zu entdecken, steht Ihnen ein Original THÜROS-Grill zur Verfügung.
                 </p>
                 <p>
@@ -134,13 +179,16 @@
         <div class="row">
             <div class="col s12 m8">
                 <p>
-                    Wir wollen Ihnen einen erholsamen Aufenthalt bieten und tolle Eindrücke verschaffen, von denen Sie
+                    Wir wollen Ihnen einen erholsamen Aufenthalt bieten und tolle Eindrücke verschaffen, von denen
+                    Sie
                     auch nach
                     ihrem Urlaub nach Zerren können.
-                    Auf diesen Seiten können Sie sich über unsere Unterkunft informieren und ihre Anreise bequem planen.
+                    Auf diesen Seiten können Sie sich über unsere Unterkunft informieren und ihre Anreise bequem
+                    planen.
                 </p>
                 <p>
-                    Vor der Ferienwohnung befinden sich zahlreiche gebührenfreie Parkmöglichkeiten. Für Motorradfahrer
+                    Vor der Ferienwohnung befinden sich zahlreiche gebührenfreie Parkmöglichkeiten. Für
+                    Motorradfahrer
                     und
                     Mountainbiker gibt es gesonderte Abstellmöglichkeiten direkt in der Unterkunft.
                 </p>
@@ -217,6 +265,7 @@
             <img src="bilder/1.jpg" alt="Die weiße Bank">
         </div>
     </div>
+    </div>
     <footer class="page-footer white black-text">
         <div class="container">
             <div class="row">
diff --git a/script.js b/script.js
index c7b0e35..c151184 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,14 @@ document.addEventListener('DOMContentLoaded', function () {
     var elems = document.querySelectorAll('.parallax');
     var parallaxes = M.Parallax.init(elems, {});
 
+    var elems = document.querySelectorAll('.slider');
+    var sliders = M.Slider.init(elems, {
+        indicators: true,
+        height: 500,
+        duration: 500,
+        interval: 5000
+    });
+
     var mailcypts = document.querySelectorAll(".cryptmail");
     mailcypts.forEach(element => {
         element.onclick = function () {
