Création du style de la page sur l'histoire de DE

www/css/style.css

@@ -16,6 +16,7 @@
     visibility: hidden;
     display: none;
 }
+
 #updateDateV {
     visibility: visible;
     display: block;
@@ -23,12 +24,14 @@
     font-weight: bold;
     color: black;
 }
+
 #updateDateW {
     visibility: visible;
     display: block;
     font-weight: bold;
     color: white;
 }
+
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -210,7 +213,124 @@ footer {
 /* AUTEUR: Jérémy */
 /****************************/
 .histoire {
-    background-color: rgb(104, 170, 56);
+    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background-size: cover;
+    background-position: top;
+    color: #ffefe5;
+}
+
+.histoire header.introduction {
+    background: #13172c url("../images/imagesDE/history.jpg") center/cover;
+    background-position: top;
+    height: 100vh;
+    display: block;
+    text-align: center;
+    align-content: center;
+    line-height: 5;
+    font-size: 2rem;
+}
+
+.histoire header.introduction div.introduction {
+    background-color: #13172cd5;
+    height: 100vh;
+}
+
+.histoire header.introduction button {
+    color: #ffefe5;
+    padding: 0 16px;
+    margin: 0 4px;
+
+    height: 40px;
+    border: none;
+    border-radius: 20px;
+    background-color: #13172c;
+}
+
+.histoire header.introduction button a {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    text-decoration: none;
+}
+
+
+.histoire header.introduction button:hover {
+    height: 40px;
+    border-radius: 20px;
+    background-color: #b47871;
+}
+
+.histoire main {
+    margin: auto;
+}
+
+.histoire div.titre {
+    grid-area: titre;
+    text-align: center;
+    font-size: 2rem;
+    padding-top: 66px;
+}
+
+.histoire div.grilleGauche {
+    background-color: rgb(19 23 44 / 90%);
+    border-radius: 20px;
+    display: grid;
+    align-items: flex-start;
+    grid-template-areas:
+        "image soustitre"
+        "image description";
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: 1fr 5fr;
+    padding: 16px;
+    margin: 16px 5%;
+    text-align: justify;
+}
+
+.histoire div.grilleDroite {
+    background-color: rgb(19 23 44 / 90%);
+    border-radius: 20px;
+    display: grid;
+    align-items: flex-start;
+    grid-template-areas:
+        "soustitre image"
+        "description image";
+    grid-template-columns: 5fr 1fr;
+    grid-template-rows: 1fr 5fr;
+    padding: 16px;
+    margin: 16px 5%;
+    text-align: justify;
+}
+
+.histoire div.image {
+    grid-area: image;
+    grid-template-columns: 15%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.histoire div.soustitre {
+    grid-area: soustitre;
+    grid-template-columns: 85%;
+    text-align: center;
+}
+
+.histoire div.description {
+    grid-area: description;
+    grid-template-columns: 85%;
+}
+
+.histoire div.image img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    /* hauteur = largeur */
+    border-radius: 20%;
+    padding: 16px;
+}
+
+.histoire div.grilleDroite:hover,
+.histoire div.grilleGauche:hover {
+    background-color: rgba(39, 58, 86, 90%);
 }
 
 /**************************************/