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

[TASK] neues Einstiegsbild

Browse Source
This commit is contained in:
Christian Seyfferth 2020-04-26 17:06:00 +02:00
parent 37eccc87ba
commit f93401770d
4 changed files with 57 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/images/collage1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 868 KiB

17
src/index.html
View File

@ -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">
<img src="images/StartbildOriginal_Rev.jpg" alt="Kollage von Bildern aus der Ferienwohnung"
<source srcset="images/collage1.webp" type="image/webp">
<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>

28
src/scss/style.scss
View File

@ -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,

20
src/style.css
View File

@ -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; }