Refactor footer and header components for improved structure and styling; add hover effect to social media links and update background color variable
This commit is contained in:
kelen-dev
parent
cd86540ca0
commit
a12da28c4f
5 changed files with 71 additions and 83 deletions
|
|
@ -1,21 +1,52 @@
|
|||
footer {
|
||||
color: white;
|
||||
background-color: var(--h-f-bg);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.footer-gris {
|
||||
background-color: #2c2c2c; /* Gris foncé personnalisé */
|
||||
.socialmedias {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.socialmedias a {
|
||||
background-color: white;
|
||||
text-decoration: none;
|
||||
margin-left: 1rem;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .6rem;
|
||||
transition: background-color .4s ease-in-out;
|
||||
}
|
||||
|
||||
.socialmedias a:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.flag-bar {
|
||||
height: 6px; /* épaisseur du trait */
|
||||
width: 100%; /* toute la largeur */
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#0055a4 0%, /* bleu */
|
||||
#0055a4 33.33%, /* 1/3 */
|
||||
#fff 33.33%, /* blanc */
|
||||
#fff 66.66%, /* 2/3 */
|
||||
#ef4135 66.66%, /* rouge */
|
||||
#ef4135 100%
|
||||
);
|
||||
height: 6px;
|
||||
/* épaisseur du trait */
|
||||
width: 100%;
|
||||
/* toute la largeur */
|
||||
background: linear-gradient(to right,
|
||||
#0055a4 0%,
|
||||
/* bleu */
|
||||
#0055a4 33.33%,
|
||||
/* 1/3 */
|
||||
#fff 33.33%,
|
||||
/* blanc */
|
||||
#fff 66.66%,
|
||||
/* 2/3 */
|
||||
#ef4135 66.66%,
|
||||
/* rouge */
|
||||
#ef4135 100%);
|
||||
margin-bottom: 8px;
|
||||
border-radius: 3px; /* optionnel, pour arrondir les bords */
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 3px;
|
||||
/* optionnel, pour arrondir les bords */
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -1,43 +1,16 @@
|
|||
<footer class="footer-gris text-white py-3">
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4 d-flex align-items-center text-start">
|
||||
<img
|
||||
src="/assets/Logo/favicon.png"
|
||||
alt="FencerJudge"
|
||||
height="50"
|
||||
class="me-2"
|
||||
/>
|
||||
<img src="/assets/Logo/favicon.png" alt="FencerJudge" height="50" class="me-2" />
|
||||
<span class="fs-4 fw-bold">FencerJudge</span>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4 offset-md-4 d-flex justify-content-end align-items-center"
|
||||
>
|
||||
<div class="socialmedias col-md-4 offset-md-4">
|
||||
<span class="me-3">Suivez-nous</span>
|
||||
<a
|
||||
href="https://x.com/ffescrime"
|
||||
class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
|
||||
style="width: 40px; height: 40px"
|
||||
><i class="bi bi-twitter-x text-dark"></i
|
||||
></a>
|
||||
<a
|
||||
href="https://www.facebook.com/ffescrime/"
|
||||
class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
|
||||
style="width: 40px; height: 40px"
|
||||
><i class="bi bi-facebook text-dark"></i
|
||||
></a>
|
||||
<a
|
||||
href="https://www.youtube.com/channel/UCSjeeZaP92mdOICSXsaGdiw"
|
||||
class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
|
||||
style="width: 40px; height: 40px"
|
||||
><i class="bi bi-youtube text-dark"></i
|
||||
></a>
|
||||
<a
|
||||
href="https://www.linkedin.com/company/ffescrime/"
|
||||
class="text-white d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
|
||||
style="width: 40px; height: 40px"
|
||||
><i class="bi bi-linkedin text-dark"></i
|
||||
></a>
|
||||
<a href="https://x.com/ffescrime"><i class="bi bi-twitter-x text-dark"></i></a>
|
||||
<a href="https://www.facebook.com/ffescrime/"><i class="bi bi-facebook text-dark"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCSjeeZaP92mdOICSXsaGdiw"><i class="bi bi-youtube text-dark"></i></a>
|
||||
<a href="https://www.linkedin.com/company/ffescrime/"><i class="bi bi-linkedin text-dark"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
|
|
@ -45,4 +18,4 @@
|
|||
</div>
|
||||
<div class="flag-bar" title="France"></div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
nav {
|
||||
background-color: var(--h-f-bg);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -7,6 +11,7 @@
|
|||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
|
|
@ -15,11 +20,13 @@
|
|||
}
|
||||
|
||||
.nav-link {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.active-link {
|
||||
color: #ffcc00 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,28 @@
|
|||
<!-- Navbar Bootstrap -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary-custom">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" routerLink="/">FencerJudge</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link"
|
||||
routerLink="/matches"
|
||||
routerLinkActive="active-link"
|
||||
>
|
||||
<a class="nav-link" routerLink="/matches" routerLinkActive="active-link">
|
||||
Matchs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" *ngIf="authService.isAuthenticated()">
|
||||
<a
|
||||
class="nav-link"
|
||||
routerLink="/matches/add"
|
||||
routerLinkActive="active-link"
|
||||
>
|
||||
<a class="nav-link" routerLink="/matches/add" routerLinkActive="active-link">
|
||||
MatchAdd
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="nav-item"
|
||||
*ngIf="authService.isAuthenticated(); else notLoggedIn"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
routerLink="/logout"
|
||||
routerLinkActive="active-link"
|
||||
>Admin</a
|
||||
>
|
||||
<li class="nav-item" *ngIf="authService.isAuthenticated(); else notLoggedIn">
|
||||
<a class="nav-link" routerLink="/logout" routerLinkActive="active-link">Admin</a>
|
||||
</li>
|
||||
<ng-template #notLoggedIn>
|
||||
<a class="nav-link" routerLink="/login" routerLinkActive="active-link"
|
||||
>Connexion</a
|
||||
>
|
||||
<a class="nav-link" routerLink="/login" routerLinkActive="active-link">Connexion</a>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
@ -12,4 +12,5 @@
|
|||
rgba(64, 64, 64, 0.95) 0%,
|
||||
rgba(32, 32, 32, 0.98) 50%,
|
||||
rgba(16, 16, 16, 0.95) 100%);
|
||||
--h-f-bg: #2c2c2c;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue