diff --git a/index.html b/index.html new file mode 100644 index 0000000..9c1b244 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + Groupe RIF | DevOps Team + + + +
+
+ +
+
+ + Groupe RIF +

Hello DevOps Team

+

Welcome to the Gitea workshop.

+
+
+ + \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..56447af Binary files /dev/null and b/logo.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..4413c34 --- /dev/null +++ b/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); + } +} \ No newline at end of file