Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

violin87-activeSquares #2791

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
+152 −1
Open

violin87-activeSquares #2791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
054d818
My AnimationPeroject
violin87 Oct 10, 2024
f9a1fe2
Rename foulder
violin87 Oct 10, 2024
1edd804
I did required changes to be qualify for submission
violin87 Oct 12, 2024
e5c0ec4
Update styles.css
LaurelineP Oct 13, 2024
70fb3a4
Removeds screenshot file
violin87 Oct 19, 2024
10ad0c5
Merge branch 'master' of https://github.com/violin87/Animation-Nation
violin87 Oct 19, 2024
0963386
revert accidental changes of other file
violin87 Oct 19, 2024
cd682d7
reversed changes
violin87 Oct 19, 2024
66ce7f2
Delete comment and changed identation
violin87 Oct 20, 2024
838bd90
Improved spacing
violin87 Oct 22, 2024
e8a286a
Merge branch 'master' into master
violin87 Oct 22, 2024
e0d8d16
I am added json. I am sorry it took this long
violin87 Oct 23, 2024
99ceab1
Merge branch 'master' of https://github.com/violin87/Animation-Nation
violin87 Oct 23, 2024
4cb86ca
Formatitng
violin87 Oct 23, 2024
9a961ba
Merge branch 'master' into master
LaurelineP Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Art/SumitDutta007-bubbles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,4 @@
100% {
bottom: 100%;
}
}
}
26 changes: 26 additions & 0 deletions Art/violin87-activeSquares/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Squares</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="squareBox">
<div class="squareSection1">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
<div class="squareSection2">
<div class="square4"></div>
<div class="square5"></div>
<div class="square6"></div>
</div>
</div>


</body>
</html>
4 changes: 4 additions & 0 deletions Art/violin87-activeSquares/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"artName": "activeSquares",
"githubHandle": "violin87"
}
121 changes: 121 additions & 0 deletions Art/violin87-activeSquares/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
.squareBox {
display: flex;
flex-direction: column;
background-color: aquamarine;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
gap: 10px;
width: 100vw;
height: 100vh;
animation-name: colorChange;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
position: relative;
}

.squareSection1, .squareSection2 {
display: flex;
justify-content: center;
width: 45%;
height: 45%;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}

.squareSection1 {
align-items: flex-end;
animation-name: moveSquares1;
}

.squareSection2 {
align-items: flex-start;
animation-name: moveSquare2;
}

.square1, .square2, .square3 {
animation: moveSquares1 3s infinite alternate;
}
.square4, .square5, .square6 {
animation: moveSquares2 3s infinite alternate;
}
.square1 {
background-color: black;
width: 30px;
height: 30px;
}
.square2 {
background-color: black;
width: 30px;
height: 30px;
}

.square3 {
background-color: black;
width: 30px;
height: 30px;
}
.square4 {
background-color: black;
width: 30px;
height: 30px;
}

.square5 {
background-color: black;
width: 30px;
height: 30px;
}

.square6 {
background-color: black;
width: 30px;
height: 30px;
}

@keyframes moveSquares1 {
0% {
transform: translateY(100%);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateY(-100%);
}
}

@keyframes moveSquares2 {
0% {
transform: translateY(-100%);
}
50% {
transform: translateX(-50%);
}
100% {
transform: translateY(100%);
}
}
@keyframes colorChange {

from{background-color: aquamarine;}
to{background-color: yellow;}
}















violin87 marked this conversation as resolved.
Show resolved Hide resolved