add my animation (#2945)

ruthberkowicz · LaurelineP · web-flow · commit d9d19e6bc61d · 2025-05-19T08:26:55.000+02:00
Co-authored-by: Laureline Paris &lt;32878345+LaurelineP@users.noreply.github.com&gt;
diff --git a/Art/ruthberkowicz-airwords/index.html b/Art/ruthberkowicz-airwords/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Airwords</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="floating-area">
+    <span style="--i:0;">💡 Create</span>
+    <span style="--i:1;">🧠 Learn</span>
+    <span style="--i:2;">⚙️ Build</span>
+    <span style="--i:3;">🧪 Experiment</span>
+    <span style="--i:4;">🚀 Deploy</span>
+    <span style="--i:5;">💻 Code</span>
+    <span style="--i:6;">🌐 API</span>
+    <span style="--i:7;">🎨 Design</span>
+  </div>
+</body>
+</html> 
+
diff --git a/Art/ruthberkowicz-airwords/meta.json b/Art/ruthberkowicz-airwords/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "airwords",
+  "githubHandle": "ruthberkowicz"
+}
diff --git a/Art/ruthberkowicz-airwords/styles.css b/Art/ruthberkowicz-airwords/styles.css
@@ -0,0 +1,68 @@
+ body {
+  margin: 0;
+  background: linear-gradient(to bottom, #f0f4ff, #dbefff);
+  height: 100vh;
+  overflow: hidden;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.floating-area {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.floating-area span {
+  position: absolute;
+  bottom: -50px;
+  left: calc(5vw + var(--i) * 11vw);
+  font-size: clamp(1rem, 1.2vw + 0.5rem, 2rem);
+  font-weight: bold;
+  padding: 0.5em 1em;
+  border-radius: 30px;
+  background-color: hsla(calc(var(--i) * 45), 70%, 85%, 0.3);
+  color: hsl(calc(var(--i) * 45), 80%, 50%);
+  backdrop-filter: blur(3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  animation: floatUp 8s ease-in-out infinite;
+  animation-delay: calc(var(--i) * 0.6s);
+  opacity: 0;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  white-space: nowrap;
+  max-width: 90vw;
+}
+
+@keyframes floatUp {
+  0% {
+    transform: translateY(0px) scale(1);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  50% {
+    transform: translateY(-40vh) scale(1.05) rotate(1deg);
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-120vh) scale(1);
+    opacity: 0;
+  }
+}
+
+.floating-area span:hover {
+  transform: scale(1.2);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+} 
+
+
+
+
+
+
+
+
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "airwords",
 +  "githubHandle": "ruthberkowicz"
 +}