mirror of
https://grond.iut-fbleau.fr/stiti/SAE_2.02
synced 2024-09-20 03:48:19 +02:00
84 lines
1.6 KiB
CSS
84 lines
1.6 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);
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|