115 lines
1.9 KiB
CSS
115 lines
1.9 KiB
CSS
.arrow_slider {
|
|
width: 100px;
|
|
position: absolute;
|
|
top: 50%;
|
|
opacity: 0.5;
|
|
filter: drop-shadow(4px 3px 2px #ffffff) contrast(1000%) invert(100%) ;
|
|
z-index: 10;
|
|
}
|
|
|
|
.arrow_slider:nth-child(1) {
|
|
left: 10%;
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.arrow_slider:nth-child(2) {
|
|
right: 10%;
|
|
}
|
|
.slider_wrap:hover .arrow_slider {
|
|
opacity: 1.0;
|
|
filter: drop-shadow(4px 3px 2px #ffffff) contrast(1000%) invert(100%) brightness(1.0);
|
|
}
|
|
|
|
.slider_wrap {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
.slider_image {
|
|
width: 100%;
|
|
max-height: 850px;
|
|
filter: brightness(0.5);
|
|
}
|
|
|
|
.slider_info {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
}
|
|
.slider_info h2 {
|
|
font-size: 200%;
|
|
color: whitesmoke !important;
|
|
margin: 0 30% 0 30%;
|
|
}
|
|
.slider_info p {
|
|
color: whitesmoke !important;
|
|
font-size: 120%;
|
|
margin: 0 30% 0 30%;
|
|
}
|
|
|
|
.slider_info a {
|
|
|
|
color: whitesmoke !important;
|
|
margin: 20px 30% 0 30%;
|
|
}
|
|
|
|
|
|
|
|
|
|
.features_wrap {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
row-gap: 30px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.feature_wrap {
|
|
width: 48%;
|
|
height: 300px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
.feature_wrap div {
|
|
width: 100%;
|
|
height: 100%;
|
|
backdrop-filter: brightness(0.5);
|
|
}
|
|
.feature_wrap p, h3 {
|
|
text-align: center;
|
|
padding: 10px;
|
|
color: whitesmoke;
|
|
text-shadow: 10px 10px 5px #000;
|
|
}
|
|
.feature_wrap:nth-child(1) {
|
|
background-image: url(../img/4_kraft2.jpeg);
|
|
}
|
|
.feature_wrap:nth-child(2) {
|
|
background-image: url(../img/3_cardio4.jpeg);
|
|
}
|
|
.feature_wrap:nth-child(3) {
|
|
background-image: url(../img/2_racket_2.jpeg);
|
|
}
|
|
.feature_wrap:nth-child(4) {
|
|
background-image: url(../img/7_wellness1.jpeg);
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom_wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 110%;
|
|
}
|
|
.bottom_wrap h2 {
|
|
color: #2E2E2E !important;
|
|
}
|
|
.bottom_logo {
|
|
width: 10%;
|
|
margin: auto;
|
|
margin-bottom: 20px;
|
|
} |