diff --git a/src/fonts/fonts.css b/src/fonts/fonts.css index 3517016..f17300c 100644 --- a/src/fonts/fonts.css +++ b/src/fonts/fonts.css @@ -15,7 +15,7 @@ @font-face { font-family: "GoldenRatio"; - src: url("golden_ratio/GoldenRatio-Demo.otf"); + src: url("golden_ratio/GoldenRatio-accents2.otf"); } @font-face { diff --git a/src/fonts/golden_ratio/GoldenRatio-accents2.otf b/src/fonts/golden_ratio/GoldenRatio-accents2.otf new file mode 100644 index 0000000..8d803ea Binary files /dev/null and b/src/fonts/golden_ratio/GoldenRatio-accents2.otf differ diff --git a/src/img/Page_de_couverture.jpg b/src/img/Page_de_couverture.jpg new file mode 100644 index 0000000..3db6666 Binary files /dev/null and b/src/img/Page_de_couverture.jpg differ diff --git a/src/img/ayoub.png b/src/img/ayoub.png new file mode 100644 index 0000000..a85c4ae Binary files /dev/null and b/src/img/ayoub.png differ diff --git a/src/img/louise.png b/src/img/louise.png new file mode 100644 index 0000000..11d1053 Binary files /dev/null and b/src/img/louise.png differ diff --git a/src/index.html b/src/index.html index 54001a0..85c68f0 100644 --- a/src/index.html +++ b/src/index.html @@ -21,24 +21,35 @@ Télécharger + --> + Télécharger

Le manifeste

-
- Bienvenue dans l’aventure du magazine Métamorphose ! Métamorphose est un magazine, un magazine de mode : il présente des vêtements, issus de la seconde main. C’est aussi une aventure, un support de réflexions, d’histoires, de conseils, de poèmes, sur des thèmes inspirants autour du vêtement et de sa réutilisation. Les vêtements de seconde mains y sont mis à l’honneur mais permettent aussi de parler d’écologie, de confiance en soi, de politique. Cet ouvrage emprunte la forme d’un magazine de mode mais parle avant tout d’un sujet de fond : la seconde main dans toutes ses formes, sujet auquel il nous semblait utile de contribuer et de développer. Métamorphose, c’est aussi une équipe d’une dizaine de copains, passionnés mais peu expérimentés, ayant travaillé dur pour lui donner naissance. Une équipe qui tient à son indépendance et à son originalité, et qui souhaite partager une idée, +
+ Bienvenue dans l’aventure du magazine Métamorphose ! +
+
+ Métamorphose est un magazine, un magazine de mode. Cependant, il présente des vêtements, issus de la seconde main. C’est aussi une aventure, un support de réflexion, d’histoires, de conseils, de poèmes, sur des thèmes inspirants autour du vêtement et de sa réutilisation. Les vêtements de seconde mains y sont mis à l’honneur mais permettent aussi de parler d’écologie, de confiance en soi, de politique. Cet ouvrage emprunte la forme d’un magazine de mode mais parle avant tout d’un sujet de fond : la seconde main sous toutes ses formes, sujet auquel il nous semblait utile de contribuer et de développer. +
+ Métamorphose, c’est aussi une équipe d’une dizaine de copains, passionnés mais peu expérimentés, ayant travaillé dur pour lui donner naissance. Une équipe qui tient à son indépendance et à son originalité, et qui souhaite partager une idée, une façon d’envisager autrement le quotidien à travers son mode de vie pour consommer moins mais mieux, pour vivre plus simplement, mais vivre vraiment. Ce magazine, comme une petite graine fraîchement semée aidera peut-être à faire germer un nouveau mode de vie où nous serons plus conscients de nos choix, avec éthique et confiance en soi. Le vêtement, parfait étendard de la consommation outrancière, meurtrière et polluante, pourrait devenir autre chose : une transmission, une création ou encore un souvenir. +
+ Ainsi, Métamorphose, que vous pouvez télécharger gratuitement sur ce site, porte un message d’espoir et d’amitié pour une modification de notre consommation, de notre rapport aux vêtements et peut-être à soi et aux autres. Si l’idée et le magazine vous plaisent, n’hésitez pas à le partager autour de vous ! +
+
+ On vous souhaite une bonne lecture ! +
+
+ Les copains de Métamorphose
- une façon d’envisager autrement le quotidien à travers son mode de vie pour consommer moins mais mieux, pour vivre plus simplement, mais vivre vraiment. - Ce magazine, comme une petite graine fraîchement semée aidera peut-être à faire germer un nouveau mode de vie où nous serons plus conscients de nos choix, avec éthique et confiance en soi. Le vêtement, parfait étendard de la consommation outrancière, meurtrière et polluante, pourrait devenir autre chose : une transmission, une création ou encore un souvenir. Ainsi, Métamorphose, que vous pouvez télécharger gratuitement sur ce site, porte un message d’espoir et d’amitié pour une modification de notre consommation, de notre rapport avec les vêtements et peut-être avec soi et les autres. Si l’idée et le magazine vous plaisent, n’hésitez pas à le partager autour de vous. -
-
- On vous souhaite une bonne lecture, les copains de Métamorphose +
+
@@ -46,7 +57,7 @@
- +

Louise Goutheraud

@@ -61,7 +72,7 @@
- +

Ayoub Imam

@@ -104,7 +115,7 @@
-

Ecrivains

+

écrivain(e)s

  • Marylou Gricourt
  • Jeanne Gouthéraud
  • @@ -132,6 +143,13 @@
  • Elisa Blancart
  • Adrian Amaglio
+
+

Aide et Conseils

+
    +
  • Raphaël Parisse
  • +
  • Rémi Rozkwas
  • +
  • Axel Céard
  • +
@@ -166,14 +184,14 @@

Écoutez nous

-

Edito 1

+

édito 1

-

Edito 2

+

édito 2

- diff --git a/src/main.css b/src/main.css index de8712c..79e862d 100644 --- a/src/main.css +++ b/src/main.css @@ -15,6 +15,12 @@ button, .button { cursor: pointer; } +.align-right { + text-align: right; + width: 100%; + display: inline-block; +} + h1 { font-family: Kiona; font-size: 121px; @@ -73,7 +79,16 @@ h1,h2 { color: #222; } -section:not(#modale){ +section:not(#galerie) h2 { + margin-left: -5%; + margin-right: -5%; +} + +section:not(#modale) { + margin: 5% 5% 0; +} + +section#galerie{ margin: 5em 10px 0; } @@ -121,11 +136,25 @@ header #download { width: 49%; } -#charte > div{ +#charte > div { text-align: justify; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 1em; + display: flex; +} + +#charte div span { + display: inline-block; + margin: 0.15em 0; +} + +#charte div span::first-letter { + font-size: 1.3em; +} + +#charte img { + max-height: 100%; + max-width: 80%; + object-fit: contain; + margin-left: 10%; } .profil:nth-child(2n) { @@ -147,7 +176,6 @@ header #download { .profil img { max-height: 100%; object-fit: cover; - margin-left: -20%; } .img { @@ -352,12 +380,71 @@ ul,ol,li { footer { background-color: #c6d9bdc4; - padding: 5px 0; + padding: 10px 0; width: 100%; position: absolute; left: 0; + font-size: 1.1em; +} + +footer { + background-color: #111111C5; + color: white; +} + +.footer { + display: flex; + align-items: first baseline; + justify-content: center; +} + +.rs { text-align: center; align-items: center; display: flex; justify-content: center; +} + +.h1 { + font-family: Kiona; + font-size: 2.35em; + letter-spacing: -0.05em; + line-height: 0.7em; + margin: 10px 15px 5px 0px; + text-align: left; + display: flex; + width: 5.915em; + flex-wrap: wrap; + font-weight: normal; +} + +.h1 > div::first-letter { + font-size: 1.7em; +} + +.h4 { + font-style: italic; + font-size: 0.75em; + display: block; + margin: 0; + padding-left: 0px; + font-family: "GoldenRatio"; +} + +.date { + font-size: 0.6em; + text-align: center; +} + +#bandeau { + background-color: red; + position: fixed; + top: 0; + left: 0; + width: 100%; + text-align: center; + font-weight: bold; + font-size: 1.2em; + padding: 7px 0; + color: #111; } \ No newline at end of file