From 6a5744bf89d8b2040ac9dba189da72436f5d2834 Mon Sep 17 00:00:00 2001 From: Quentin Date: Sat, 9 Jan 2021 23:02:47 +0100 Subject: Some tests for the new website --- src/next/css/main.css | 82 +++++++++++++++++++++++++++++++ src/next/fonts/IMFellEnglish-Italic.ttf | Bin 0 -> 198756 bytes src/next/fonts/IMFellEnglish-Regular.ttf | Bin 0 -> 191256 bytes src/next/img/illus.jpg | Bin 0 -> 563445 bytes src/next/img/paper-clip.png | Bin 0 -> 26353 bytes src/next/index.pug | 39 +++++++++++++++ 6 files changed, 121 insertions(+) create mode 100644 src/next/css/main.css create mode 100644 src/next/fonts/IMFellEnglish-Italic.ttf create mode 100644 src/next/fonts/IMFellEnglish-Regular.ttf create mode 100644 src/next/img/illus.jpg create mode 100644 src/next/img/paper-clip.png create mode 100644 src/next/index.pug (limited to 'src') diff --git a/src/next/css/main.css b/src/next/css/main.css new file mode 100644 index 0000000..fbbaa8a --- /dev/null +++ b/src/next/css/main.css @@ -0,0 +1,82 @@ +/* some reset */ +html, body { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + height: 100%; + font-size: 24px; +} + +/* fonts */ +@font-face { + font-family: 'IM Fell English'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(../fonts/IMFellEnglish-Italic.ttf) format('truetype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: 'IM Fell English'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(../fonts/IMFellEnglish-Regular.ttf) format('truetype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +html { + background-color: #fbfcf8; +} + +body { + max-width: 900px; + padding: 1em; + margin: auto; + font-family: 'IM Fell English', Times, Serif; + color: #5c544a; +} + +.hero { + background-image: url("../img/illus.jpg"); + transform: rotate(-2deg); + height: 530px; + background-size: cover; + background-position: 50% 0%; + border-radius: 10px; + margin: -1.8em -1em 3em -1em; +} + +.hero img { + position: absolute; + top: -14px; + left: 25px; + height: 100px; +} + +header { + padding: 1em 0em 2em 0em; +} + +article { + background-color: #f4eccd; + padding: 1em; + border-radius: 10px; +} + +.brand { + font-size: 2em; + float: left; +} + +nav { + float: right; +} + +nav li { + padding: 0.5em; + display: inline; +} diff --git a/src/next/fonts/IMFellEnglish-Italic.ttf b/src/next/fonts/IMFellEnglish-Italic.ttf new file mode 100644 index 0000000..57a7338 Binary files /dev/null and b/src/next/fonts/IMFellEnglish-Italic.ttf differ diff --git a/src/next/fonts/IMFellEnglish-Regular.ttf b/src/next/fonts/IMFellEnglish-Regular.ttf new file mode 100644 index 0000000..c8481a1 Binary files /dev/null and b/src/next/fonts/IMFellEnglish-Regular.ttf differ diff --git a/src/next/img/illus.jpg b/src/next/img/illus.jpg new file mode 100644 index 0000000..6eefb8a Binary files /dev/null and b/src/next/img/illus.jpg differ diff --git a/src/next/img/paper-clip.png b/src/next/img/paper-clip.png new file mode 100644 index 0000000..255912f Binary files /dev/null and b/src/next/img/paper-clip.png differ diff --git a/src/next/index.pug b/src/next/index.pug new file mode 100644 index 0000000..edfa5c4 --- /dev/null +++ b/src/next/index.pug @@ -0,0 +1,39 @@ +doctype html +html + head + meta(charset="utf-8") + title df #{title} + link(rel="stylesheet", href="css/main.css") + meta(name="viewport", content="width=device-width, initial-scale=1.0") + body + header + .brand Deuxfleurs + nav + ul + li L'association + li Nos services + li Documentation + li + a(href="https://guichet.deuxfleurs.fr") Mon compte + br(style="clear:both") + + main + article + .hero + img(src="img/paper-clip.png") + h1 Cher·e internaute, un autre internet est possible + p + | Arrêtez-vous cinq minutes. Prenez le temps de l'imaginer avec moi. + | Imaginez pouvoir accéder à l'information sans avoir à se demander si c'est une publicité ou non ? + | Imaginez que vos communications avec vos proches ne soient pas espionnées pour prédire votre prochain malus d'assurance ? + | Imaginez un lieux où vos amis verrez le contenu que vous publiez et non un obscure contenu viral ? + // Peut être rajouter des petits dessins genre gribouillage carnet. + + h2 Des cabanes pour se protéger du sombre nuage + p Blabla + + h2 Rejoignez-nous + + footer + p Un footer + -- cgit v1.2.3