add of projectDetails page

2025-09-13 22:14:42 +02:00
parent f118cf0cf8
commit b612c00f1f
15 changed files with 1820 additions and 64 deletions
@@ -0,0 +1,149 @@
+.project-details {
+    display: flex;
+    width: 70%;
+    margin: 0 15% 0 15%;
+    gap: 4%;
+    flex-direction: column;
+}
+
+.nav-bar{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    height: 280px;
+
+    background-image: url("/public/assets/images/projectDetailsHeadband.png");
+    background-size: cover;
+
+    &::after { /* Utilise un pseudo-élément pour le dégradé */
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 200px;
+        background: linear-gradient(to top, #0D0D0D 0%, rgba(26, 26, 26, 0) 100%);
+
+    }
+}
+
+.project-details-header{
+    width: 100%;
+    border-bottom: 2px solid #333;
+}
+
+.project-details-header h1{
+    color: var(--title-color);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 0;
+}
+
+.project-details-container {
+    width: 92%;
+    color: var(--text-color);
+    display: flex;
+    padding: 0 4%;
+}
+
+.project-details-content {
+    width: 80%
+}
+
+.project-details-content h2 {
+    margin-top: 2rem;
+    color: var(--title-color);
+    border-left: 4px solid var(--important-color);
+    padding-left: 0.75rem;
+}
+
+
+
+.project-details-years {
+    color : var(--text-color);
+    margin : 0;
+    font-weight: bold;
+    font-style: italic;
+}
+
+.project-details-short-description{
+    color: var(--text-color);
+}
+
+.project-details-header ul{
+    display: flex;
+    list-style: none;
+    padding: 0;
+    gap: 1em;
+}
+
+
+aside {
+    width: 20%;
+    height: fit-content;
+    position: sticky;
+    top: 150px;
+    color: var(--text-color);
+}
+
+.aside-title {
+    font-weight: bold;
+    color: var(--title-color);
+    margin-bottom: 1rem;
+    font-size: 1.1em;
+}
+
+
+aside ul{
+    border-left: 2px solid #333;
+    list-style: none;
+    padding: 0 0 0 1em;
+}
+
+aside ul li {
+    margin-bottom: 0.25em;
+}
+
+aside ul li a {
+    text-decoration: none;
+    color: var(--text-color);
+}
+
+aside ul li a:hover {
+    color: var(--title-color)
+}
+
+.return-button{
+    position: absolute;
+    top: 2em;
+    left: 20px;
+    border: none;
+    background: none;
+    padding: 7px;
+    cursor: pointer;
+    z-index: 10;
+    transition: background-color 0.3s ease;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 38px;
+    height: 38px;
+}
+
+.return-button:hover {
+    background: rgba(100,100,100, 0.5);
+    cursor: pointer;
+}
+
+.return-button svg {
+    color: var(--text-color);
+    transition: all 0.3s ease;
+}
+
+.return-button:hover svg {
+    color: var(--title-color);
+}