traffic light

zero-to-mastery · Nov 29, 2023 · 567f975 · 567f975
1 parent f5878f1
commit 567f975
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 6 deletions.
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
@@ -33,16 +33,15 @@ let cards = [
     imageLink: './Art/stormworm9/RingAnimation/ring.gif',
     author: 'stormworm9',
     githubLink: 'https://github.com/stormworm9'
-   },
+  },
 
   {
     artName: 'TriangleProjection',
     pageLink: './Art/stormworm9/TriangleProjection/projection.html',
     imageLink: './Art/stormworm9/TriangleProjection/TriangleProjection.gif',
     author: 'stormworm9',
     githubLink: 'https://github.com/stormworm9'
-  }, 
-
+  },
 
   {
     artName: 'Loading Page',
@@ -2868,18 +2867,27 @@ let cards = [
     author: 'Danilo Slovic',
     githubLink: 'https://github.com/daniloslovic17'
   },
-  {    artName: 'Animated', 
+  {
+    artName: 'Animated',
     pageLink: './Art/Nyrkn10/index.html',
     imageLink: './Art/Nyrkn10/set.gif',
     author: 'Nyariki Kevin',
-    githubLink: 'https://github.com/nyrkn10>' 
+    githubLink: 'https://github.com/nyrkn10>'
   },
-  {    artName: 'Fascinating Animation',
+  {
+    artName: 'Fascinating Animation',
     pageLink: './Art/moutro/index.html',
     imageLink: './Art/moutro/Animation-Nation.png',
     author: 'Jay',
     githubLink: 'https://github.com/moutro'
   },
+  {
+    artName: 'Traffic Light Animation',
+    pageLink: './Art/nyame100/index.html',
+    imageLink: './Art/nyame100/trafficLight.gif',
+    author: 'Nyame Richmond',
+    githubLink: 'https://github.com/nyame100'
+  }
 ];
 
 /* -------------------------------------------------------------------------- */