Add falling squares art (#1778)

* add falling squares art * include falling squares art --------- Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 3, 2023 · 4d99e44 · 4d99e44
1 parent 5268be4
commit 4d99e44
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 0 deletions.
diff --git a/Art/migueldalberto/index.html b/Art/migueldalberto/index.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">
+    <title>Falling squares</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+    </div>
+
+</body>
+
+</html>
diff --git a/Art/migueldalberto/screenshot.png b/Art/migueldalberto/screenshot.png
diff --git a/Art/migueldalberto/style.css b/Art/migueldalberto/style.css
@@ -0,0 +1,86 @@
+html,
+body {
+    background-color: #2b2b2b;
+    height: 100%;
+    margin: 0;
+}
+
+.container {
+    position: absolute;
+    bottom: 40%;
+    left: 50%;
+    width: 80px;
+    height: 240px;
+    animation: slide 3s ease forwards;
+    animation-iteration-count: infinite;
+}
+
+.square {
+    width: 90px;
+    height: 90px;
+    border: 3px solid #042037;
+    background-color: #042037;
+    animation: drop 3s ease forwards;
+    animation-iteration-count: infinite;
+}
+
+@keyframes slide {
+
+    0%,
+    60%,
+    100% {
+        transform: translateX(0em);
+    }
+
+    90% {
+        transform: translateX(80em);
+    }
+}
+
+@keyframes drop {
+
+    0%,
+    100% {
+        opacity: 0;
+        transform: translateY(-50em)
+    }
+
+    30%,
+    70% {
+        transform: translateY(0em);
+        opacity: 1;
+    }
+
+    71% {
+        opacity: 0;
+    }
+}
+
+.square:first-child {
+    border-color: #1A1A59;
+    background-color: #343477;
+    opacity: 0;
+    animation-delay: 500ms;
+}
+
+.square:nth-child(2) {
+    border-color: #042037;
+    background-color: #294F6D;
+    opacity: 0;
+    animation-delay: 250ms;
+}
+
+.square:last-child {
+    border-color: #09093B;
+    background-color: #1A1A59;
+    opacity: 0;
+    animation-delay: 50ms;
+}
+
+.circle {
+    width: 100px;
+    height: 100px;
+    border: 3px solid #0F5738;
+    border-radius: 100%;
+    background-color: #277554;
+}
diff --git a/include.js b/include.js
@@ -13,6 +13,13 @@ let cards = [
     author: 'Joy',
     githubLink: 'https://github.com/royranger'
   },
+  {
+    artName: 'Falling Squares',
+    pageLink: './Art/migueldalberto/index.html',
+    imageLink: './Art/migueldalberto/screenshot.png',
+    author: 'migueldalberto',
+    githubLink: 'https://github.com/migueldalberto'
+  },
   {
     artName: 'Infinite Hacktober Shapes',
     pageLink: '.Art/Joy/Joe_DiGioia/JoeArt.html',