From 715053ca70dd93d4c9a25c01a0027749ff9ba45b Mon Sep 17 00:00:00 2001 From: Alexel Date: Tue, 25 Jul 2023 12:48:41 -0400 Subject: [PATCH] ul header dans div + header width 100% --- outline.txt | 208 +++++++++++++++++++++++++++++++++++ public/css/general.css | 14 ++- templates/html/header.gohtml | 19 ++-- 3 files changed, 227 insertions(+), 14 deletions(-) create mode 100644 outline.txt diff --git a/outline.txt b/outline.txt new file mode 100644 index 0000000..84805f3 --- /dev/null +++ b/outline.txt @@ -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*/ + + + diff --git a/public/css/general.css b/public/css/general.css index a7d9465..84ffca7 100644 --- a/public/css/general.css +++ b/public/css/general.css @@ -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*/ diff --git a/templates/html/header.gohtml b/templates/html/header.gohtml index bca02bb..0c938e0 100644 --- a/templates/html/header.gohtml +++ b/templates/html/header.gohtml @@ -1,14 +1,15 @@ {{ define "header-html" }} - - +
+ +