pres: add box

jitsedesmet · Jun 16, 2024 · 3e83b0d · 3e83b0d
1 parent 32d8f42
commit 3e83b0d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/presentation/final-assets/custom.css b/presentation/final-assets/custom.css
@@ -17,3 +17,28 @@
 .reveal .slides ul ul {
     list-style-type: none;
 }
+
+.animated-message {
+    position: fixed;
+    height: 30px;
+    width: 30px;
+    background: #bfbfbf;
+    transform: translate(40px, 20px);
+    box-shadow: 3px 3px 3px black;
+/*path('M20,20 C20,100 200,0 200,100')*/
+/*    https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
+/*    L500,-10, 640,-10 */
+/*    offset-path: path('M20,20 H400 Q450 -40, 500 -10');*/
+/*     https://yqnn.github.io/svg-path-editor/ */
+    offset-path: path('M 20 20 H 400 L 500 -10 L 640 -10');
+    animation: move 5000ms infinite forwards linear;
+}
+
+@keyframes move {
+    0% {
+        offset-distance: 0%;
+    }
+    100% {
+        offset-distance: 100%;
+    }
+}
diff --git a/presentation/final-presentation.html b/presentation/final-presentation.html
@@ -189,12 +189,20 @@ <h3>Research Question and Hypothesis</h3>
     <div style="display: flex; flex-direction: row; gap: 5px; align-items: center">
         <img src="final-assets/nadenken%202.png" style="height: 150px; margin: 0">
         <img src="final-assets/weggeven.png" style="transform: scaleX(-1); height: 150px; margin: 0">
-        <div style="height: 150px; width: 200px; background: black; clip-path: polygon(0% 40%, 60% 40%, 60% 30%, 100% 50%, 60% 70%, 60% 60%, 0% 60%);">
+
+
+        <div style="height: 150px; width: 200px">
+            <div class="animated-message"></div>
+            <div style="height: 100%; width: 100%; background: black; clip-path: polygon(0% 40%, 60% 40%, 60% 30%, 100% 50%, 60% 70%, 60% 60%, 0% 60%);">
+            </div>
         </div>
 
         <img src="final-assets/gears.png" style="height: 150px; margin: 0">
 
-        <div style="height: 150px; width: 200px; background: black; clip-path: polygon(0% 40%, 60% 40%, 60% 30%, 100% 50%, 60% 70%, 60% 60%, 0% 60%);">
+        <div style="height: 150px; width: 200px">
+<!--            <div style="position: fixed; height: 30px; width: 30px; background: #bfbfbf; transform: translate(40px, 20px); box-shadow: 3px 3px 3px black"></div>-->
+            <div style="height: 100%; width: 100%; background: black; clip-path: polygon(0% 40%, 60% 40%, 60% 30%, 100% 50%, 60% 70%, 60% 60%, 0% 60%);">
+            </div>
         </div>
 
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 5px; justify-items: center">