From 8650ec2a5612a1002c022eb805574a2c5f0a200b Mon Sep 17 00:00:00 2001 From: Whykioh Date: Sat, 11 Jul 2026 03:50:53 +0200 Subject: [PATCH] Fix again --- css/style.css | 102 ++++++++++++++------------------------------------ index.php | 4 +- 2 files changed, 30 insertions(+), 76 deletions(-) diff --git a/css/style.css b/css/style.css index e714dca..d5bac9d 100644 --- a/css/style.css +++ b/css/style.css @@ -4,83 +4,41 @@ --glass-light: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.25); --accent-yellow: #fcd53f; - --accent-blue: #3ecaf8; } body { font-family: 'Noto Sans', sans-serif; background-color: var(--bg-color); - 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%); + 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; } -/* --- Conteneurs principaux avec Réfraction --- */ +/* Containers */ .container { 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 var(--glass-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); position: relative; - z-index: 1; - overflow: hidden; width: 80%; margin: 40px auto; padding: 40px; } -/* Le cœur de la réfraction : seulement pour .container */ -.container::before { - 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; -} - -/* --- Footer : style simplifié (sans réfraction) pour éviter le cadre --- */ -div.footer { - background: rgba(10, 25, 47, 0.2); /* Fond un peu plus opaque pour compenser */ - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-radius: 30px; - border: 1px solid var(--glass-border); - /* Pas d'ombre, pas de ::before de réfraction */ - position: relative; - width: 80%; - margin: 40px auto; - padding: 20px; - display: flex; - justify-content: center; - align-items: center; -} - -/* --- Video Container : PROPRE 16:9 --- */ +/* Video */ .video-container { - margin: 40px auto; width: 80%; - /* IMPORTANT : On garde le ratio 16:9 et on supprime la réfraction */ + margin: 40px auto; + aspect-ratio: 16 / 9; position: relative; overflow: hidden; - height: 0; - padding-bottom: 56.25%; /* Ratio 16:9 */ border-radius: 25px; border: 1px solid var(--glass-border); background: rgba(0, 0, 0, 0.5); - /* PAS de ::before de réfraction pour ne pas casser le ratio ni créer de cadre */ } .video-container iframe { @@ -92,7 +50,7 @@ div.footer { border: none; } -/* --- Header & Logo --- */ +/* Header & Logo */ header { text-align: left; margin-bottom: 40px; @@ -100,13 +58,11 @@ header { } .logo { - /* Logo beaucoup plus gros */ height: 128px; width: 128px; display: inline-block; vertical-align: middle; margin-right: 20px; - /* Style verre */ background: var(--glass-light); backdrop-filter: blur(10px); border-radius: 25px; @@ -116,52 +72,50 @@ header { .title { display: inline-block; - /* Titre ajusté en conséquence */ font-size: 64px; - line-height: 128px; /* Aligné sur la hauteur du logo */ + line-height: 128px; vertical-align: middle; color: #fff; font-weight: 800; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); -} - -/* --- Navigation (inchangé, parfait selon vos dires) --- */ -.nav { - text-align: center; - margin: 40px 0; } +/* Navigation Buttons */ .nav a { text-decoration: none; color: #fff; padding: 15px 35px; margin: 0 10px; - 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; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); - 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; + border: 1px solid var(--glass-border); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; display: inline-block; } .nav a:hover { background-color: var(--accent-yellow); color: var(--deep-blue); - border-color: transparent; - box-shadow: - 0 0 30px var(--accent-yellow), - inset 0 0 10px rgba(255, 255, 255, 0.5); - transform: translateY(-3px); - cursor: pointer; + border-color: var(--accent-yellow); + box-shadow: 0 0 20px var(--accent-yellow); + transform: translateY(-2px); } -/* --- Image Flash --- */ +/* Footer */ +div.footer { + background: rgba(10, 25, 47, 0.2); + backdrop-filter: blur(10px); + border-radius: 30px; + border: 1px solid var(--glass-border); + width: 80%; + margin: 40px auto; + padding: 20px; + display: flex; + justify-content: center; +} + +/* Flash Image */ img.flash { display: inline-block; width: 128px; diff --git a/index.php b/index.php index a04441f..3e8593b 100644 --- a/index.php +++ b/index.php @@ -2,7 +2,7 @@ - + Whykioh.fr - Mon Portefolio @@ -23,7 +23,7 @@


-

Bienvenue Whykioh.fr !

+

Bienvenue sur 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 :