Skip to content

Commit ad8ccef

Browse files
ccholinskiChris CholinskiLaurelineP
authored
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>
1 parent b65dd07 commit ad8ccef

File tree

3 files changed

+164
-0
lines changed

3 files changed

+164
-0
lines changed

‎Art/ccholinski-DisappearingSquares/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Disappearing Squares</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="first" id="horizontal1"></div>
11+
<div class="first" id="vertical1"></div>
12+
<div class="second" id="horizontal2"></div>
13+
<div class="second" id="vertical2"></div>
14+
<div class="second" id="horizontal3"></div>
15+
<div class="second" id="vertical3"></div>
16+
<div class="third" id="horizontal4"></div>
17+
<div class="third" id="vertical4"></div>
18+
<div class="third" id="horizontal5"></div>
19+
<div class="third" id="vertical5"></div>
20+
<div class="third" id="horizontal6"></div>
21+
<div class="third" id="vertical6"></div>
22+
<div class="third" id="horizontal7"></div>
23+
<div class="third" id="vertical7"></div>
24+
</body>
25+
</html>

‎Art/ccholinski-DisappearingSquares/meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Disappearing Squares",
3+
"githubHandle": "ccholinski"
4+
}

‎Art/ccholinski-DisappearingSquares/styles.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
body {
2+
background-color: blue;
3+
}
4+
div {
5+
position: absolute;
6+
}
7+
.first {
8+
background-color: blue;
9+
z-index: 3;
10+
animation-name: cantordust1;
11+
animation-duration: 5s;
12+
animation-timing-function: linear;
13+
animation-iteration-count: infinite;
14+
}
15+
#horizontal1 {
16+
width: 100%;
17+
height: calc(100%/3);
18+
left: 0;
19+
bottom: calc(100%/3);
20+
}
21+
#vertical1 {
22+
width: calc(100%/3);
23+
height: 100%;
24+
left: calc(100%/3);
25+
bottom: 0;
26+
}
27+
.second {
28+
background-color: blue;
29+
z-index: 2;
30+
animation-name: cantordust2;
31+
animation-duration: 5s;
32+
animation-timing-function: linear;
33+
animation-iteration-count: infinite;
34+
}
35+
#horizontal2 {
36+
width: 100%;
37+
height: calc(100%/9);
38+
left: 0;
39+
bottom: calc(100%/9);
40+
}
41+
#vertical2 {
42+
width: calc(100%/9);
43+
height: 100%;
44+
left: calc(100%/9);
45+
bottom: 0;
46+
}
47+
#horizontal3 {
48+
width: 100%;
49+
height: calc(100%/9);
50+
left: 0;
51+
bottom: calc(700%/9);
52+
}
53+
#vertical3 {
54+
width: calc(100%/9);
55+
height: 100%;
56+
left: calc(700%/9);
57+
bottom: 0;
58+
}
59+
.third {
60+
background-color: blue;
61+
z-index: 1;
62+
animation-name: cantordust3;
63+
animation-duration: 5s;
64+
animation-timing-function: linear;
65+
animation-iteration-count: infinite;
66+
}
67+
#horizontal4 {
68+
width: 100%;
69+
height: calc(100%/27);
70+
left: 0;
71+
bottom: calc(100%/27);
72+
}
73+
#vertical4 {
74+
width: calc(100%/27);
75+
height: 100%;
76+
left: calc(100%/27);
77+
bottom: 0;
78+
}
79+
#horizontal5 {
80+
width: 100%;
81+
height: calc(100%/27);
82+
left: 0;
83+
bottom: calc(700%/27);
84+
}
85+
#vertical5 {
86+
width: calc(100%/27);
87+
height: 100%;
88+
left: calc(700%/27);
89+
bottom: 0;
90+
}
91+
#horizontal6 {
92+
width: 100%;
93+
height: calc(100%/27);
94+
left: 0;
95+
bottom: calc(1900%/27);
96+
}
97+
#vertical6 {
98+
width: calc(100%/27);
99+
height: 100%;
100+
left: calc(1900%/27);
101+
bottom: 0;
102+
}
103+
#horizontal7 {
104+
width: 100%;
105+
height: calc(100%/27);
106+
left: 0;
107+
bottom: calc(2500%/27);
108+
}
109+
#vertical7 {
110+
width: calc(100%/27);
111+
height: 100%;
112+
left: calc(2500%/27);
113+
bottom: 0;
114+
}
115+
@keyframes cantordust1 {
116+
0% {background-color: blue;}
117+
25% {background-color: white;}
118+
50% {background-color: white;}
119+
75% {background-color: white;}
120+
100% {background-color: white;}
121+
}
122+
@keyframes cantordust2 {
123+
0% {background-color: blue;}
124+
25% {background-color: blue;}
125+
50% {background-color: white;}
126+
75% {background-color: white;}
127+
100% {background-color: white;}
128+
}
129+
@keyframes cantordust3 {
130+
0% {background-color: blue;}
131+
25% {background-color: blue;}
132+
50% {background-color: blue;}
133+
75% {background-color: white;}
134+
100% {background-color: white;}
135+
}

0 commit comments

Comments
 (0)