|
|
|
|
@ -61,18 +61,20 @@ figcaption {
|
|
|
|
|
}
|
|
|
|
|
/********************************************************************************/
|
|
|
|
|
/*Navbar css*/
|
|
|
|
|
|
|
|
|
|
/* Style général de la navbar */
|
|
|
|
|
.navbar {
|
|
|
|
|
background-color: #0e6ab9;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: sticky;
|
|
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navbar-list {
|
|
|
|
|
list-style-type : non;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -80,8 +82,7 @@ figcaption {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navbar-list li {
|
|
|
|
|
display: inline;
|
|
|
|
|
z-index: 200;
|
|
|
|
|
position: relative; /* Permet à l'élément dropdown de se positionner par rapport au parent */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navbar-list a {
|
|
|
|
|
@ -89,15 +90,72 @@ figcaption {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
transition: background-color 0.3 ease;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
transition: background-color 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.navbar-list a:hover {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
color: #0e6ab9;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Style pour le menu déroulant */
|
|
|
|
|
/* Espacement entre les éléments du menu déroulant */
|
|
|
|
|
.dropdown-content li {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 10px 0; /* Ajoute de l'espace vertical entre les éléments */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ajuster la largeur du menu déroulant à celle de "Gallerie" */
|
|
|
|
|
.dropdown-content {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
min-width: 100%; /* S'assure que la largeur correspond à celle du parent */
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
|
|
|
|
|
padding: 12px 0;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
top: 130%; /* Pour le placer juste en dessous de l'élément parent */
|
|
|
|
|
left: 0; /* Aligne le menu déroulant avec le parent */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown-content a {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
color: #0e6ab9;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
transition: background-color 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-content a:hover {
|
|
|
|
|
background-color: #0e6ab9;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Montre le menu dropdown au survol */
|
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
|
|
|
display: block;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
animation: dropdownFade 0.7s forwards ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ajout d'une animation douce */
|
|
|
|
|
@keyframes dropdownFade {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateY(-10px);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/********************************************************************************/
|
|
|
|
|
/* Css for the gallery (general) */
|
|
|
|
|
|
|
|
|
|
|
cocaillot
10 months ago