Merge pull request #13 from RainbowJM/keisha

Wolk animation done
RainbowJM · Apr 13, 2023 · 0457e3b · 0457e3b
2 parents 1c948a2 + 8d2ed21
commit 0457e3b
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 40 deletions.
diff --git a/public/styles/style.css b/public/styles/style.css
@@ -19,25 +19,22 @@
         Helvetica,
         sans-serif;
 
-        --text-color: #2b3044;
-        --font-size: 16px;
-        --duration: 2.5s;
-        --duration-line: 0.84s;
+    --text-color: #2b3044;
+    --font-size: 16px;
+    --duration: 2.5s;
+    --duration-line: 0.84s;
 }
 
 body {
     font-family: var(--text);
     position: relative;
+    width: 100vw;
     min-height: 100vh;
     background-color: var(--light-grey);
+    overflow-x: hidden;
 }
 
-#start main{
-    /* min-height: 100vh; */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+
 
 h1 {
     font-family: var(--title);
@@ -62,10 +59,11 @@ a {
 header nav {
     display: flex;
     align-items: center;
+    gap: 2em;
 }
 
 header nav img {
-    width: 20%;
+    width: 15%;
 }
 
 header ul li:first-of-type {
@@ -74,7 +72,7 @@ header ul li:first-of-type {
 
 header nav p {
     font-weight: 500;
-    font-size: clamp(3em, 2vw, 8em);
+    font-size: clamp(1em, 2vw, 8em);
 }
 
 /**********************/
@@ -86,32 +84,70 @@ header nav p {
     position: absolute;
     top: 3em;
     right: 0;
-
+    /* background-color: aqua; */
+    width: 30vw;
+    height: 9em;
 
 }
 
 .background-decoration-1 figure {
     /* background-color: #feb63d; */
+    animation: moving-wolk-group-1 5s infinite alternate linear both;
+    margin: 1em;
     border-radius: 4em;
     width: 7em;
     height: 3em;
+    position: absolute;
+    transition: 3s;
 }
 
 .background-decoration-1 figure:nth-of-type(1) {
+    --width: 10em;
+    width: var(--width);
     background-color: var(--light-grey);
     border: 3px solid var(--orange-yellow);
+    /* transform: translateX(5em); */
+    --animation-width: calc(var(--width) + 1em);
+    animation-delay: .2s;
+    top: 0;
 }
 
 .background-decoration-1 figure:nth-of-type(2) {
+    --width: 9em;
+    width: var(--width);
     background-color: var(--orange-yellow);
     height: 1.5em;
-    width: 9em;
+
+    --animation-width: calc(var(--width) + 1em);
+    /* transform: translateX(-3em); */
+    animation-delay: -.7s;
+    top: 3.5em;
 }
 
 .background-decoration-1 figure:nth-of-type(3) {
+    --width: 7em;
+    width: var(--width);
     background-color: var(--coral-deeppink);
-    width: 7em;
+
+    --animation-width: calc(var(--width) + 1em);
     height: 3em;
+    /* transform: translateX(7em); */
+    animation-delay: -.8s;
+
+    top: 7.5em;
+}
+
+
+@keyframes moving-wolk-group-1 {
+    0% {
+        /* transform: translateX(-100%); */
+        left: 0;
+    }
+
+    100% {
+        /* transform: translateX(100%) */
+        left: calc(100% - var(--animation-width));
+    }
 }
 
 /*********************************/
@@ -123,32 +159,64 @@ header nav p {
     position: absolute;
     bottom: 2em;
     right: 0;
+    width: 30vw;
+    height: 9em;
 
 }
 
 .background-decoration-2 figure {
     /* background-color: #feb63d; */
+    animation: moving-wolk-group-2 6s infinite alternate linear both;
     border-radius: 4em;
     width: 7em;
     height: 3em;
+    margin: 1em;
+    position: absolute;
+    transition: 3s;
 }
 
 .background-decoration-2 figure:nth-of-type(1) {
+    --width: 8em;
+    width: var(--width);
+    /* transform: translateX(-5em); */
     background-color: var(--coral-deeppink);
-    width: 10em;
+    --animation-width: calc(var(--width) + 1em);
+    animation-delay: .3s;
+    bottom: -1em;
 }
 
 .background-decoration-2 figure:nth-of-type(2) {
+    --width: 3em;
+    width: var(--width);
+    /* transform: translate(7em, -2.5em); */
     background-color: var(--orange-yellow);
     height: 1.5em;
-    width: 5em;
+    --animation-width: calc(var(--width) + 1em);
+    animation-delay: -.7s;
+    bottom: -3em;
 }
 
 .background-decoration-2 figure:nth-of-type(3) {
+    --width: 12em;
+    width: var(--width);
     background-color: var(--light-grey);
     border: 3px solid var(--coral-deeppink);
-    width: 12em;
+    --animation-width: calc(var(--width) + 1em);
+    /* transform: translate(0, -1em); */
+    animation-delay: -.8s;
+    /* bottom: -8em; */
+}
 
+@keyframes moving-wolk-group-2 {
+    0% {
+        /* transform: translateX(-100%); */
+        left: 0;
+    }
+
+    100% {
+        /* transform: translateX(100%) */
+        left: calc(100% - var(--animation-width));
+    }
 }
 
 /**********************/
@@ -160,28 +228,57 @@ header nav p {
     position: absolute;
     bottom: 2em;
     left: 0;
+    width: 30vw;
+    height: 9em;
 
 }
 
 .background-decoration-3 figure {
+    animation: moving-wolk-group-3 8s infinite alternate linear both;
+    margin: 1em;
     /* background-color: #feb63d; */
     border-radius: 4em;
+    position: absolute;
+    transition: 3s;
     width: 7em;
     height: 3em;
 }
 
 .background-decoration-3 figure:nth-of-type(1) {
+    --width: 6em;
     background-color: var(--coral-deeppink);
-    width: 6em;
+    width: var(--width);
+    /* transform: translateX(5em); */
+    --animation-width: calc(var(--width) + 1em);
+    bottom: 3em;
+    animation-delay: .2s;
 }
 
 
 .background-decoration-3 figure:nth-of-type(2) {
+    --width: 12em;
     border: 3px solid var(--black);
-    width: 12em;
+    width: var(--width);
+    /* transform: translateX(-5em); */
+    bottom: -1em;
+    animation-delay: -.5s;
+    --animation-width: calc(var(--width) + 1em);
 }
 
 
+
+@keyframes moving-wolk-group-3 {
+    0% {
+        /* transform: translateX(-100%); */
+        left: 0;
+    }
+
+    100% {
+        /* transform: translateX(100%) */
+        left: calc(100% - var(--animation-width));
+    }
+}
+
 @media (max-width: 30em) {
 
     .background-decoration-1,
@@ -201,6 +298,12 @@ header nav p {
     align-items: center;
 }
 
+#start main {
+    min-height: 50vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 #offline main p {
     font-size: 18px;
     margin: 0;

diff --git a/views/index.ejs b/views/index.ejs
@@ -13,6 +13,8 @@
     <main>
         <p><a class="link" href="/poems"></a></p>
     </main>
+
+    <%- include('./partials/background-decoration'); %>
 </body>
 <script src="./scripts/script.js"></script>
 </html>
diff --git a/views/partials/background-decoration.ejs b/views/partials/background-decoration.ejs
@@ -0,0 +1,16 @@
+<div class="background-decoration-1">
+    <figure></figure>
+    <figure></figure>
+    <figure></figure>
+</div>
+
+<div class="background-decoration-2">
+    <figure></figure>
+    <figure></figure>
+    <figure></figure>
+</div>
+
+<div class="background-decoration-3">
+    <figure></figure>
+    <figure></figure>
+</div>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -1,4 +1,5 @@
 <nav>
     <img src="/images/PW2 - Hackaton trans.png" alt="">
     <p>Dicho di Hubentut</p>
+    <a href="/">Home</a>
 </nav>
diff --git a/views/poems.ejs b/views/poems.ejs
@@ -37,26 +37,7 @@
         <%- include('./partials/footer'); %>
     </footer>
 
-    <div class="background-decoration-1">
-        <figure></figure>
-        <figure></figure>
-        <figure></figure>
-    </div>
-
-    <div class="background-decoration-2">
-        <figure></figure>
-        <figure></figure>
-        <figure></figure>
-    </div>
-
-    <div class="background-decoration-3">
-        <figure></figure>
-        <figure></figure>
-    </div>
-
-
-
-
+<%- include('./partials/background-decoration'); %>
 
 </body>