progress on website

2023-05-19 18:30:28 +02:00
parent d856df8e1b
commit 9207db9a59
14 changed files with 245 additions and 12 deletions
--- a/newVersion/css/homeStyle.css
+++ b/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');
-}
+}