Skip to content

Commit

Permalink
Merge pull request #1716 from Yapakazul/Star
Browse files Browse the repository at this point in the history 
Adding Art to the project
  • Loading branch information
@l-white
l-white committed Sep 8, 2023
2 parents ff458ab + 2a6b58a commit 788a819
Show file tree
Hide file tree
Showing 4 changed files with 269 additions and 0 deletions.
37 changes: 37 additions & 0 deletions Art/Star/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Triangle CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bc1">
<div class="wc1">
<div class="bc2">
<div class="wc2">
<div class="bc3">
<div class="wc3">
<div class="bc4">
<div class="wc4">
<div class="bc5">
<div class="wc5">
<div class="bc6">
<div class="wc6">
<div class="bc7">
<div class="wc7"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Binary file added Art/Star/screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
225 changes: 225 additions & 0 deletions Art/Star/style.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
7 changes: 7 additions & 0 deletions include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit 788a819

Please sign in to comment.