adding my Art to the project (#2436)

zero-to-mastery · Jun 23, 2024 · 20a55bf · 20a55bf
1 parent b8f209c
commit 20a55bf
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 1 deletion.
diff --git a/Art/nyame100/index.html b/Art/nyame100/index.html
@@ -0,0 +1,25 @@
+<!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="style.css" />
+    <title>Triangle</title>
+  </head>
+  <body>
+    <div class="traffic-light">
+      <div class="container">
+        <div class="bubble">
+          <div class="red"></div>
+        </div>
+        <div class="bubble">
+          <div class="yellow"></div>
+        </div>
+        <div class="bubble">
+          <div class="green"></div>
+        </div>
+      </div>
+      <div class="stand"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/nyame100/style.css b/Art/nyame100/style.css
@@ -0,0 +1,141 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.traffic-light {
+  display: flex;
+  flex-flow: column;
+}
+.stand {
+  height: 300px;
+  width: 20px;
+  background: #000;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-top: -1px;
+  top: 0;
+  left: 40px;
+}
+
+.container {
+  background: #5a5959;
+  width: 100px;
+  height: 300px;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 50px;
+}
+.bubble {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  box-shadow: 0 0 10px #264653;
+}
+
+.red,
+.yellow,
+.green {
+  height: 70px;
+  width: 70px;
+  border-radius: 50%;
+}
+.red {
+  background: #300;
+  animation: stop 8s linear infinite;
+}
+.yellow {
+  background: #430;
+  animation: ready 8s linear infinite;
+}
+.green {
+  background: #030;
+  animation: go 8s linear infinite;
+}
+
+@keyframes stop {
+  0% {
+    background: #300;
+  }
+  10% {
+    background: #f00;
+  }
+  30% {
+    background: #f00;
+  }
+  35% {
+    background: #300;
+  }
+  65% {
+    background: #300;
+  }
+  80% {
+    background: #300;
+  }
+  100% {
+    background: #300;
+  }
+}
+
+@keyframes ready {
+  0% {
+    background: #430;
+  }
+  35% {
+    background: #430;
+  }
+  45% {
+    background: #fc0;
+  }
+  45% {
+    background: #fc0;
+  }
+  65% {
+    background: #fc0;
+  }
+  80% {
+    background: #430;
+  }
+  100% {
+    background: #430;
+  }
+}
+
+@keyframes go {
+  0% {
+    background: #030;
+  }
+  55% {
+    background: #030;
+  }
+  60% {
+    background: #030;
+  }
+  70% {
+    background: #030;
+  }
+  75% {
+    background: #030;
+  }
+  80% {
+    background: #0a0;
+  }
+  85% {
+    background: #0a0;
+  }
+  95% {
+    background: #0a0;
+  }
+  100% {
+    background: #030;
+  }
+}
diff --git a/Art/nyame100/trafficLight.gif b/Art/nyame100/trafficLight.gif
diff --git a/include.js b/include.js
@@ -2874,7 +2874,6 @@ let cards = [
     author: 'Nyariki Kevin',
     githubLink: 'https://github.com/nyrkn10>'
   },
-
   {
     artName: 'Fascinating Animation',
     pageLink: './Art/moutro/index.html',
@@ -2908,6 +2907,13 @@ let cards = [
     imageLink: './Art/hamzakadd/matrix.gif',
     author: 'Hamza',
     githubLink: 'https://github.com/hamzakadd'
+  },
+  {
+    artName: 'Traffic Light Animation',
+    pageLink: './Art/nyame100/index.html',
+    imageLink: './Art/nyame100/trafficLight.gif',
+    author: 'Nyame Richmond',
+    githubLink: 'https://github.com/nyame100'
   }
 ];