diff --git a/src/index.html b/src/index.html index e0ad896..b4adc42 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - + Métamorphose @@ -11,13 +11,11 @@

Métamorphose

Manifeste de mode de seconde main, Manifeste pour la mode de demain.

- Télécharger le magazine + Télécharger
-
-
-

Le manifeste

-
+
-
-

Qui sommes nous ?

-
+

Qui sommes nous ?

-

Louise Gouthéraud

-

Réalisatrice

- + +
+

Louise Gouthéraud

+

Réalisatrice

+
-

Ayoub Imam

-

Photographe

- + +
+

Ayoub Imam

+

Photographe

+
-
+
+
+

Mannequins

  • Jeanne Gouthéraud
    • @@ -69,19 +71,19 @@
  • Louise Gouthéraud
-
+

Écrivains

    -
  • LouiseGouthéraud
    • +
  • Louise Gouthéraud
  • Jeanne Gouthéraud
  • Marylou Gricourt
  • Louise Dailloux
-
+

Site internet

    -
  • Élisa Blancart
    • +
  • Elisa Blancart
  • Adrian Amaglio
@@ -89,27 +91,40 @@
-
-

Galerie

-
+

Galerie

- - - - - - - - - - +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
-

Écoutez nous

-
+

Écoutez nous

Édito 1

@@ -129,13 +144,11 @@
-
-

Contactez nous

-
+

Contactez nous

- +
@@ -147,8 +160,8 @@
- - + +
diff --git a/src/main.css b/src/main.css index e69de29..840a564 100644 --- a/src/main.css +++ b/src/main.css @@ -0,0 +1,135 @@ +body { + max-width: 1300px; + margin: auto; +} + +header { + text-align: center; +} + +header .button { + display: inline-block; + border-radius: 100%; + width: 4.9em; + height: 4.9em; + line-height: 4.75em; + text-align: center; + font-size: 1.25em; + padding: 0.5em; + background-color: #a7e3f0; + text-decoration: none; + color: black; +} + +.profil { + display: inline-flex; + width: 49%; +} + +.profil:nth-child(2n) { + flex-direction: row-reverse; +} + +.profil > div { + padding: 0 10px; +} + +.profil img { + height: 100px; + border-radius: 100%; +} + +.participants { + display: flex; +} + +.participants > div { + flex: 1 1 auto; + text-align: center; +} + + +#galerie .content{ + display: grid; + grid-template-columns: repeat(11, 1fr); + grid-template-rows: repeat(9, 9%); + grid-gap: 1rem; + width: 1250px; + height: 670px; + margin: auto; +} + +#galerie img{ + width: 100%; + height: 100%; + object-fit: cover; +} + +#galerie .content>div:nth-child(1){ + grid-column: span 3; + grid-row: span 6; +} +#galerie .content>div:nth-child(2){ + grid-column: span 2; + grid-row: span 3; +} +#galerie .content>div:nth-child(3){ + grid-column: span 3; + grid-row: span 5; +} +#galerie .content>div:nth-child(4){ + grid-column: span 3; + grid-row: span 2; +} +#galerie .content>div:nth-child(5){ + grid-column: span 3; + grid-row: span 3; +} +#galerie .content>div:nth-child(6){ + grid-column: span 2; + grid-row: span 3; +} +#galerie .content>div:nth-child(7){ + grid-column: span 6; + grid-row: span 4; +} +#galerie .content>div:nth-child(8){ + grid-column: span 2; + grid-row: span 3; +} +#galerie .content>div:nth-child(9){ + grid-column: span 3; + grid-row: span 3; +} + +#contact { + padding: 0 0 3em; +} + +#contact form > div { + padding: 0 0 1.1rem; +} + +#contact label { + display: block; + font-weight: 600; + line-height: 1.5; + letter-spacing: 0.075em; + text-transform: uppercase; + margin: 0 0 0.75rem 0; +} + +#contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact select, #contact textarea { + display: block; + outline: 0; + padding: 0 0.55rem; + text-decoration: none; + width: 100%; + color: inherit; + line-height: 2.8em; +} + +#contact textarea { + padding: 0.75rem 0.55rem; + line-height: 1.1em; +} \ No newline at end of file