Parallax & Bildergalerie
HTML
<html>
<head>
</head>
<body>
<!-- Parallax -->
<div class="parallaxbild">Lorem ipsum dolor</div>
<div class="parallaxtext">
<!-- Hier deinen Text einfügen -->
</div>
<!-- Bildergalerie -->
<div class="flexlayout">
<div class="rahmenimg">
<!-- Bei src deine Quelle einfügen -->
<img src="#">
</div>
<div class="textlayout">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="flexlayout">
<div class="textlayout">
Lorem ipsum dolor sit amet
</div>
<div class="rahmenimg">
<!-- Bei src deine Quelle einfügen -->
<img src="#">
</div>
</div>
<div class="flexlayout">
<div class="rahmenimg">
<!-- Bei src deine Quelle einfügen -->
<img src="#">
</div>
<div class="textlayout">
Lorem ipsum dolor sit amet
</div>
</div>
</body>
</html>
CSS
/* Parallax */
body {
margin: 0;
background: grey;
padding-bottom: 100px;
}
.parallaxbild {
background-image: url("Quelle deines Bildes");
height: 500px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 5vw;
background-attachment: fixed;
}
.parallaxtext {
font-size: 3vw;
color: white;
padding: 10% 20%;
background-color: rgb(235, 172, 162);
margin-bottom: 50px;
}
@media (max-width:850px) {
.parallaxbild {
background-attachment: scroll;
background-size: cover;
height: 250px;
font-size: 7vw;
}
.parallaxtext {
font-size: 5vw;
}
}
/* Bildergalerie */
.flexlayout {
display: flex;
justify-content: center;
}
.rahmenimg {
width: 40vw;
height: 40vw;
overflow: hidden;
}
.textlayout {
width: 40vw;
height: 40vw;
background: rgb(206, 106, 107);
font-size: 3vw;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.rahmenimg img {
height: 100%;
width: 100%;
transition: transform 0.5s;
}
@media(min-width:850px) {
.rahmenimg img:hover {
transform: scale(1.2);
}
}
@media (max-width:800px) {
.flexlayout:nth-child(odd) {
flex-direction: column;
align-items: center;
}
.flexlayout:nth-child(even) {
flex-direction: column-reverse;
align-items: center;
}
.rahmenimg {
width: 80vw;
height: 80vw;
}
.textlayout {
width: 80vw;
height: 80vw;
font-size: 5vw;
}
}