Ajouter CSS pour header et pages principales #75
3 changed files with 227 additions and 14 deletions
208
outline.txt
Normal file
208
outline.txt
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
Fonts: Poppins, Arial Narrow?/Arial?
|
||||
Couleurs:
|
||||
#394596; /*Bleu AGECEM*/
|
||||
#E5E5E5; /*Gris pâle*/
|
||||
#8A8A8A; /*Gris foncé*/
|
||||
#FFF; /*Blanc pur*/
|
||||
#000; /*Noir pur*/
|
||||
|
||||
Couleurs (Light Mode):
|
||||
#394596; /*Bleu AGECEM*/
|
||||
Couleurs (Dark Mode):
|
||||
|
||||
div.wrapper{
|
||||
width: 1420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*tête de page*/
|
||||
|
||||
header.entete{
|
||||
|
||||
}
|
||||
ul.enteteMenu{
|
||||
font-family: Poppins;
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.25rem; /*20px*/
|
||||
color: #000; /*Noir pur*/
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
li.enteteMenuElement{
|
||||
|
||||
}
|
||||
li.enteteMenuElement:hover{
|
||||
border-bottom: 5px #FF563C solid; /*Orange Highlight*/
|
||||
cursor: pointer;
|
||||
}
|
||||
ul.enteteSousMenu{
|
||||
font-family: Poppins;
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.125rem; /*18px*/
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
li.enteteSousMenuElement{
|
||||
background-color: #D8D8D8 /*gris pâle*/;
|
||||
color: #000; /*Noir pur*/
|
||||
}
|
||||
li.enteteSousMenuElement:hover{
|
||||
background-color: #FF563C /*gris pâle*/;
|
||||
color: #FFF; /*Blanc pur*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
---/*page*/---
|
||||
/*titres*/
|
||||
h1.titre1Page{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 6rem; /*96px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
h2.titre2Page{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 1.5rem; /*24px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
div.h3Background{
|
||||
background-color: #394596; /*Bleu AGECEM*/
|
||||
width: 100%; /*largeur complète du wrapper*/
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-flow: wrap row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center
|
||||
}
|
||||
h3.h3Page{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 2.25rem; /*36px*/
|
||||
color: #FFF; /*Blanc pur*/
|
||||
}
|
||||
.reglementNom{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 3rem; /*48px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
.reglementDesc{
|
||||
font-family: Poppins;
|
||||
font-weight: 500; /*medium*/
|
||||
font-size: 1.5rem /*24px*/;
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
.politiqueNom{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 3rem; /*48px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
.politiqueNom{
|
||||
font-family: Poppins;
|
||||
font-weight: 500; /*medium*/
|
||||
font-size: 2.25rem; /*36px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
/*page*/
|
||||
|
||||
|
||||
/*article*/
|
||||
/*titres*/
|
||||
h1.h1Article{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 6rem;/*96px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
|
||||
|
||||
.grilleArticleTitre{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 1.5rem /*24px*/;
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
line-height: 115%;
|
||||
}
|
||||
.grilleArticleTitre.vacant{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 1.5rem /*24px*/;
|
||||
color: #8A8A8A; /*Gris foncé*/
|
||||
}
|
||||
.grilleArticleSousTitre{
|
||||
font-family: Poppins;
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.125rem /*18px*/;
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
line-height: 115%;
|
||||
}
|
||||
.grilleArticleDesc{
|
||||
font-family: Poppins;
|
||||
font-weight: 300; /*light*/
|
||||
font-size: 0.875rem /*14px*/;
|
||||
color: #505050; /*Gris foncé*/
|
||||
line-height: 150%;
|
||||
}
|
||||
.grilleArticleLien{
|
||||
font-family: Poppins;
|
||||
font-weight: 300; /*light*/
|
||||
font-size: 1.125rem /*18px*/;
|
||||
color: #FF563C; /*Orange Highlight*/
|
||||
}
|
||||
|
||||
/*FAQ*/
|
||||
div.questionEtReponse{
|
||||
display: grid;
|
||||
}
|
||||
|
||||
div.question{
|
||||
border-left: 5px #FF563C solid; /*Orange Highlight*/
|
||||
background-color: #E5E5E5 /*Gris pâle*/
|
||||
}
|
||||
p.questionQ{
|
||||
font-family: Poppins;
|
||||
font-weight: 300; /*light*/
|
||||
font-size: 6rem /*96px*/;
|
||||
color: #FF563C; /*Orange Highlight*/
|
||||
}
|
||||
p.questionTexte{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 2.25rem; /*36px*/
|
||||
color: #000; /*Noir pur*/
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
div.reponse{
|
||||
border-left: 5px #8A8A8A solid; /*Gris foncé*/
|
||||
background-color: #FFF /*Blanc pur*/
|
||||
}
|
||||
p.reponseR{
|
||||
font-family: Poppins;
|
||||
font-weight: 300; /*light*/
|
||||
font-size: 6rem /*96px*/;
|
||||
color: #8A8A8A; /*Gris foncé*/
|
||||
}
|
||||
p.reponseTexte{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 2.25rem; /*36px*/
|
||||
color: #000; /*Noir pur*/
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
/*FAQ*/
|
||||
|
||||
|
||||
|
||||
/*pied de page*/
|
||||
|
||||
|
||||
|
||||
|
|
@ -2,28 +2,32 @@ h1 {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
ul.enteteMenu{
|
||||
.header{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.enteteMenu{
|
||||
font-family: Poppins;
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.25rem; /*20px*/
|
||||
color: #000; /*Noir pur*/
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: start;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
li.enteteMenuElement:hover{
|
||||
.enteteMenuElement:hover{
|
||||
border-bottom: 5px #FF563C solid; /*Orange Highlight*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1.titre1Page{
|
||||
.titre1Page{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 6rem; /*96px*/
|
||||
color: #394596; /*Bleu AGECEM*/
|
||||
}
|
||||
h2.titre2Page{
|
||||
.titre2Page{
|
||||
font-family: Poppins;
|
||||
font-weight: 600; /*semi-bold*/
|
||||
font-size: 1.5rem; /*24px*/
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
{{ define "header-html" }}
|
||||
|
||||
<ul class="enteteMenu">
|
||||
<li class="enteteMenuElement"><a href="/">index</a></li>
|
||||
<li class="enteteMenuElement"><a href="/a-propos">À propos</a></li>
|
||||
<li class="enteteMenuElement"><a href="/actualite">Actualité</a></li>
|
||||
<li class="enteteMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
|
||||
<li class="enteteMenuElement"><a href="/documentation">Documentation</a></li>
|
||||
<li class="enteteMenuElement"><a href="/formulaires">Formulaires</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="header">
|
||||
<ul class="enteteMenu">
|
||||
<li class="enteteMenuElement"><a href="/">index</a></li>
|
||||
<li class="enteteMenuElement"><a href="/a-propos">À propos</a></li>
|
||||
<li class="enteteMenuElement"><a href="/actualite">Actualité</a></li>
|
||||
<li class="enteteMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
|
||||
<li class="enteteMenuElement"><a href="/documentation">Documentation</a></li>
|
||||
<li class="enteteMenuElement"><a href="/formulaires">Formulaires</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="/admin">admin</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue