adding my submission, better late than never! (#2419)

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Nov 1, 2023 · 81db056 · 81db056
1 parent d5f53ad
commit 81db056
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 0 deletions.
diff --git a/Art/MojoBoingo/hellothere.gif b/Art/MojoBoingo/hellothere.gif
diff --git a/Art/MojoBoingo/index.html b/Art/MojoBoingo/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div class="animation">
+    <div class="rotating-text">
+      <span>[ Hello</span>
+      <span class="dynamic-text"></span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Art/MojoBoingo/style.css b/Art/MojoBoingo/style.css
@@ -0,0 +1,44 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+  background-color: orange; /*happy halloween*/
+}
+
+.animation {
+  font-size: 24px;
+  font-weight: bold;
+  white-space: nowrap;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.rotating-text {
+  display: inline-block;
+  position: relative;
+  animation: rotateText 6s linear infinite;
+}
+
+.dynamic-text::before {
+  content: " world!";
+  animation: changeText 6s linear infinite;
+}
+
+@keyframes changeText {
+  0%, 25% {
+    content: "world! ]";
+  }
+  25.01%, 50% {
+    content: "user! ]";
+  }
+  50.01%, 75% {
+    content: "developer! ]";
+  }
+  75.01%, 100% {
+    content: "friend! ]";
+  }
+}
diff --git a/include.js b/include.js
@@ -2822,6 +2822,13 @@ let cards = [
     author: 'Bhavna',
     githubLink: 'https://github.com/Bhavna2003'
   },
+  {
+    artName: 'HelloThere',
+    pageLink: './Art/MojoBoingo/index.html',
+    imageLink: './Art/MojoBoingo/hellothere.gif',
+    author: 'Brady Ayres',
+    githubLink: 'https://github.com/MojoBoingo'
+  },
   {
     artName: 'Emerald',
     pageLink: './Art/daniel-badura/emerald/emerald.html',