diff --git a/Art/raonycavalcante-Brazilian-flag/index.html b/Art/raonycavalcante-Brazilian-flag/index.html new file mode 100644 index 000000000..d9125f580 --- /dev/null +++ b/Art/raonycavalcante-Brazilian-flag/index.html @@ -0,0 +1,20 @@ + + + + + + Brazilian Flag Animation + + + +
+
+
+
+
+
+
+
+
+ + diff --git a/Art/raonycavalcante-Brazilian-flag/meta.json b/Art/raonycavalcante-Brazilian-flag/meta.json new file mode 100644 index 000000000..f0f50155d --- /dev/null +++ b/Art/raonycavalcante-Brazilian-flag/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Brazilian-flag", + "githubHandle": "raonycavalcante" + } \ No newline at end of file diff --git a/Art/raonycavalcante-Brazilian-flag/styles.css b/Art/raonycavalcante-Brazilian-flag/styles.css new file mode 100644 index 000000000..0380af8bc --- /dev/null +++ b/Art/raonycavalcante-Brazilian-flag/styles.css @@ -0,0 +1,68 @@ +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #87CEEB; /* Sky background */ + } + + .flag { + position: relative; + width: 300px; + height: 200px; + animation: wave 2s infinite linear; + overflow: hidden; + } + + .green { + position: absolute; + width: 100%; + height: 100%; + background-color: #009C3B; + } + + .yellow { + position: absolute; + top: 25%; + left: 15%; + width: 70%; + height: 50%; + background-color: #FFDF00; + transform: rotate(45deg); + } + + .blue { + position: absolute; + top: 50%; + left: 50%; + width: 50%; + height: 50%; + background-color: #002776; + border-radius: 50%; + transform: translate(-50%, -50%); + } + + .circle { + position: absolute; + top: 50%; + left: 50%; + width: 60%; + height: 60%; + border: 2px solid #fff; + border-radius: 50%; + transform: translate(-50%, -50%); + } + + @keyframes wave { + 0% { + transform: rotate(0) skewX(0) scaleY(1); + } + 50% { + transform: rotate(-1deg) skewX(-5deg) scaleY(1.1); + } + 100% { + transform: rotate(0) skewX(0) scaleY(1); + } + } + \ No newline at end of file