From dc68d20a85aadd1e29b3a947b4d1173fda2ae321 Mon Sep 17 00:00:00 2001 From: Whykioh Date: Sat, 11 Jul 2026 03:19:42 +0200 Subject: [PATCH] Restyle website --- css/style.css | 196 +++++++++++++++++++++++++++++++++++--------------- index.php | 31 +++----- 2 files changed, 148 insertions(+), 79 deletions(-) diff --git a/css/style.css b/css/style.css index 686f561..4d0cefd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,82 +1,160 @@ +/* Variables pour les couleurs */ +:root { + --bg-color: #050b16; + --deep-blue: #0a192f; + --glass-light: rgba(255, 255, 255, 0.08); + --glass-border: rgba(255, 255, 255, 0.25); + --accent-yellow: #fcd53f; /* Jaune plus lumineux */ + --accent-blue: #3ecaf8; /* Bleu plus lumineux pour les bordures */ +} + body { font-family: 'Noto Sans', sans-serif; - background-color: #333; - color: #fff; -} -.container { - width: 80%; - margin: auto; - border: 2px solid #2ecccc; - border-radius: 25px; + background-color: var(--bg-color); + /* Arrière-plan complexe pour rendre la réfraction visible */ + background-image: + radial-gradient(at 10% 10%, rgba(10, 25, 47, 0.8) 0px, transparent 50%), + radial-gradient(at 90% 90%, rgba(62, 202, 248, 0.15) 0px, transparent 50%), + linear-gradient(135deg, #050b16 0%, #1a3c6f 100%); + color: #e6f1ff; + min-height: 100vh; + margin: 0; padding: 20px; - background-color: #444; } + +/* Style de base pour tous les éléments "verre" */ +.glass-effect { + background: var(--glass-light); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border-radius: 30px; /* Bords plus adoucis */ + border: 1px solid var(--glass-border); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); + position: relative; + z-index: 1; + overflow: hidden; +} + +/* Le cœur de la réfraction : un pseudo-élément qui déforme l'arrière-plan */ +.glass-effect::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + /* Copie l'arrière-plan de la page */ + background: inherit; + /* Applique un filtre de distorsion (ici une légère ondulation) */ + filter: blur(5px) brightness(1.1) contrast(0.9); + /* Décale légèrement le contenu pour l'effet de réfraction */ + transform: scale(1.05) translate(-2px, -2px); + z-index: -1; + border-radius: inherit; +} + +/* Application du style aux conteneurs */ +.container, div.footer, .video-container { + @extend .glass-effect; /* Si vous utilisez SASS, sinon copier les propriétés */ + /* Propriétés copiées pour le rendu final : */ + background: rgba(10, 25, 47, 0.08); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border-radius: 30px; + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); + position: relative; + z-index: 1; + overflow: hidden; + + width: 80%; + margin: 40px auto; /* Espacement augmenté */ + padding: 40px; +} + +.container::before, div.footer::before, .video-container::before { + /* Pseudo-élément de réfraction appliqué */ + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; + background: inherit; filter: blur(5px) brightness(1.1) contrast(0.9); + transform: scale(1.05) translate(-2px, -2px); z-index: -1; border-radius: inherit; +} + +/* Cas spécifique pour la vidéo (pas de padding-bottom, on fixe la taille) */ +.video-container { + padding: 0; + height: 0; + padding-bottom: 56.25%; +} + +.video-container iframe { + position: absolute; + top: 0; left: 0; width: 100%; height: 100%; + border: none; /* Suppression de la bordure de l'iframe */ +} + +/* Navigation : Style Bouton Liquide 3D */ .nav a { text-decoration: none; color: #fff; - padding: 10px 20px; - border: 2px solid #2ecccc; - border-radius: 25px; - background-color: #333; - transition: all 0.3s ease-in-out; + padding: 15px 35px; + margin: 0 10px; + + /* Bordure déformée et animée (technique border-image) */ + border: 4px solid transparent; + border-image: repeating-linear-gradient(45deg, var(--accent-yellow) 0%, var(--accent-blue) 10%, var(--accent-yellow) 20%) 1; + border-radius: 50px; /* Forme pilule */ + + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + + /* Effet de biseau interne pour le côté 3D */ + box-shadow: + inset 0 2px 0 rgba(255, 255, 255, 0.3), + inset 0 -2px 0 rgba(0, 0, 0, 0.2), + 0 5px 15px rgba(0, 0, 0, 0.3); + + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + font-weight: 600; + display: inline-block; } + .nav a:hover { - background-color: #2ecccc; - color: #333; + /* Au survol : le bouton s'illumine et la bordure "coule" plus vite */ + background-color: var(--accent-yellow); + color: var(--deep-blue); + border-color: transparent; /* Cache la bordure d'origine */ + box-shadow: + 0 0 30px var(--accent-yellow), /* Glow externe */ + inset 0 0 10px rgba(255, 255, 255, 0.5); /* Highlight interne */ + transform: translateY(-3px); /* Lévitation */ cursor: pointer; - transition: all 0.3s ease-in-out; } -.video-container { - margin: 20px auto; - border: 2px solid #2ecccc; - border-radius: 25px; - overflow: hidden; - padding-bottom: 56.25%; - position: relative; -} -.video-container iframe { - position: absolute; - top: 0; - left: 0; -} +header { text-align: left; margin-bottom: 40px; } -header { - text-align: left; -} .logo { - height: 60px; - width: 60px; - display: inline-block; - vertical-align: middle; - margin-right: 10px; + height: 60px; width: 60px; + display: inline-block; vertical-align: middle; margin-right: 20px; + /* Le logo est lui-même un élément de verre */ + @extend .glass-effect; + padding: 5px; + border-radius: 15px; } + .title { - display: inline-block; - font-size: 48px; - line-height: 60px; - vertical-align: middle; -} - -div.footer { - width: 80%; - margin: auto; - border: 2px solid #2ecccc; - border-radius: 25px; - padding: 20px; - background-color: #444; - display: flex; - justify-content: center; - align-items: center; + display: inline-block; font-size: 56px; line-height: 60px; vertical-align: middle; + color: #fff; font-weight: 800; + text-shadow: 0 2px 10px rgba(0,0,0,0.5); } +/* Image Flash : Effet de zoom avec ombre colorée */ img.flash { display: inline-block; width: 128px; - transition: 0.4s; -}; + transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); + border-radius: 15px; + filter: drop-shadow(0 0 0px var(--accent-yellow)); +} img.flash:hover { - transition: 0.4s; - width: 800px -}; \ No newline at end of file + width: 800px; + /* L'ombre devient un halo lumineux lors de l'agrandissement */ + filter: drop-shadow(0 10px 30px var(--accent-yellow)); +} \ No newline at end of file diff --git a/index.php b/index.php index c518837..10d8721 100644 --- a/index.php +++ b/index.php @@ -4,7 +4,7 @@ - Whykioh.fr + Whykioh.fr - Mon Portefolio
@@ -12,36 +12,27 @@ -

WhyKorp

+

Whykioh.fr

- Accueil - Infos - Link Tree - Outils - Ruty - LoLivator - JPC - Archives + Ko-Fi + WatchGether + GameL0ver + Jellyfin + Viens On Jette


-

Bienvenue sur le site officiel de la WhyKorp !

-

Vous y trouverez tout sur Whykioh aka Noah, et la WhyKorp.
Attention ! Site en cours de développement !
Si un disfonctionnement est trouvé veuillez le signaler.

-
-

Flash Info !

-
-

Noah a enfin terminé l'EP 4 Elements,
il sera disponible sur toutes les plateformes
le 25 Décembre 2023

- -
+

Bienvenue Whykioh.fr !

+

Le centre de tous mes projets webs, applications, et autres.
N'hésitez pas à explorer ! Mais aussi à me soutenir via un avis, ou un don.

Voici la dernière vidéo de Whykioh :

- +
- Copyright | Whykorp® 2021-2024 | ajoute le nom du site après l'url et un / + Copyright | Whykioh® 2021-2026 | CIBOT NOËL Noah | Ko-fi