Add animated DevOps welcome website

style.css

@@ -0,0 +1,174 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Arial, sans-serif;
+}
+
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+}
+
+body {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(0, 180, 255, 0.22), transparent 30%),
+    radial-gradient(circle at 85% 25%, rgba(255, 70, 210, 0.18), transparent 32%),
+    radial-gradient(circle at 45% 90%, rgba(255, 85, 0, 0.14), transparent 28%),
+    linear-gradient(135deg, #02051f 0%, #070b35 50%, #020617 100%);
+  color: white;
+  overflow: hidden;
+}
+
+.hero {
+  width: 100%;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.card {
+  width: min(440px, 92vw);
+  min-height: 470px;
+  padding: 38px 34px;
+  text-align: center;
+  border-radius: 30px;
+  background: rgba(255, 255, 255, 0.075);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    0 0 55px rgba(0, 180, 255, 0.18),
+    0 0 90px rgba(255, 64, 214, 0.10),
+    0 28px 80px rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  animation: cardEnter 0.8s ease-out both, cardFloat 6s ease-in-out infinite;
+  will-change: transform;
+}
+
+.logo {
+  width: 135px;
+  height: 135px;
+  object-fit: cover;
+  object-position: center;
+  margin-bottom: 26px;
+  border-radius: 24px;
+  box-shadow:
+    0 0 28px rgba(0, 180, 255, 0.35),
+    0 0 45px rgba(255, 64, 214, 0.22);
+  animation: logoPulse 4s ease-in-out infinite;
+  will-change: transform, filter;
+}
+
+.tag {
+  display: inline-block;
+  margin-bottom: 18px;
+  padding: 8px 18px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #00c8ff, #245bff, #ff45d4, #ff3b1f);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  box-shadow: 0 0 24px rgba(255, 64, 214, 0.32);
+}
+
+h1 {
+  font-size: clamp(34px, 5vw, 44px);
+  line-height: 1.1;
+  margin-bottom: 16px;
+  background: linear-gradient(90deg, #ffffff, #b8f4ff, #ffd1f6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+p {
+  font-size: 18px;
+  color: #dbeafe;
+}
+
+.background-shape {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(8px);
+  opacity: 0.55;
+  z-index: -1;
+  will-change: transform;
+}
+
+.shape-1 {
+  width: 260px;
+  height: 260px;
+  top: 12%;
+  left: 8%;
+  background: linear-gradient(135deg, #00c8ff, #245bff);
+  animation: moveOne 14s ease-in-out infinite alternate;
+}
+
+.shape-2 {
+  width: 310px;
+  height: 310px;
+  right: 7%;
+  bottom: 8%;
+  background: linear-gradient(135deg, #ff3b1f, #ff45d4);
+  animation: moveTwo 16s ease-in-out infinite alternate;
+}
+
+@keyframes cardEnter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 28px, 0) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes cardFloat {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -8px, 0);
+  }
+}
+
+@keyframes logoPulse {
+  0%,
+  100% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.35));
+  }
+  50% {
+    transform: scale(1.035);
+    filter: drop-shadow(0 0 18px rgba(255, 64, 214, 0.45));
+  }
+}
+
+@keyframes moveOne {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(60px, 45px, 0);
+  }
+}
+
+@keyframes moveTwo {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-65px, -55px, 0);
+  }
+}