From a5c13207c14b73a8f47556301a1dc1713481822b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Wed, 9 Apr 2025 07:26:06 +0400 Subject: [PATCH] improve social media in header --- css/styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.php | 17 ++++++++++++++--- 2 files changed, 64 insertions(+), 3 deletions(-) diff --git a/css/styles.css b/css/styles.css index 50f5a91..100dd63 100644 --- a/css/styles.css +++ b/css/styles.css @@ -786,4 +786,54 @@ img { .video-title { font-size: 16px; } +} + +/* Styles pour le menu dropdown des réseaux sociaux */ +.more-social-container { + position: relative; +} + +.more-social-dropdown { + position: absolute; + top: 100%; + right: 0; + width: 180px; + background-color: var(--main-bg); + border-radius: 4px; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); + padding: 10px 0; + display: none; + z-index: 100; +} + +.more-social-container:hover .more-social-dropdown, +.more-social-toggle:focus + .more-social-dropdown, +.more-social-dropdown:hover { + display: block; +} + +.more-social-item { + display: flex; + align-items: center; + padding: 10px 15px; + font-size: 14px; + transition: background-color 0.2s; +} + +.more-social-item:hover { + background-color: rgba(0,0,0,0.05); +} + +.more-social-item i { + margin-right: 10px; + font-size: 18px; + color: var(--primary-red); + width: 20px; + text-align: center; +} + +@media (max-width: 1000px) { + .more-social-dropdown { + right: -15px; + } } \ No newline at end of file diff --git a/index.php b/index.php index 581b612..6722c6c 100644 --- a/index.php +++ b/index.php @@ -82,11 +82,22 @@
- - - +
+ +
+ + Facebook + + + YouTube + + + Twitter + +
+