first upload

css/index.css

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

css/main.css

@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+:root {
+    --bg-color: #F8F8F8;
+    --tx-color: #2E2E2E;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+a,p,h1,h2,h3 {
+    color: var(--tx-color);
+    font-family: "Quicksand";
+}
+
+body {
+    background-color: var(--bg-color);
+}
+.header_bottom_wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 120px;
+  
+}
+.header_bottom_wrap a {
+    text-decoration: none;
+    padding: 0 10px;
+}
+.block_wrap {
+    
+    padding: 0 120px;
+    margin: 0 0 80px 0;
+}
+.logo {
+    width: 70%;
+}
+.header_top_wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 120px;
+    opacity: 50%;
+}