update 0.1

index.css

@@ -0,0 +1,101 @@
+.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);
+}
+
+
+