adding my Art to the project (#2436)

zero-to-mastery · Jun 22, 2024 · b8f209c · b8f209c
1 parent fae1ff7
commit b8f209c
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 1 deletion.
diff --git a/Art/hamzakadd/index.html b/Art/hamzakadd/index.html
@@ -0,0 +1,51 @@
+<html>
+    <head>
+        <title>Matrix Animation</title>
+        <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+        <div class="letter l00 t200"><div></div></div>
+        <div class="letter l10 t500"><div></div></div>
+        <div class="letter l20 t180"><div></div></div>
+        <div class="letter l30 t700"><div></div></div>
+        <div class="letter l40 t800"><div></div></div>
+        <div class="letter l50 t900"><div></div></div>
+        <div class="letter l60 t300"><div></div></div>
+        <div class="letter l70 t400"><div></div></div>
+        <div class="letter l80 t320"><div></div></div>
+        <div class="letter l90 t190"><div></div></div>
+        <div class="letter l100 t520"><div></div></div>
+        <div class="letter l05 t380 big"><div></div></div>
+        <div class="letter l15 t400 big"><div></div></div>
+        <div class="letter l25 t600 big"><div></div></div>
+        <div class="letter l35 t650 big"><div></div></div>
+        <div class="letter l45 t290 big"><div></div></div>
+        <div class="letter l55 t530 big"><div></div></div>
+        <div class="letter l65 t420 big"><div></div></div>
+        <div class="letter l75 t900 big"><div></div></div>
+        <div class="letter l85 t200 big"><div></div></div>
+        <div class="letter l95 t180 big"><div></div></div>
+
+        <div class="letter l00 t200 d2"><div></div></div>
+        <div class="letter l10 t500 d2"><div></div></div>
+        <div class="letter l20 t180 d2"><div></div></div>
+        <div class="letter l30 t700 d2"><div></div></div>
+        <div class="letter l40 t800 d2"><div></div></div>
+        <div class="letter l50 t900 d2"><div></div></div>
+        <div class="letter l60 t300 d2"><div></div></div>
+        <div class="letter l70 t400 d2"><div></div></div>
+        <div class="letter l80 t320 d2"><div></div></div>
+        <div class="letter l90 t190 d2"><div></div></div>
+        <div class="letter l100 t520 d2"><div></div></div>
+        <div class="letter l05 t380 big d2"><div></div></div>
+        <div class="letter l15 t400 big d2"><div></div></div>
+        <div class="letter l25 t600 big d2"><div></div></div>
+        <div class="letter l35 t650 big d2"><div></div></div>
+        <div class="letter l45 t290 big d2"><div></div></div>
+        <div class="letter l55 t530 big d2"><div></div></div>
+        <div class="letter l65 t420 big d2"><div></div></div>
+        <div class="letter l75 t900 big d2"><div></div></div>
+        <div class="letter l85 t200 big d2"><div></div></div>
+        <div class="letter l95 t180 big d2"><div></div></div>
+    </body>
+</html>
diff --git a/Art/hamzakadd/matrix.gif b/Art/hamzakadd/matrix.gif
diff --git a/Art/hamzakadd/style.css b/Art/hamzakadd/style.css
@@ -0,0 +1,116 @@
+@property --timer {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 1;
+}    
+
+:root { background-color: black; overflow: hidden; font-family: monospace; }
+
+.l00 { left: calc(100% + 20px); }
+.l05 { left: 05%; }
+.l10 { left: 10%; }
+.l15 { left: 15%; }
+.l20 { left: 20%; }
+.l25 { left: 25%; }
+.l30 { left: 30%; }    
+.l35 { left: 35%; }
+.l40 { left: 40%; }
+.l45 { left: 45%; }
+.l50 { left: 50%; }
+.l55 { left: 55%; }
+.l60 { left: 60%; }
+.l65 { left: 65%; }
+.l70 { left: 70%; }
+.l75 { left: 75%; }
+.l80 { left: 80%; }
+.l85 { left: 85%; }
+.l90 { left: 90%; }
+.l95 { left: 95%; }
+.l100 { left: calc(100% - 20px); }
+
+
+.t200 { top: -400px; }
+.t500 { top: -500px; }
+.t180 { top: -680px; }
+.t700 { top: -700px; }
+.t800 { top: -800px; }
+.t900 { top: -900px; }
+.t300 { top: -300px; }    
+.t400 { top: -400px; }    
+.t250 { top: -250px; }    
+.t320 { top: -320px; }    
+.t190 { top: -690px; }    
+.t520 { top: -520px; }    
+.t380 { top: -680px; }    
+.t400 { top: -800px; }    
+.t600 { top: -600px; }    
+.t650 { top: -650px; }    
+.t290 { top: -790px; }    
+.t530 { top: -730px; }    
+.t420 { top: -720px; }    
+.t310 { top: -410px; }
+
+
+.big div {
+    width: 40px!important;        
+    height: 300px!important;
+    font-size: 24px!important;
+    color: #008000!important;
+}
+
+.letter {
+    position: absolute;
+    background-color: black;
+    counter-reset: timer-1 calc(var(--timer) + 9) timer-2 calc(var(--timer) + 8) timer-3 calc(var(--timer) + 7) timer-4 calc(var(--timer) + 6) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 4) timer-7 calc(var(--timer) + 3) timer-8 calc(var(--timer) + 2) timer-9 calc(var(--timer) + 1) timer-10 calc(var(--timer) + 0);
+    animation: animate-letter 2s linear infinite running, animate-rotate 1s linear infinite running, animate-position 5s linear infinite running;
+}
+
+.d2{
+animation-delay: 2.5s;
+}
+
+.letter div {
+    width: 20px;
+    height: 140px;
+    font-size: 12px;
+    color: #002e00;
+}
+
+.letter div:before {
+    position: absolute;
+    filter: brightness(2.5) blur(0.5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}
+
+.letter div:after {
+    position: absolute;
+    content: counter(timer-1, lower-alpha);
+    color: white;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    background: linear-gradient(180deg, black, transparent);
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}
+
+@keyframes animate-letter {
+    to {
+        --timer: 16;
+    }
+}
+
+@keyframes animate-position {
+    to {
+        top: calc(100% + 40px);
+    }
+}
+
diff --git a/include.js b/include.js
@@ -2902,7 +2902,13 @@ let cards = [
     imageLink: './Art/Kalliran/Animation-Nation.gif',
     author: 'Kalliran',
     githubLink: 'https://github.com/Kalliran'
-  },
+  },{
+    artName: 'Matrix',
+    pageLink: './Art/hamzakadd/index.html',
+    imageLink: './Art/hamzakadd/matrix.gif',
+    author: 'Hamza',
+    githubLink: 'https://github.com/hamzakadd'
+  }
 ];
 
 /* -------------------------------------------------------------------------- */