From f4834afbcfded4334cff562f523acbf2873d41a3 Mon Sep 17 00:00:00 2001 From: estellon Date: Tue, 30 Jul 2024 16:49:02 +0200 Subject: [PATCH] yannick_html --- pong/static/index.html | 35 +++++++++ pong/static/logo-42-perpignan.png | Bin 0 -> 5912 bytes pong/static/styles.css | 118 +++++++++++++++++++++++++++++- 3 files changed, 149 insertions(+), 4 deletions(-) create mode 100644 pong/static/logo-42-perpignan.png diff --git a/pong/static/index.html b/pong/static/index.html index 1aad5b6..07a0e9b 100644 --- a/pong/static/index.html +++ b/pong/static/index.html @@ -6,8 +6,27 @@ Pong Game + +
+
+
+ +
+
+
+
+
+
+
+
+ +
+

BIENVENUE DANS LE PONG 42

+
@@ -25,6 +44,7 @@
+
+ diff --git a/pong/static/logo-42-perpignan.png b/pong/static/logo-42-perpignan.png new file mode 100644 index 0000000000000000000000000000000000000000..d91cd1fdf1da6f33dbc52a7600762b165c1424f3 GIT binary patch literal 5912 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 literal 0 HcmV?d00001 diff --git a/pong/static/styles.css b/pong/static/styles.css index 1dfd64b..c07dbd0 100644 --- a/pong/static/styles.css +++ b/pong/static/styles.css @@ -1,15 +1,17 @@ /* General styles */ -body { +body, html { font-family: Arial, sans-serif; - color: #ffffff; - background-color: #000000; + color: #00ffff; + background-color: #0a0a2a; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; - height: 100vh; + height: 100%; + overflow: hidden; + } label { @@ -111,3 +113,111 @@ button { border-radius: 50%; position: absolute; } + +.logo { + position: absolute; + top: 20px; + left: 20px; + font-size: 3rem; + color: #00ffff; + text-shadow: 0 0 15px #00ffff; + z-index: 20; +} + +.stars { + position: absolute; + width: 100%; + height: 100%; +} + +.star { + position: absolute; + background-color: #ffffff; + border-radius: 50%; + animation: twinkle 2s infinite alternate; +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; +} + +.pong-elements { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 5; + pointer-events: none; +} + +.paddle { + position: absolute; + width: 20px; + height: 100px; + background-color: #00ffff; + border-radius: 10px; + box-shadow: 0 0 15px #00ffff; +} + +.paddle-left { + left: 50px; + animation: paddleMove 5s infinite alternate ease-in-out; +} + +.paddle-right { + right: 50px; + animation: paddleMove 4s infinite alternate-reverse ease-in-out; +} + +.ball_anim { + position: absolute; + width: 30px; + height: 30px; + background-color: #00ffff; + border-radius: 50%; + box-shadow: 0 0 20px #00ffff; + left: 80px; + top: 50%; + transform-style: preserve-3d; + animation: ballMove 3s linear infinite; +} + +@keyframes paddleMove { + 0% { transform: translateY(10vh); } + 100% { transform: translateY(70vh); } +} + +@keyframes ballMove { + 0% { + transform: translateZ(0) scale(1); + } + 50% { + transform: translateZ(-500px) scale(0.5); + } + 100% { + transform: translateZ(0) scale(1); + } +} + +.input-container { + margin-bottom: 2rem; +} + +.container { + text-align: center; + background-color: rgba(0, 0, 40, 0.8); + padding: 3rem; + border-radius: 15px; + border: 3px solid #00ffff; + box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff; + position: relative; + z-index: 10; + max-width: 80%; +} \ No newline at end of file