Refonte graphique de la page d'histoire DE + Ajout du texte
This commit is contained in:
@@ -310,6 +310,7 @@ footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aPropos form {
|
||||
width: 70ch;
|
||||
margin: auto;
|
||||
@@ -335,6 +336,7 @@ Couleur texte : #FFEFE5
|
||||
.aPropos p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aPropos #contactInfo {
|
||||
background-color: #273A56;
|
||||
padding: 10px;
|
||||
@@ -344,11 +346,12 @@ Couleur texte : #FFEFE5
|
||||
|
||||
.aPropos a:link {
|
||||
color: #E6ECF3;
|
||||
font-weight:800;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.aPropos a:visited {
|
||||
color: #c19f8a;
|
||||
|
||||
@@ -489,7 +492,7 @@ Couleur texte : #FFEFE5
|
||||
/* AUTEUR: Jérémy */
|
||||
/****************************/
|
||||
.histoire {
|
||||
background: #13172c url("../images/imagesTeam/Intro.png") center;
|
||||
background: #13172c center;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #ffefe5;
|
||||
@@ -520,7 +523,7 @@ Couleur texte : #FFEFE5
|
||||
text-decoration: none;
|
||||
color: #ffefe5;
|
||||
padding: 10.8px 16px;
|
||||
margin: 0 4px;
|
||||
margin: 160px 4px;
|
||||
background-color: #13172c;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -534,73 +537,92 @@ Couleur texte : #FFEFE5
|
||||
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%;
|
||||
.histoire section article {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
height: 50vh;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.histoire div.soustitre {
|
||||
grid-area: soustitre;
|
||||
grid-template-columns: 85%;
|
||||
text-align: center;
|
||||
.histoire section article.grilleGauche {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.histoire div.description {
|
||||
grid-area: description;
|
||||
grid-template-columns: 85%;
|
||||
.histoire section article.grilleDroite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.histoire div.image img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
/* hauteur = largeur */
|
||||
border-radius: 20%;
|
||||
.histoire section article#contexte {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre1 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre2 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre3 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre4 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre5 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre6 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre7 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article#chapitre8 {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
}
|
||||
|
||||
.histoire section article div.box {
|
||||
background-color: rgba(19, 23, 44, 0.8);
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.histoire div.grilleDroite:hover,
|
||||
.histoire div.grilleGauche:hover {
|
||||
background-color: rgba(39, 58, 86, 90%);
|
||||
.histoire section article div.box:hover {
|
||||
background-color: rgba(39, 58, 86, 0.9);
|
||||
}
|
||||
|
||||
.histoire section article.grilleGauche div.box {
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
.histoire section article.grilleDroite div.box {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.histoire section article h2,
|
||||
.histoire section article h3,
|
||||
.histoire section article p {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.histoire section article h2.titre {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.histoire section article h3.nomChapitre {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.histoire section article p.contenuChapitre {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/**************************************/
|
||||
|
||||
Reference in New Issue
Block a user