progress on website

newVersion/css/homeStyle.css

@@ -35,10 +35,131 @@ body {
     transform: translateY(0);
 }
 
+.scroll-indicator {
+    position: fixed;
+    right: 5%;
+    z-index: 11;
+    width: 90%;
+    bottom: 5%;
+    display: none;
+}
+
+.scroll-wrapper {
+    color: rgb(221, 221, 221);
+    font-size: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.scroll-symbol {
+    font-size: 180%;
+    animation: scroll-animation infinite 4s ease-in-out;
+}
+
+@keyframes scroll-animation {
+    0% {
+        opacity: 0;
+        transform: translateY(0);
+    }
+    10% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 0.8;
+    }
+    75% {
+        opacity: 0;
+        transform: translateY(25px);
+    }
+    100% {
+        opacity: 0;
+    }    
+}
+
+.progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90%;
+    top: 5%;
+    right: 2%;
+    z-index: 5;
+    position: fixed;
+}
+
+.progress-wrapper {
+    display: flex;
+    color: white;
+    border-radius: 50px;
+    flex-direction: column;
+    max-width: min-content;
+}
+
+.progress-item {
+    cursor: pointer;
+}
+
+
+.background-images {
+    position: fixed;
+}
+
+.hidables, #img1 {
+    position: fixed;
+    height: 100vh;
+    width: auto;
+    top: 0%;
+    display: block;
+    right: 0%;
+    opacity: 0;
+    transition: all 2s;
+}
+
+.visible {
+    opacity: 1;
+}
+
 /* 
     Styles for individual steps
 */
+
 #step-1 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 ));
+}
+
+#step-2 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-3 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage2.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-4 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage3.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-5 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage4.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-6 {
     position: fixed;
     background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( 'https://static.janishutz.com/Logo.png');
-}
+}

newVersion/css/navstyle.css

@@ -72,7 +72,7 @@
 }
 
 .listtoggle:hover .line {
-    background-color: rgb(29, 69, 105);
+    background-color: rgb(58, 149, 224);
     transition: 0.4s;
 }
 
@@ -124,7 +124,7 @@
 .navitem {
     text-decoration: none;
     text-align: center;
-    color: rgb(29, 69, 105);
+    color: rgb(168, 212, 253);
     font-size: 1.4rem;
     width: fit-content;
     padding: 2%;
@@ -138,13 +138,13 @@
 
 .inactive:hover {
     font-size: 1.6rem;
-    color: rgb(29, 69, 105);
+    color: rgb(168, 212, 253);
     transition: 0.4s;
 }
 
 /* ~ --> all next & + --> next */
 .shaded {
-    color: rgb(29, 69, 105);
+    color: rgb(168, 212, 253);
     transition: 0.3s;
 }
 

newVersion/css/style.css

@@ -20,12 +20,21 @@ body {
     -webkit-text-fill-color: currentColor;
 }
 
+
+.material-symbols-outlined {
+    font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 48
+}
+
 /*
     GRADIENTS
 */
 
 .gradient-purple {
-    background-image: repeating-linear-gradient(to right, rgb(85, 19, 116), rgb(131, 28, 151), rgb(119, 77, 128));
+    background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214));
     width: fit-content;
     -webkit-background-clip: text;
     background-clip: text;