diff --git a/docs/exemple_litterall.jpg b/docs/exemple_litterall.jpg new file mode 100644 index 0000000..ad9a1e3 Binary files /dev/null and b/docs/exemple_litterall.jpg differ diff --git a/docs/fond.png b/docs/kosmopolit_fond.png similarity index 100% rename from docs/fond.png rename to docs/kosmopolit_fond.png diff --git a/docs/logo KOSMOPOLIT grand bleu.png b/docs/kosmopolit_logo.png similarity index 100% rename from docs/logo KOSMOPOLIT grand bleu.png rename to docs/kosmopolit_logo.png diff --git a/index.html b/index.html index aa852ef..e212bfa 100644 --- a/index.html +++ b/index.html @@ -8,20 +8,22 @@ +
- +
- +

KOSMOPOLIT l'association

 - +

LITTERall

 - +

lettres d'europe et d'ailleurs

 diff --git a/pages/lettresdeeda.html b/pages/lettredeeda.html similarity index 100% rename from pages/lettresdeeda.html rename to pages/lettredeeda.html diff --git a/pages/litterall.html b/pages/litterall.html index e69de29..27a3956 100644 --- a/pages/litterall.html +++ b/pages/litterall.html @@ -0,0 +1,90 @@ + + + + + + kosmopolit + + + + + + + + + + + +
+
+ + + + + +
+ +
+

+ texte de presentation +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus. Praesent sit amet augue interdum, laoreet magna sit amet, dignissim eros. Sed nec enim condimentum, condimentum nunc sed, congue elit. Nullam tellus lorem, faucibus vitae eros in, ultricies luctus ligula. Aenean tristique, ante sed dictum faucibus, risus nisl pretium quam, quis consequat ipsum risus a lacus. Integer pulvinar, ex nec lacinia vulputate, est elit dictum risus, sit amet sollicitudin metus turpis nec odio. Morbi orci felis, sollicitudin eu enim id, sollicitudin viverra dolor. Ut vestibulum quis mauris vitae faucibus. Suspendisse ultricies diam est, sit amet tempor est tristique ac. Ut at posuere magna. Fusce ut bibendum elit. Pellentesque vulputate, leo ac bibendum suscipit, quam magna consectetur odio, hendrerit convallis elit eros ac leo. Suspendisse interdum libero id mi molestie sollicitudin. Praesent auctor quis lorem non cursus. Nullam sit amet semper turpis. Maecenas sed hendrerit erat. + Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis. +

+ revue litterall +
+ revue litterall + revue litterall + revue litterall + revue litterall + revue litterall + revue litterall +
+
+
+ + + + + diff --git a/styles/litterall.css b/styles/litterall.css new file mode 100644 index 0000000..2601e62 --- /dev/null +++ b/styles/litterall.css @@ -0,0 +1,6 @@ +#main { + padding: 20px; +} +#main article { + margin: 20px; +} diff --git a/styles/menu.css b/styles/menu.css index 7fff892..f27142d 100644 --- a/styles/menu.css +++ b/styles/menu.css @@ -1,3 +1,4 @@ + body { display: flex; flex-direction: column; diff --git a/styles/style.css b/styles/style.css index 08b3932..085ba45 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,6 @@ + +/*/////////////////////////////////////////////*/ +/*IMPORT CSS*/ @import url(./reset.css); @import url(./fonts.css); @import url(./header.css); @@ -9,33 +12,41 @@ /*/////////////////////////////////////////////*/ /*GLOBAL VARIABLE*/ :root { + /* color range */ + --color-purple: #ee1998; + --color-pink: #ff7bca; + --color-green: #8fce3c; + --color-yellow: #e3e00a; + --color-blue: #51cee4; + --color-water: #0c9cb5; + /* colors texts */ - --color-texts: rgb(1, 1, 1); + --color-texts: rgb(1, 1, 1); + --color-texts-special: rgb(1, 1, 1); /* colors links */ - --color-links: rgb(120, 1, 1); + --color-links: rgb(120, 1, 1); + --color-links-hover: rgb(120, 1, 1); + --color-links-visited: rgb(120, 1, 1); + --color-links-active: rgb(120, 1, 1); + + /* colors titles */ + --color-title-1: rgb(120, 1, 1); + --color-title-2: rgb(120, 1, 1); + --color-title-3: rgb(120, 1, 1); + --color-title-4: rgb(120, 1, 1); + --color-title-5: rgb(120, 1, 1); + --color-title-6: rgb(120, 1, 1); /* colors buttons */ - --primary-hue: 12; - --color-button: hsl(var(primary-hue), 1%, 1%); - - /* color range */ - --color-purple: #ee1998; - --color-pink: #ff7bca; - --color-green: #8fce3c; - --color-yellow: #e3e00a; - --color-blue: #51cee4; - --color-water: #0c9cb5; + --primary-hue: 12; + --color-button: hsl(var(primary-hue), 1%, 1%); /* fonts */ - --font-titles: 'paradroid'; - --font-texts: 'louisgeorge'; - --font-fallback: 'cabrion'; + --font-titles: 'paradroid'; + --font-texts: 'louisgeorge'; + --font-fallback: 'cabrion'; } -/*GLOBAL VARIABLE*/ -/*/////////////////////////////////////////////*/ - - @@ -45,13 +56,19 @@ html { scroll-behavior: smooth; } -main { - min-height: calc(100vh - 70px); -} body { display: flex; flex-direction: column; } +main { + min-height: calc(100vh - 70px); +} + + + + +/*/////////////////////////////////////////////*/ +/*TEXTS*/ h1, h2, h3, h4, h5, h6 { font-family: var(--font-titles), var(--font-fallback), sans-serif; } @@ -61,9 +78,18 @@ a, p, li { a, a > * { cursor: pointer; } -a, a:visited, a:hover, a:link { +a, a:link { color: var(--color-links); } +a:visited { + color: var(--color-links-visited); +} +a:hover { + color: var(--color-links-hover); +} +a:active { + color: var(--color-links-active); +} li *, li p, article b, article em, article i, article a, article var { display: inline; @@ -82,10 +108,6 @@ em { font-weight: 600; color: var(--article-em); } -/*GENERAL SETTINGS*/ -/*/////////////////////////////////////////////*/ - -