Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01

www/css/style.css

@@ -464,43 +464,6 @@ footer {
     height: 100vh;
 }
 
-/*
-.histoire header.introduction div {
-    color: #ffefe5;
-    padding: 0 16px;
-    margin: 0 4px;
-
-    height: 40px;
-    border: none;
-    border-radius: 20px;
-    background-color: #13172c;
-}
-
-.histoire header.introduction div a {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    text-decoration: none;
-}*/
-/*.histoire header.introduction div.bouton {
-    height: 40px;
-}
-
-.histoire header.introduction div.bouton a {
-    border: none;
-    background-color: #13172c;
-    text-decoration: none;
-    border-radius: 20px;
-    font-size: 1rem;
-
-    display: inline-block;
-    align-items: center;
-    text-decoration: none;
-    color: #ffefe5;
-    padding: 0 16px;
-    margin: 0 4px;
-}*/
-
 .histoire header.introduction div.introduction a {
     display: inline-block;
     text-decoration: none;
@@ -895,4 +858,109 @@ blockquote a {
 .armures .habilites {
     position: relative;
     z-index: 15;
+}
+
+/****************************/
+/* PAGE: Crédits */
+/* AUTEUR: Jeremy */
+/****************************/
+.credits {
+    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background-size: cover;
+    background-position: top;
+    color: #ffefe5;
+}
+
+.credits header.introduction {
+    background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
+    background-position: top;
+    height: 100vh;
+    display: block;
+    text-align: center;
+    align-content: center;
+}
+
+.credits header.introduction h1,
+.credits header.introduction p {
+    line-height: 5;
+    font-size: 2rem;
+}
+
+
+.credits header.introduction div.introduction {
+    background-color: #13172cd5;
+    height: 100vh;
+}
+
+.credits div.bouton a {
+    display: inline-block;
+    text-decoration: none;
+    color: #ffefe5;
+    padding: 10.8px 16px;
+    margin: 0 4px;
+    background-color: #13172c;
+    border-radius: 20px;
+}
+
+.credits div.bouton a:hover {
+    border-radius: 20px;
+    background-color: #b47871;
+}
+
+.credits main {
+    margin: auto;
+}
+
+.credits div.titre {
+    text-align: center;
+    font-size: 2rem;
+    padding-top: 66px;
+}
+
+.credits div.grille {
+    background-color: rgba(115, 110, 154, 0.9);
+    border-radius: 20px;
+    display: grid;
+    align-items: flex-start;
+    grid-template-areas:
+        "soustitre soustitre"
+        "description description"
+        "bouton bouton";
+    /*grid-template-columns: 1fr 3fr;*/
+    padding: 16px;
+    margin: 16px 5%;
+    text-align: center;
+}
+
+.credits div.bouton {
+    grid-area: bouton;
+    grid-template-columns: 15%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 16px;
+}
+
+.credits div.soustitre {
+    grid-area: soustitre;
+    grid-template-columns: 85%;
+    text-align: center;
+}
+
+.credits div.description {
+    grid-area: description;
+    grid-template-columns: 85%;
+}
+
+.credits div.image img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    /* hauteur = largeur */
+    border-radius: 20%;
+    padding: 16px;
+}
+
+.credits div.grilleDroite:hover,
+.credits div.grilleGauche:hover {
+    background-color: rgba(39, 58, 86, 90%);
 }