Merge pull request #1831 from zero-to-mastery/SimardeepSingh-zsh-Sima…

…rdeepSingh-zsh Simardeep singh zsh simardeep singh zsh
zero-to-mastery · Oct 3, 2023 · 2f3576a · 2f3576a
2 parents 06d39c6 + 604a766
commit 2f3576a
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 0 deletions.
diff --git a/Art/Simar/trippy-square.gif b/Art/Simar/trippy-square.gif
diff --git a/Art/Simar/trippy.css b/Art/Simar/trippy.css
@@ -0,0 +1,120 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+.mw-1080 {
+  position: relative;
+  max-width: 1080px;
+  margin: auto;
+  overflow: hidden;
+}
+
+.container {
+  position: relative;
+  margin: 20px;
+}
+
+.container img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.viewport {
+  position: absolute;
+  padding: 5% 6% 7% 6%;
+  background: #161616;
+  margin: 1% 20% 1% 1%;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.viewport .gif-vid {
+  position: absolute;
+  top: 48%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 84%;
+  height: auto;
+}
+
+.viewport .pixels {
+  position: relative;
+}
+
+button.dile {
+  display: block;
+  position: absolute;
+  left: 85.6%;
+  transform: translateY(-50%);
+  padding: 0;
+  border-radius: 50%;
+  border: #dfddd1 solid 3px;
+  background-color: transparent;
+  width: 10.2%;
+  line-height: 0;
+  cursor: pointer;
+  transition: all 200ms ease-in-out;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    border: #007fff solid 2px;
+  }
+
+  span {
+    display: block;
+    width: 100%;
+    padding-top: 100%;
+  }
+}
+
+button#channels {
+  top: 56.3%;
+}
+
+button#volume {
+  top: 74.6%;
+}
+
+button.switch {
+  display: block;
+  position: absolute;
+  left: 82.2%;
+  transform: translateY(-50%);
+  padding: 0;
+  border-radius: 50%;
+  border: none;
+  background-color: #dfddd1;
+  width: 1.5%;
+  line-height: 0;
+  cursor: pointer;
+  transition: all 200ms ease-in-out;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    border: none;
+    background-color: #007fff;
+  }
+
+  span {
+    display: block;
+    width: 100%;
+    padding-top: 100%;
+  }
+}
+
+button#mute {
+  top: 53.7%;
+}
+button#hd {
+  top: 60.2%;
+}
+button#idk {
+  top: 66.5%;
+}
+button#bright {
+  top: 72.9%;
+}
+button#color {
+  top: 79.3%;
+}
diff --git a/Art/Simar/trippy.html b/Art/Simar/trippy.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="trippy.css" />
+    <title>Trippy Animation</title>
+  </head>
+  <body>
+    <div class="mw-1080">
+      <div class="container">
+        <div class="viewport">
+          <img
+            id="gif_vid"
+            class="gif-vid"
+            src="https://res.cloudinary.com/tgustudios/image/upload/v1534362663/trippy-square.gif"
+          />
+          <img
+            class="pixels"
+            src="https://res.cloudinary.com/tgustudios/image/upload/v1534362663/vhs-overlay.png"
+          />
+        </div>
+        <img
+          class="tv"
+          src="https://res.cloudinary.com/tgustudios/image/upload/v1534362663/80s-tv.png"
+        />
+
+        <button id="mute" class="switch" title="Mute / Unmute">
+          <span></span>
+        </button>
+        <button id="hd" class="switch" title="High Def"><span></span></button>
+        <button id="idk" class="switch" title="IDK"><span></span></button>
+        <button id="bright" class="switch" title="Bright / Dark">
+          <span></span>
+        </button>
+        <button id="color" class="switch" title="Color / B&W">
+          <span></span>
+        </button>
+
+        <button id="channels" class="dile" title="Change the Channels">
+          <span></span>
+        </button>
+        <button id="volume" class="dile" title="Mute / Unmute">
+          <span></span>
+        </button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/include.js b/include.js
@@ -215,6 +215,13 @@ let cards = [
     imageLink: './Art/Shubham-Chaudhary/square_animation.gif',
     author: 'Shubham Chaudhary',
     githubLink: 'https://github.com/Stellar-X'
+  },
+  {
+    artName: 'Trippy',
+    pageLink: './Art/Simar/trippy.html',
+    imageLink: './Art/Simar/trippy-square.gif',
+    author: 'Simar',
+    githubLink: 'https://github.com/SimardeepSingh-zsh'
   }
 ];