chrosey/urlaub-friedrichroda
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] erster Entwurf mit Slider

Browse Source
This commit is contained in:
Christian Seyfferth 2020-04-10 20:11:47 +02:00
parent c04765a5c5
commit 6ccbc89fc9
2 changed files with 65 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<div class="navbar-fixed"> <div class="navbar-fixed">
<nav class="green lighten-2"> <nav class="light-green lighten-1">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a href="/" id="logo-container" class="brand-logo"> <a href="/" id="logo-container" class="brand-logo">
<img src="favicon.png" alt="Visitenkarten-Logo" height="64"> <img src="favicon.png" alt="Visitenkarten-Logo" height="64">
@ -82,23 +82,68 @@
<h2>Ferienwohnung</h2> <h2>Ferienwohnung</h2>
</div> </div>
</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="row">
<div class="col s12 m8"> <div class="col s12 m8">
<p> <p>
Unsere gemütliche Ferienwohnung "Wanderlust“ liegt im Zentrum des heilklimatischen Luftkurortes Unsere gemütliche Ferienwohnung "Wanderlust“ liegt im Zentrum des heilklimatischen Luftkurortes
Finsterbergen. 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. wundervollen Natur.
</p> </p>
<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 Platz
für für
2 Erwachsene. 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 anliegenden Terrasse ein. Unsere Ferienwohnung bietet Ihnen den Komfort einer vollausgestattete
Küchenzeile 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. Um Thüringen auch kulinarisch zu entdecken, steht Ihnen ein Original THÜROS-Grill zur Verfügung.
</p> </p>
<p> <p>
@ -134,13 +179,16 @@
<div class="row"> <div class="row">
<div class="col s12 m8"> <div class="col s12 m8">
<p> <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 auch nach
ihrem Urlaub nach Zerren können. 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>
<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 und
Mountainbiker gibt es gesonderte Abstellmöglichkeiten direkt in der Unterkunft. Mountainbiker gibt es gesonderte Abstellmöglichkeiten direkt in der Unterkunft.
</p> </p>
@ -217,6 +265,7 @@
<img src="bilder/1.jpg" alt="Die weiße Bank"> <img src="bilder/1.jpg" alt="Die weiße Bank">
</div> </div>
</div> </div>
</div>
<footer class="page-footer white black-text"> <footer class="page-footer white black-text">
<div class="container"> <div class="container">
<div class="row"> <div class="row">

8
script.js
View File

@ -2,6 +2,14 @@ document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.parallax'); var elems = document.querySelectorAll('.parallax');
var parallaxes = M.Parallax.init(elems, {}); 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"); var mailcypts = document.querySelectorAll(".cryptmail");
mailcypts.forEach(element => { mailcypts.forEach(element => {
element.onclick = function () { element.onclick = function () {