Added my nite-stocker folder to Art with index, html, css, and gif. A…

…dded my card to root include.js. (#2387)
zero-to-mastery · Oct 29, 2023 · dc74b05 · dc74b05
1 parent cd2e990
commit dc74b05
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 4 deletions.
diff --git a/Art/nite-stocker/alien-tunnel-small.gif b/Art/nite-stocker/alien-tunnel-small.gif
diff --git a/Art/nite-stocker/alien-tunnel.css b/Art/nite-stocker/alien-tunnel.css
@@ -0,0 +1,79 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    background-color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    perspective: 1000px;
+}
+
+.tunnel {
+    width: 210px;
+    height: 210px;
+    position: relative;
+    animation: moveTunnel 10s linear infinite;
+    transform-style: preserve-3d;
+    transform: translateZ(-210px);
+    background: linear-gradient(#000, #333);
+    border-radius: 50%;
+    box-shadow: 0 0 14px 14px #00f, 0 0 28px 28px #00f, 0 0 42px 42px #00f;
+}
+
+.light {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    background-color: #0f0;
+    border-radius: 50%;
+    opacity: 0.7;
+    animation: pulseLight 1.5s alternate infinite, rotateLights 5s linear infinite;
+}
+
+.light-1 {
+    top: 84px;
+    left: 98px;
+}
+
+.light-2 {
+    top: 98px;
+    left: 42px;
+    background-color: #f00;
+}
+
+.light-3 {
+    top: 112px;
+    left: 98px;
+    background-color: #00f;
+}
+
+@keyframes moveTunnel {
+    0% {
+        transform: translateZ(-210px);
+    }
+
+    100% {
+        transform: translateZ(-630px);
+    }
+}
+
+@keyframes pulseLight {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(1.4);
+    }
+}
+
+@keyframes rotateLights {
+    0% {
+        transform: rotateY(0deg);
+    }
+
+    100% {
+        transform: rotateY(360deg);
+    }
+}
diff --git a/Art/nite-stocker/alien-tunnel.html b/Art/nite-stocker/alien-tunnel.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="alien-tunnel.css">
+    <title>Alien Tunnel</title>
+</head>
+
+<body>
+    <div class="tunnel">
+        <div class="light light-1"></div>
+        <div class="light light-2"></div>
+        <div class="light light-3"></div>
+    </div>
+</body>
+
+</html>
diff --git a/include.js b/include.js
@@ -27,6 +27,13 @@ let cards = [
     author: 'Bamidele Damilola Joseph',
     githubLink: 'https://github.com/Bidexdablitz'
   },
+  {
+    artName: 'Alien Tunnel',
+    pageLink: './Art/nite-stocker/alien-tunnel.html',
+    imageLink: './Art/nite-stocker/alien-tunnel-small.gif',
+    author: 'nite-stocker',
+    githubLink: 'https://github.com/nite-stocker'
+  },
   {
     artName: 'Flower Animation',
     pageLink: './Art/Kris248/index.html',
@@ -2615,10 +2622,10 @@ let cards = [
   },
   {
     artName: 'Circular multi-color Disk',
-    pageLink: './Art/ReneDev01/index.html', 
-    imageLink: './Art/ReneDev01/Disk-2023-10-18-09-38-09.gif', 
-    author: 'ReneAonbo', 
-    githubLink: 'https://github.com/ReneDev01' 
+    pageLink: './Art/ReneDev01/index.html',
+    imageLink: './Art/ReneDev01/Disk-2023-10-18-09-38-09.gif',
+    author: 'ReneAonbo',
+    githubLink: 'https://github.com/ReneDev01'
   },
   {
     artName: 'Moving and rotating galaxy ',