You Name it.. (#1780)

* You Name it.. * removed remote and repushed PR * added static image removed Gif
zero-to-mastery · Oct 3, 2023 · ea490e0 · ea490e0
1 parent 88ef91f
commit ea490e0
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 0 deletions.
diff --git a/Art/lucifer510/style.css b/Art/lucifer510/style.css
@@ -0,0 +1,61 @@
+.spinner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100.2px;
+    height: 9.2px;
+ }
+
+ .spinner div {
+    animation: spinner-4t3wzl 1.875s infinite backwards;
+    background-color: #524f2e;
+    border-radius: 50%;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+ }
+
+ .spinner div:nth-child(1) {
+    animation-delay: 0.14s;
+    background-color: rgba(235, 91, 243, 0.9);
+ }
+
+ .spinner div:nth-child(2) {
+    animation-delay: 0.28s;
+    background-color: rgba(97, 69, 236, 0.9);
+ }
+
+ .spinner div:nth-child(3) {
+    animation-delay: 0.42s;
+    background-color: rgba(93, 212, 245, 0.7);
+ }
+
+ .spinner div:nth-child(4) {
+    animation-delay: 0.56s;
+    background-color: rgba(38, 204, 71, 0.6);
+ }
+
+ .spinner div:nth-child(5) {
+    animation-delay: 0.70s;
+    background-color: rgba(205, 244, 64, 0.591);
+ }
+
+ .spinner div:nth-child(6) {
+    animation-delay: 0.84s;
+    background-color: rgba(207, 185, 43, 0.5);
+ }
+
+ .spinner div:nth-child(7) {
+    animation-delay: 0.98s;
+    background-color: rgba(203, 63, 63, 0.698);
+ }
+
+ @keyframes spinner-4t3wzl {
+    0% {
+       transform: rotate(0deg) translateY(-200%);
+    }
+
+    60%, 100% {
+       transform: rotate(360deg) translateY(-200%);
+    }
+ }
diff --git a/Art/lucifer510/weirdSpinner.html b/Art/lucifer510/weirdSpinner.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Spinner</title>
+   <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+   <div class="spinner">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+   </div>
+</body>
+
+</html>
diff --git a/Art/lucifer510/weirdSpinner.png b/Art/lucifer510/weirdSpinner.png
diff --git a/include.js b/include.js
@@ -250,6 +250,13 @@ let cards = [
     imageLink: './Art/Simar/trippy-square.gif',
     author: 'Simar',
     githubLink: 'https://github.com/SimardeepSingh-zsh'
+  },
+  {
+    artName: 'Weird Spinner',
+    pageLink: './Art/lucifer/weirdSpinner.html',
+    imageLink: './Art/lucifer/weirdSpinner.png',
+    author: 'lucifer510',
+    githubLink: 'https://github.com/lucifer510'
   }
 ];