diff --git a/Art/Star/index.html b/Art/Star/index.html new file mode 100644 index 000000000..a7fdec67f --- /dev/null +++ b/Art/Star/index.html @@ -0,0 +1,37 @@ + + + + + Triangle CSS + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Art/Star/screenshot.png b/Art/Star/screenshot.png new file mode 100644 index 000000000..08251e2f7 Binary files /dev/null and b/Art/Star/screenshot.png differ diff --git a/Art/Star/style.css b/Art/Star/style.css new file mode 100644 index 000000000..477bcac8a --- /dev/null +++ b/Art/Star/style.css @@ -0,0 +1,225 @@ +.bc1{ + animation: bc1; + animation-duration: 45s; + animation-iteration-count: infinite; + position: fixed; + width: 200px; + height: 200px; + top:-100%; right:-100%; left:-100%; bottom:-100%; + margin:auto; + z-index:0; + background-color: black; +} +.wc1{ + animation: wc1; + animation-duration: 6s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 186px; + height: 186px; + background-color: white; +} +.bc2{ + animation: bc2; + animation-duration: 9s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 172px; + height: 172px; + background-color: black; +} +.wc2{ + animation: wc2; + animation-duration: 12s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 158px; + height: 158px; + background-color: white; +} +.bc3{ + animation: bc3; + animation-duration: 15s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 144px; + height: 144px; + background-color: black; +} +.wc3{ + animation: wc3; + animation-duration: 18s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 130px; + height: 130px; + background-color: white; +} +.bc4{ + animation: bc4; + animation-duration: 21s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 116px; + height: 116px; + background-color: black; +} +.wc4{ + animation: wc4; + animation-duration: 24s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 102px; + height: 102px; + background-color: white; + } +.bc5{ + animation: bc5; + animation-duration: 27s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 88px; + height: 88px; + background-color: black; +} +.wc5{ + animation: wc5; + animation-duration: 30s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 74px; + height: 74px; + background-color: white; + } +.bc6{ + animation: bc6; + animation-duration: 33s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 60px; + height: 60px; + background-color: black; +} +.wc6{ + animation: wc6; + animation-duration: 36s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 46px; + height: 46px; + background-color: white; + } +.bc7{ + animation: bc7; + animation-duration: 39s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 32px; + height: 32px; + background-color: black; +} +.wc7{ + animation: wc7; + animation-duration: 42s; + animation-iteration-count: infinite; + position: relative; + top: 7px; + left: 7px; + width: 18px; + height: 18px; + background-color: white; + } +@keyframes bc1 { + 50% { + transform: rotate(360deg); + } +} +@keyframes wc1 { + 100% { + transform: rotate(-360deg); + } +} +@keyframes bc2 { + 100% { + transform: rotate(360deg); + } +} +@keyframes wc2 { + 100% { + transform: rotate(-360deg); + } +} +@keyframes bc3 { + 100% { + transform: rotate(360deg); + } +} +@keyframes wc3 { + 100% { + transform: rotate(-360deg); + } +} +@keyframes bc4 { + 100% { + transform: rotate(360deg); + } +} +@keyframes wc4 { + 100% { + transform: rotate(-360deg); + } +} +@keyframes bc5 { + 100% { + transform: rotate(360deg); + } +} +@keyframes wc5 { + 100% { + transform: rotate(-360deg); + } +} +@keyframes bc6 { + 100% { + transform: rotate(360deg); + } +} +@keyframes wc6 { + 100% { + transform: rotate(-360deg); + } +} +@keyframes bc7 { + 100% { + transform: rotate(360deg); + } +} +@keyframes wc7 { + 100% { + transform: rotate(-360deg); + } +} \ No newline at end of file diff --git a/include.js b/include.js index 0a6684478..42795b49f 100644 --- a/include.js +++ b/include.js @@ -6533,6 +6533,13 @@ let cards = [ author: 'Marion', githubLink: 'https://github.com/marionjudy13' }, + { + artName: 'Star', + pageLink: './Art/Joy/Star/index.html', + imageLink: './Art/Joy/Star/screenshot.png', + author: 'Yapakazul', + githubLink: 'https://github.com/Yapakazul' + }, { artName: 'Spinning Button', pageLink: './Art/nfluk/index.html',