adding my art to project (#2928)

Steveo1975 · LaurelineP · web-flow · commit 06fd05150ec5 · 2025-04-21T09:38:19.000+02:00
* adding my art to project

* [ PR maintenance ] Fix and correct PR to close it

---------

Co-authored-by: Laureline &lt;laurelinedev@gmail.com&gt;
Co-authored-by: Laureline Paris &lt;32878345+LaurelineP@users.noreply.github.com&gt;
diff --git a/Art/Steveo1975-Animation-Choas/index.html b/Art/Steveo1975-Animation-Choas/index.html
@@ -0,0 +1,37 @@
+	<!DOCTYPE html>
+	<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
+		<link rel="stylesheet" type="text/css" href="styles.css">
+		
+    
+		
+		
+		<title>Animation-Nation</title>
+</head>
+	<body>
+		<h1 class="position">Animation Chaos !</h1>
+		<div class="container">	
+			<div class="circle"></div>
+			<div class="square"></div> 
+			<span class="triangle"></span> 
+		</div>
+	</body>
+	</html>
+
+
+
+
+
+
+
+
+
+
+		
+	
+
diff --git a/Art/Steveo1975-Animation-Choas/meta.json b/Art/Steveo1975-Animation-Choas/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "Animation-Choas",
+  "githubHandle": "Steveo1975"
+}
diff --git a/Art/Steveo1975-Animation-Choas/styles.css b/Art/Steveo1975-Animation-Choas/styles.css
@@ -0,0 +1,99 @@
+
+ body {
+    background-color: red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+h1 {
+	font-family: "Bangers", serif;
+	font-weight: 400;
+	font-style: normal;
+	color: black;
+	text-shadow: 3px 3px 5px grey;
+    font-size: 500%;
+}	
+
+
+.position {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	text-align: center;
+	width: 100%;
+}				
+
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+}
+
+ .circle {
+	background-color: purple;
+	width: 200px;
+	height: 200px;
+	border-radius: 50%;
+	animation:bounce 2s ease 20;
+}
+	
+
+@keyframes bounce {
+0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+40%{transform: translateY(-50px);} 
+60%{transform: translateY(-50px);}
+}
+	
+
+
+
+.square {
+	background-color: blue;
+	width: 200px;
+	height: 200px;
+	animation:pulse 2s 20; 
+}
+@keyframes pulse {
+	0%,
+	100% {
+		transform: rotate(-45deg) scale(1);
+	}
+	50% {
+		transform: rotate(-45deg) scale(1.5);
+	}
+}
+
+
+
+
+.triangle {
+	width: 0;
+	height: 0;
+	border-bottom: 200px solid green;
+	border-left: 100px solid transparent;
+	border-right: 100px solid transparent;
+	animation-duration: 2s;
+	animation-name: spin;
+	animation-timing-function: ease-in-out;
+	animation-delay: 1s;
+	animation-iteration-count: 20;
+	animation-direction:normal;
+	animation-fill-mode:forwards; ;
+}
+
+@keyframes spin {
+	100% {
+	transform: rotate(360deg);
+	}
+}
+
+
+
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "Animation-Choas",
 +  "githubHandle": "Steveo1975"
 +}