[ LP ] Review (#2442)

- removed html cdn link - fixed conflict Co-authored-by: Laureline <laurelinedev@gmail.com>
zero-to-mastery · Jun 29, 2024 · c681246 · c681246
1 parent 2dd2fea
commit c681246
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 0 deletions.
diff --git a/Art/Imaginario27/animation.css b/Art/Imaginario27/animation.css
@@ -0,0 +1,178 @@
+:root {
+    --color-one: rgba(42, 147, 189, 0.8);
+    --color-two: rgba(145, 56, 98, 0.7);
+    --color-three: rgba(76, 184, 90, 0.6);
+    --color-four: rgba(234, 123, 65, 0.8);
+    --color-five: rgba(32, 97, 142, 0.7);
+    --color-six: rgba(169, 49, 80, 0.8);
+    --color-seven: rgba(101, 195, 221, 0.7);
+    --color-eight: rgba(218, 74, 124, 0.8);
+    --color-small-squircle: #ff6347; /* Tomato Red */
+    --color-small-squircle-two: rgba(84, 62, 125, 0.8);
+    --color-small-squircle-four: rgba(188, 153, 71, 0.8);
+    --color-small-squircle-six: rgba(26, 173, 181, 0.8);
+    --color-small-squircle-eight: rgba(169, 37, 97, 0.8);
+    --color-large-squircle: rgba(57, 6, 111, 0.15);
+    --border-color: rgba(255, 255, 255, 0.4);
+    --box-shadow-color: rgba(0, 0, 0, 0.5);
+    --box-shadow-small: rgba(0, 0, 0, 0.2);
+    --bg-color: #06051c;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    background: var(--bg-color);
+}
+
+div {
+    display: block;
+    height: 20em;
+    left: calc(50% - 10em);
+    position: absolute;
+    top: calc(50% - 10em);
+    width: 20em;
+}
+
+.large-circles {
+    animation: spin 10s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+}
+
+.small-shapes {
+    animation: spin-inverse 10s linear infinite;
+}
+
+.content-squircle {
+    animation: spin-inverse 10s linear infinite;
+}
+
+.circle,
+.squircle {
+    border-top: 0.1em solid var(--border-color);
+    height: 12.5em;
+    position: absolute;
+    width: 12.5em;
+}
+
+.circle {
+    border-radius: 50%;
+    box-shadow: 0 1em 2em var(--box-shadow-color);
+    left: calc(50% - 6.25em);
+    top: calc(50% - 12.5em);
+    transform-origin: 50% 12.5em;
+}
+
+.one {
+    background: var(--color-one);
+    transform: rotateZ(225deg);
+}
+
+.two {
+    background: var(--color-two);
+    transform: rotateZ(180deg);
+}
+
+.three {
+    background: var(--color-three);
+    transform: rotateZ(135deg);
+}
+
+.four {
+    background: var(--color-four);
+    transform: rotateZ(90deg);
+}
+
+.five {
+    background: var(--color-five);
+    transform: rotateZ(45deg);
+}
+
+.six {
+    background: var(--color-six);
+    transform: rotateZ(0);
+}
+
+.seven {
+    background: var(--color-seven);
+    transform: rotateZ(-45deg);
+}
+
+.eight {
+    background: var(--color-eight);
+    transform: rotateZ(-90deg);
+}
+
+.small {
+    width: 4em;
+    height: 4em;
+    left: calc(50% - 2em);
+    top: calc(50% - 15em);
+    transform-origin: 50% 15em;
+    box-shadow: 0 0.25em 0.5em var(--box-shadow-small);
+}
+
+.small.squircle {
+    background: none;
+    border: none;
+    box-shadow: none;
+}
+
+.small.squircle::after {
+    background: var(--color-small-squircle);
+    border-radius: 25%;
+    box-shadow: -0.25em 0.25em 0.5em var(--box-shadow-small);
+    content: "";
+    height: 100%;
+    position: absolute;
+    transform: rotateZ(-45deg);
+    width: 100%;
+}
+
+.small.squircle.two::after {
+    background: var(--color-small-squircle-two);
+}
+
+.small.squircle.four::after {
+    background: var(--color-small-squircle-four);
+}
+
+.small.squircle.six::after {
+    background: var(--color-small-squircle-six);
+}
+
+.small.squircle.eight::after {
+    background: var(--color-small-squircle-eight);
+}
+
+.large.squircle {
+    background: var(--color-large-squircle);
+    border: none;
+    height: 15em;
+    width: 15em;
+    left: calc(50% - 7.5em);
+    position: absolute;
+    top: calc(50% - 7.5em);
+    transform: none;
+    border-radius: 2em;
+    border-bottom: 2em;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotateZ(0);
+    }
+    100% {
+        transform: rotateZ(360deg);
+    }
+}
+
+@keyframes spin-inverse {
+    0% {
+        transform: rotateZ(0);
+    }
+    100% {
+        transform: rotateZ(-360deg);
+    }
+}
diff --git a/Art/Imaginario27/animation.html b/Art/Imaginario27/animation.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Crazy Spinning Circles</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/x-icon" href="">
+        <link rel="stylesheet" href="animation.css">
+    </head>
+    <body>
+        <div class="large-circles">
+            <div class="large circle one"></div>
+            <div class="large circle two"></div>
+            <div class="large circle three"></div>
+            <div class="large circle four"></div>
+            <div class="large circle five"></div>
+            <div class="large circle six"></div>
+            <div class="large circle seven"></div>
+            <div class="large circle eight"></div>
+          </div>
+
+          <div class="small-shapes">
+            <div class="small circle one"></div>
+            <div class="small squircle two"></div>
+            <div class="small circle three"></div>
+            <div class="small squircle four"></div>
+            <div class="small circle five"></div>
+            <div class="small squircle six"></div>
+            <div class="small circle seven"></div>
+            <div class="small squircle eight"></div>
+          </div>
+
+          <div class="content-squircle">
+            <div class="large squircle one"></div>
+          </div>
+    </body>
+</html>
diff --git a/Art/Imaginario27/crazy-spinning-circles.gif b/Art/Imaginario27/crazy-spinning-circles.gif
diff --git a/ZTM_SimardeepSingh-zsh.ico b/ZTM_SimardeepSingh-zsh.ico
diff --git a/include.js b/include.js
@@ -2922,6 +2922,13 @@ let cards = [
     author: 'Yumi Machino', 
     githubLink: 'https://github.com/YumiMachino'
   },
+  {    
+    artName: 'Crazy Spinning Circles',
+    pageLink: './Art/Imaginario27/animation.html',
+    imageLink: './Art/Imaginario27/crazy-spinning-circles.gif',
+    author: 'Imaginario27',
+    githubLink: 'https://github.com/Imaginario27'
+  }
 ];
 
 /* -------------------------------------------------------------------------- */