104 lines
2.2 KiB
CSS
104 lines
2.2 KiB
CSS
.parallax {
|
|
/* Create the parallax scrolling effect */
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
height: 100%;
|
|
}
|
|
|
|
.parallax-one {
|
|
background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
|
}
|
|
|
|
.parallax-two {
|
|
background-image: url('https://images.unsplash.com/photo-1566679056462-2075774c8c07?q=80&w=3130&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
|
}
|
|
|
|
.parallax-three {
|
|
background-image: url('https://images.unsplash.com/photo-1469433791803-c2719135f970?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
|
}
|
|
|
|
.glass {
|
|
backdrop-filter: blur(6px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(6px) saturate(200%);
|
|
background-color: rgba(17, 25, 40, 0.6);
|
|
border: 0px solid rgba(255, 255, 255, 0.125);
|
|
}
|
|
|
|
.spacer-block {
|
|
position: relative;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.spacer-one {
|
|
background-color: #B39475;
|
|
}
|
|
|
|
.spacer-two {
|
|
background-color: #9AB3D5;
|
|
}
|
|
|
|
.image {
|
|
height: 250px;
|
|
width: auto;
|
|
}
|
|
|
|
.scroll-image {
|
|
position: fixed;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
margin-bottom: 5px;
|
|
margin-right: 5px;
|
|
display: block;
|
|
}
|
|
|
|
.glass {
|
|
backdrop-filter: blur(6px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(6px) saturate(200%);
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
|
}
|
|
|
|
.caption {
|
|
position: relative;
|
|
left: 0;
|
|
top: 25%;
|
|
width: 100%;
|
|
text-align: center;
|
|
text-wrap: inherit;
|
|
}
|
|
|
|
.caption-lower {
|
|
position: relative;
|
|
left: 0;
|
|
top: 45%;
|
|
width: 100%;
|
|
text-align: center;
|
|
text-wrap: inherit;
|
|
}
|
|
|
|
.caption span.border {
|
|
font-size: 25px;
|
|
text-wrap: inherit;
|
|
color: #fff;
|
|
}
|
|
|
|
.caption-lower span.border {
|
|
font-size: 25px;
|
|
text-wrap: inherit;
|
|
color: #fff;
|
|
}
|
|
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
@media only screen and (max-device-width: 1366px) {
|
|
.parallax {
|
|
background-attachment: scroll;
|
|
}
|
|
} |