added my art (#2831)

* removed comment from line 7 * renamed style.css to styles.css and adjusted the HTML link source --------- Co-authored-by: Chris Cholinski <chrischolinski@Chriss-MacBook-Pro.local> Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 31, 2024 · ad8ccef · ad8ccef
1 parent b65dd07
commit ad8ccef
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 0 deletions.
diff --git a/Art/ccholinski-DisappearingSquares/index.html b/Art/ccholinski-DisappearingSquares/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">
+    <title>Disappearing Squares</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="first" id="horizontal1"></div>
+    <div class="first" id="vertical1"></div>
+    <div class="second" id="horizontal2"></div>
+    <div class="second" id="vertical2"></div>
+    <div class="second" id="horizontal3"></div>
+    <div class="second" id="vertical3"></div>
+    <div class="third" id="horizontal4"></div>
+    <div class="third" id="vertical4"></div>
+    <div class="third" id="horizontal5"></div>
+    <div class="third" id="vertical5"></div>
+    <div class="third" id="horizontal6"></div>
+    <div class="third" id="vertical6"></div>
+    <div class="third" id="horizontal7"></div>
+    <div class="third" id="vertical7"></div>
+</body>
+</html>
diff --git a/Art/ccholinski-DisappearingSquares/meta.json b/Art/ccholinski-DisappearingSquares/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "Disappearing Squares",
+    "githubHandle": "ccholinski"
+}
diff --git a/Art/ccholinski-DisappearingSquares/styles.css b/Art/ccholinski-DisappearingSquares/styles.css
@@ -0,0 +1,135 @@
+body {
+    background-color: blue;
+}
+div {
+    position: absolute;
+}
+.first {
+    background-color: blue;
+    z-index: 3;
+    animation-name: cantordust1;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+#horizontal1 {
+    width: 100%;
+    height: calc(100%/3);
+    left: 0;
+    bottom: calc(100%/3);
+}
+#vertical1 {
+    width: calc(100%/3);
+    height: 100%;
+    left: calc(100%/3);
+    bottom: 0;
+}
+.second {
+    background-color: blue;
+    z-index: 2;
+    animation-name: cantordust2;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+#horizontal2 {
+    width: 100%;
+    height: calc(100%/9);
+    left: 0;
+    bottom: calc(100%/9);
+}
+#vertical2 {
+    width: calc(100%/9);
+    height: 100%;
+    left: calc(100%/9);
+    bottom: 0;
+}
+#horizontal3 {
+    width: 100%;
+    height: calc(100%/9);
+    left: 0;
+    bottom: calc(700%/9);
+}
+#vertical3 {
+    width: calc(100%/9);
+    height: 100%;
+    left: calc(700%/9);
+    bottom: 0;
+}
+.third {
+    background-color: blue;
+    z-index: 1;
+    animation-name: cantordust3;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+#horizontal4 {
+    width: 100%;
+    height: calc(100%/27);
+    left: 0;
+    bottom: calc(100%/27);
+}
+#vertical4 {
+    width: calc(100%/27);
+    height: 100%;
+    left: calc(100%/27);
+    bottom: 0;
+}
+#horizontal5 {
+    width: 100%;
+    height: calc(100%/27);
+    left: 0;
+    bottom: calc(700%/27);
+}
+#vertical5 {
+    width: calc(100%/27);
+    height: 100%;
+    left: calc(700%/27);
+    bottom: 0;
+}
+#horizontal6 {
+    width: 100%;
+    height: calc(100%/27);
+    left: 0;
+    bottom: calc(1900%/27);
+}
+#vertical6 {
+    width: calc(100%/27);
+    height: 100%;
+    left: calc(1900%/27);
+    bottom: 0;
+}
+#horizontal7 {
+    width: 100%;
+    height: calc(100%/27);
+    left: 0;
+    bottom: calc(2500%/27);
+}
+#vertical7 {
+    width: calc(100%/27);
+    height: 100%;
+    left: calc(2500%/27);
+    bottom: 0;
+}
+@keyframes cantordust1 {
+    0% {background-color: blue;}  
+    25% {background-color: white;}
+    50% {background-color: white;}
+    75% {background-color: white;}
+    100% {background-color: white;}
+}
+@keyframes cantordust2 {
+    0% {background-color: blue;}  
+    25% {background-color: blue;}
+    50% {background-color: white;}
+    75% {background-color: white;}
+    100% {background-color: white;}
+}
+@keyframes cantordust3 {
+    0% {background-color: blue;}  
+    25% {background-color: blue;}
+    50% {background-color: blue;}
+    75% {background-color: white;}
+    100% {background-color: white;}
+}