mirror of
https://grond.iut-fbleau.fr/stiti/SAE_2.02
synced 2024-09-19 19:38:20 +02:00
114 lines
2.5 KiB
CSS
114 lines
2.5 KiB
CSS
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
background-color: black;
|
|
}
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.logo img {
|
|
height: 50px;
|
|
}
|
|
.nav-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.nav-buttons a {
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
color: white;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
transition: box-shadow 0.3s ease, background-color 0.3s ease;
|
|
}
|
|
.btn-connexion {
|
|
background-color: transparent;
|
|
border: 2px solid white;
|
|
}
|
|
.btn-inscription {
|
|
background-color: rgb(181, 15, 232);
|
|
}
|
|
|
|
.btn-deconnexion {
|
|
background-color: rgb(181, 15, 232);
|
|
}
|
|
|
|
.nav-buttons a:hover {
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* menu burger */
|
|
.menu-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
.menu-toggle span {
|
|
width: 25px;
|
|
height: 3px;
|
|
background-color: white;
|
|
margin: 4px 0;
|
|
}
|
|
.nav-buttons.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
background-color: black;
|
|
position: absolute;
|
|
top: 70px;
|
|
right: 20px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
|
|
}
|
|
.nav-buttons.active a {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.nav-buttons {
|
|
display: none;
|
|
}
|
|
/* Affichage du menu burger sur les appareils mobiles */
|
|
.menu-toggle {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.search-form {
|
|
margin-right: 20px; /* Espace entre la barre de recherche et les boutons de navigation */
|
|
display: flex; /* Permet d'aligner les éléments horizontalement */
|
|
align-items: center; /* Alignement vertical */
|
|
}
|
|
|
|
.search-form input[type="text"] {
|
|
padding: 10px;
|
|
border: 2px solid white; /* Bordure blanche */
|
|
background-color: rgba(255, 255, 255, 0.1); /* Fond légèrement transparent */
|
|
color: white; /* Couleur du texte */
|
|
border-radius: 5px; /* Coins arrondis */
|
|
vertical-align: middle; /* Alignement vertical */
|
|
}
|
|
|
|
.search-form button[type="submit"] {
|
|
padding: 10px;
|
|
background-color: transparent; /* Fond transparent */
|
|
border: 2px solid white; /* Bordure blanche */
|
|
color: white; /* Couleur du texte */
|
|
border-radius: 5px; /* Coins arrondis */
|
|
cursor: pointer;
|
|
vertical-align: middle; /* Alignement vertical */
|
|
}
|