From b86f81dc5eafa0153475ebe98eff5f8c31f8358c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Wed, 9 Apr 2025 18:08:57 +0400 Subject: [PATCH] improve footer --- css/styles.css | 80 ++++++++++++++++++++++++++++++++++++++++++--- includes/footer.php | 63 ++++++++++++++++++++++++++++------- 2 files changed, 127 insertions(+), 16 deletions(-) diff --git a/css/styles.css b/css/styles.css index 6b7aef3..16cd0a9 100644 --- a/css/styles.css +++ b/css/styles.css @@ -597,16 +597,74 @@ img { /* Footer */ .footer { margin-top: 40px; + margin-left: 250px; + width: calc(100% - 250px); padding: 30px 20px; background-color: var(--footer-bg); text-align: center; - width: 100%; box-sizing: border-box; align-self: stretch; } +.footer-columns { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + text-align: left; + margin-bottom: 30px; +} + +.footer-column { + flex: 1; + min-width: 200px; + padding: 0 15px; + margin-bottom: 20px; +} + +.footer-column:first-child { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.footer-title { + font-size: 18px; + font-weight: 600; + margin-bottom: 15px; + color: #333; +} + +.footer-links { + list-style-type: none; + padding: 0; + margin: 0; +} + +.footer-links li { + margin-bottom: 8px; +} + +.footer-links a { + color: #555; + text-decoration: none; + font-size: 14px; + transition: color 0.2s; +} + +.footer-links a:hover { + color: var(--primary-red); +} + +.footer-copyright { + padding-top: 20px; + border-top: 1px solid #e0e0e0; + font-size: 14px; + color: #666; +} + .footer-logo { margin-bottom: 20px; + align-self: flex-start; } .footer-logo img { @@ -615,12 +673,13 @@ img { .footer-social { display: flex; - justify-content: center; + justify-content: flex-start; margin-bottom: 20px; + align-self: flex-start; } .footer-social a { - margin: 0 10px; + margin: 0 10px 0 0; font-size: 24px; color: var(--text-color); } @@ -629,10 +688,12 @@ img { font-size: 18px; font-weight: 600; margin-bottom: 10px; + align-self: flex-start; } .footer-email { font-size: 16px; + align-self: flex-start; } /* Dark Mode Toggle */ @@ -690,7 +751,7 @@ img { width: 70px; } - .main-content { + .main-content, .footer { margin-left: 70px; width: calc(100% - 70px); } @@ -747,7 +808,7 @@ img { display: none; } - .main-content { + .main-content, .footer { margin-left: 0; width: 100%; } @@ -796,6 +857,15 @@ img { .hero-logo { font-size: 40px; } + + .footer-columns { + flex-direction: column; + } + + .footer-column { + text-align: center; + margin-bottom: 30px; + } } @media (max-width: 992px) { diff --git a/includes/footer.php b/includes/footer.php index 4267727..069ca2e 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -1,17 +1,58 @@
-