Skip to content

Commit 279c0a5

Browse files
raonycavalcanteraonycavalcante
authored
just adding my art to the project (#2893)
1 parent 1fefe52 commit 279c0a5

File tree

3 files changed

+92
-0
lines changed

3 files changed

+92
-0
lines changed

‎Art/raonycavalcante-Brazilian-flag/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>Brazilian Flag Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="flag">
11+
<div class="green">
12+
<div class="yellow">
13+
<div class="blue">
14+
<div class="circle"></div>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
</body>
20+
</html>

‎Art/raonycavalcante-Brazilian-flag/meta.json

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

‎Art/raonycavalcante-Brazilian-flag/styles.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
background-color: #87CEEB; /* Sky background */
8+
}
9+
10+
.flag {
11+
position: relative;
12+
width: 300px;
13+
height: 200px;
14+
animation: wave 2s infinite linear;
15+
overflow: hidden;
16+
}
17+
18+
.green {
19+
position: absolute;
20+
width: 100%;
21+
height: 100%;
22+
background-color: #009C3B;
23+
}
24+
25+
.yellow {
26+
position: absolute;
27+
top: 25%;
28+
left: 15%;
29+
width: 70%;
30+
height: 50%;
31+
background-color: #FFDF00;
32+
transform: rotate(45deg);
33+
}
34+
35+
.blue {
36+
position: absolute;
37+
top: 50%;
38+
left: 50%;
39+
width: 50%;
40+
height: 50%;
41+
background-color: #002776;
42+
border-radius: 50%;
43+
transform: translate(-50%, -50%);
44+
}
45+
46+
.circle {
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
width: 60%;
51+
height: 60%;
52+
border: 2px solid #fff;
53+
border-radius: 50%;
54+
transform: translate(-50%, -50%);
55+
}
56+
57+
@keyframes wave {
58+
0% {
59+
transform: rotate(0) skewX(0) scaleY(1);
60+
}
61+
50% {
62+
transform: rotate(-1deg) skewX(-5deg) scaleY(1.1);
63+
}
64+
100% {
65+
transform: rotate(0) skewX(0) scaleY(1);
66+
}
67+
}
68+

0 commit comments

Comments
 (0)