[TASK] neues Einstiegsbild

src/index.html

@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Ferienwohnung "Wanderlust"</title>
     <link rel="manifest" href="manifest.json">
-    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+    <link rel="shortcut icon" href="/favicons/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <meta name="description" content="Unsere Ferienwohnung in Finsterbergen">
     <meta name="keywords" content="Ferienwohnung, Unterkunft, Wandern, Friedrichroda, Kamin">
@@ -21,7 +21,7 @@
         <nav class="light-green lighten-1">
             <div class="nav-wrapper container">
                 <a href="/" id="logo-container" class="brand-logo" title="Gehe zur Startseite">
-                    <img src="favicon.png" alt="Visitenkarten-Logo" loading="eager">
+                    <img src="/favicons/favicon.ico" alt="Visitenkarten-Logo" loading="eager">
                 </a>
                 <a href="#" data-target="sidenav" class="sidenav-trigger hide-on-large-and-up"><i
                         class="material-icons">menu</i></a>
@@ -40,26 +40,29 @@
     </ul>
     <div id="willkommen-banner" class="parallax-container valign-wrapper">
         <div class="container">
-            <div class="card-panel">
+            <div class="lead card-panel">
                 <div class="center">
-                    <h1 class="heading-2 light-green-text">Ferienwohnung "<span class="uppercase">Wanderlust</span>"
+                    <h1 class="heading-2 light-green-text">Ferienwohnung &bdquo;<span
+                            class="uppercase">Wanderlust</span>&rdquo;
                     </h1>
                 </div>
                 <h2 class="heading-5 light center light-green-text text-darken-3">
-                    <i>Entspannen in gemütlicher Atmosphäre</i>
+                    <strong><i>Entspannen in gemütlicher Atmosphäre</i></strong>
                 </h2>
             </div>
         </div>
         <div class="parallax">
             <picture>
-                <source srcset="images/StartbildOriginal_Rev.webp" type="image/webp">
+                <source srcset="images/collage1.webp" type="image/webp">
-                <img src="images/StartbildOriginal_Rev.jpg" alt="Kollage von Bildern aus der Ferienwohnung"
+                <img src="images/collage1.jpg" alt="Wohnbereich und Teil der Küchenzeile mit Blick Richtung Fenster"
                     loading="auto">
             </picture>
         </div>
     </div>
     <section id="willkommen" class="container">
         <div class="row">
+            <div class="col s12">
+            </div>
             <div class="col s12 center">
                 <h2 class="light-green-text">Willkommen</h2>
             </div>

src/scss/style.scss

@@ -4,6 +4,16 @@
 
 #willkommen-banner {
     height: calc(100vh - 64px);
+
+    .lead {
+        text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, 1);
+
+        background: rgba(255, 255, 255, 0.5);
+    }
+
+    .parallax img {
+        max-width: 110%;
+    }
 }
 
 #wohnung-banner {}
@@ -53,9 +63,27 @@ a:not([href^='#']) {
     border-radius: 0;
 }
 
+.masonry {
+    display: flex;
+    flex-grow: row wrap;
+    margin-left: -8px;
+
+    .masonry-brick {
+        flex: auto;
+        height: 250px;
+        min-height: 150px;
+        margin: 0 8px 0 0;
+    }
+}
+
 @media only screen and (max-width:600px) {
     #willkommen-banner {
         height: calc(100vh - 56px);
+        max-height: 300px;
+
+        .parallax img {
+            max-width: 130%;
+        }
     }
 
     .heading-2,

src/style.css

@@ -3,6 +3,11 @@
 
 #willkommen-banner {
   height: calc(100vh - 64px); }
+  #willkommen-banner .lead {
+    text-shadow: 0.075em 0.08em 0.1em black;
+    background: rgba(255, 255, 255, 0.5); }
+  #willkommen-banner .parallax img {
+    max-width: 110%; }
 
 #footer-banner {
   height: 90vh; }
@@ -38,9 +43,22 @@ a:not([href^='#']) {
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0; }
 
+.masonry {
+  display: flex;
+  flex-grow: row wrap;
+  margin-left: -8px; }
+  .masonry .masonry-brick {
+    flex: auto;
+    height: 250px;
+    min-height: 150px;
+    margin: 0 8px 0 0; }
+
 @media only screen and (max-width: 600px) {
   #willkommen-banner {
-    height: calc(100vh - 56px); }
+    height: calc(100vh - 56px);
+    max-height: 300px; }
+    #willkommen-banner .parallax img {
+      max-width: 130%; }
   .heading-2,
   h2 {
     font-size: 2.82rem; }