155 lines
3.2 KiB
CSS
155 lines
3.2 KiB
CSS
/* Reset margin and padding for the body */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden; /* Prevent horizontal scrolling */
|
|
}
|
|
|
|
/* Ensure the video covers the entire viewport */
|
|
.video-header {
|
|
position: relative;
|
|
height: 100vh; /* Full viewport height */
|
|
width: 100vw; /* Full viewport width */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.backVideo {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* Ensures the video covers the entire area */
|
|
z-index: -1; /* Places the video behind the content */
|
|
}
|
|
|
|
.header-content {
|
|
position: relative;
|
|
z-index: 1; /* Places the text above the video */
|
|
color: white; /* Makes the text visible over the video */
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header-content h1{
|
|
font-family: "Corbel", sans-serif;
|
|
font-size: calc(1.5vw + 1.2rem); /* adapte à la taille de fenètre*/
|
|
font-weight: bold;
|
|
color: black;
|
|
position: relative;
|
|
top: 90px;
|
|
text-align: center;
|
|
}
|
|
.header-content h2 {
|
|
|
|
font-family: "Corbel", sans-serif;
|
|
font-size: calc(0.8vw + 0.8rem); /* adapte à la taille de fenètre*/
|
|
font-weight: lighter;
|
|
position: relative;
|
|
top: 20px;
|
|
color: black;
|
|
margin: 0;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
nav ul li {
|
|
|
|
|
|
|
|
}
|
|
|
|
nav ul li a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Navigation Panel Styling */
|
|
.navigation-panel {
|
|
position: absolute;
|
|
top: 20px; /* Position at the top-left */
|
|
left: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #f3e8ff; /* Pastel light purple */
|
|
border-radius: 50px; /* Full circles on left and right */
|
|
padding: 10px 20px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
|
|
width: auto;
|
|
max-width: 90%; /* Adapt to window size */
|
|
font-size: calc(0.8vw + 0.5rem); /* Responsive size */
|
|
}
|
|
|
|
.navigation-panel ul {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 15px; /* Space between items */
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.navigation-panel li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
border-radius: 50px; /* Rounded corners for each item */
|
|
padding: 10px;
|
|
}
|
|
|
|
.navigation-panel li:hover {
|
|
background-color: #d8b4ff; /* Darker pastel purple on hover */
|
|
transform: scale(1.05); /* Slightly enlarge on hover */
|
|
}
|
|
|
|
.navigation-panel li.active {
|
|
background-color: #d8b4ff; /* Darker pastel purple for active item */
|
|
}
|
|
|
|
.navigation-panel a {
|
|
text-decoration: none;
|
|
color: #4a4a4a; /* Light text color */
|
|
font-family: "Corbel", sans-serif;
|
|
font-size: 0.9rem;
|
|
font-weight: lighter; /* Light font weight */
|
|
text-align: center;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.navigation-panel a:hover {
|
|
color: #000; /* Darker text on hover */
|
|
}
|
|
|
|
.navigation-panel .icon {
|
|
width: 30px; /* Adjust icon size */
|
|
height: 30px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.navigation-panel .text {
|
|
font-size: 0.8rem; /* Text size */
|
|
}
|
|
|
|
/* Ensure responsiveness */
|
|
@media (max-width: 768px) {
|
|
.navigation-panel {
|
|
padding: 5px 10px;
|
|
font-size: calc(0.6vw + 0.5rem);
|
|
}
|
|
|
|
.navigation-panel .icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.navigation-panel .text {
|
|
font-size: 0.7rem;
|
|
}
|
|
} |