Added my art (#1809)

Co-authored-by: Tyler Catus <catus7@yahoo.com> Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 3, 2023 · 9a95dfd · 9a95dfd
1 parent d18ef11
commit 9a95dfd
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 0 deletions.
diff --git a/Art/Catoos/Cube.gif b/Art/Catoos/Cube.gif
diff --git a/Art/Catoos/cube.html b/Art/Catoos/cube.html
@@ -0,0 +1,21 @@
+<!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="cube_styles.css">
+  <title>Document</title>
+</head>
+<body>
+    <div class="container">
+      <div class="cube">
+        <div class="cube_face cube_face_red"></div>
+        <div class="cube_face cube_face_blue"></div>
+        <div class="cube_face cube_face_green"></div>
+        <div class="cube_face cube_face_pink"></div>
+        <div class="cube_face cube_face_orange"></div>
+        <div class="cube_face cube_face_purple"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/Art/Catoos/cube_styles.css b/Art/Catoos/cube_styles.css
@@ -0,0 +1,86 @@
+body {
+    font-family: sans-serif;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #444646;
+  }
+
+.container {
+    display: flex;
+    perspective: 200px;
+}
+
+.cube {
+    width: 200px;
+    height: 200px;
+    transform-style: preserve-3d;
+    animation: rotateCube 4s infinite linear;
+}
+
+
+@keyframes rotateCube {
+    0%, 6% {
+      transform: translateZ(-100px) rotateY(0deg) rotateX(0deg);
+    }
+    16%, 21% {
+      transform: translateZ(-100px) rotateY(90deg) rotateX(0deg);
+    }
+    33%, 38% {
+      transform: translateZ(-100px) rotateX(90deg);
+    }
+    47%, 52% {
+      transform: translateZ(-100px) rotateY(180deg) rotateX(0deg);
+    }
+
+    61%, 66% {
+      transform: translateZ(-100px)  rotateX(-90deg);
+    }
+    76%, 80% {
+      transform: translateZ(-100px)  rotateY(270deg) rotateX(90deg);
+    }
+    90%, 100% {
+      transform: translateZ(-100px) rotateY(360deg) rotateX(0deg);
+    }
+  }
+
+.cube_face {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  border: 3px solid black;
+}
+
+
+.cube_face_red  { 
+    background: #ff00009c; 
+    transform: rotateY(0deg) translateZ(100px);
+}
+
+.cube_face_blue  { 
+    background: #00ffff9c; 
+    transform: rotateY(90deg) translateZ(100px);
+}
+
+.cube_face_green   {  
+    background: #00ff7f9c; 
+    transform: rotateY(180deg) translateZ(100px);
+}
+
+.cube_face_pink   {  
+    background: #ff14939c; 
+    transform: rotateY(-90deg) translateZ(100px);
+}
+
+.cube_face_orange    { 
+    background: #ffa5009c; 
+    transform: rotateX(90deg) translateZ(100px);
+}
+
+.cube_face_purple { 
+    background: #8000809c ; 
+    transform: rotateX(-90deg) translateZ(100px);
+}
+
diff --git a/include.js b/include.js
@@ -160,6 +160,20 @@ let cards = [
     githubLink: 'https://github.com/alexsatalan'
   },
   {
+    artName: 'olga_min',
+    pageLink: './Art/olga_min/index.html',
+    imageLink: './Art/olga_min/animation.gif',
+    author: 'Olga',
+    githubLink: 'https://github.com/OlgaMinaievaWebDev'
+  },
+  {
+    artName: 'Rotating_Cube',
+    pageLink: './Art/Catoos/Cube.html',
+    imageLink: './Art/Catoos/Cube.gif',
+    author: 'Catoos',
+    githubLink: 'https://github.com/Catoos'
+  },
+    {
     artName: 'Moving Flag',
     pageLink: './Art/Mayank_goel/index.html',
     imageLink: './Art/Mayank_goel/moving_flag.gif',