diff --git a/css/styles.css b/css/styles.css index e69de29..c28ffca 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,341 @@ +@font-face { + font-family: 'Cash Currency'; + src: url(../fonts/Cash\ Currency.woff2); + font-weight: 400; +} + +@font-face { + font-family: 'Beauty Florist'; + src: url(../fonts/Beauty\ Florist.woff2); + font-weight: 400; +} + +@font-face { + font-family: 'Chemy Retro'; + src: url(../fonts/ChemyRetro_v01.woff2); + font-weight: 400; +} + +@font-face { + font-family: 'Love Craft'; + src: url(../fonts/Love\ Craft.woff2); + font-weight: 400; +} + +html { + background-color: #F4F0EC; +} + +body { + scroll-behavior: smooth; + margin: 0 auto; + max-width: 375px; +} + +/* et s'il était caché jusqu' main? */ +nav { + position: sticky; + top: 0%; + display: flex; + flex-direction: row; + align-content: flex-start; + align-items: center; + padding: 5px; + background-color: #776963; +} + +footer { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: #776963; + height: 90px; + margin-top: 50px; +} + +footer img { + height: 55px; +} + +footer a { + color: #F4F0EC; + text-decoration: none; + font-size: 10px; + font-family: 'Seravek'; +} + +/* comment organiser flèches là */ +h1 { + font-family: 'Cash Currency'; + font-size: 25px; + color: #776963; + font-weight: 400; +} + +h2 { + font-family: 'Cash Currency'; + font-size: 11px; + color: #776963; + margin: 30px 20px 10px; +} + +h3 { + font-size: 15px; + height: 45px; + display: block; + text-align: center; + margin: auto; + padding: 10px +} + +.fifties h3 { + font-family: 'Beauty Florist'; + color: #F1E9BA; + background-color: #EE7670; +} + +.sixties h3 { + font-family: 'Chemy Retro'; + color: #CF2854; + background-color: #4B2D71; +} + +.seventies h3 { + font-family: 'Love Craft'; + color: #F4CC21; + background-color: #633526; +} + +.artist h2 { + color: inherit; +} + +.artist p { + color: inherit; + margin-left: 20px; +} + +h4 { + font-family: 'Seravek'; + font-weight: 600; + font-size: 17px; + margin: 0; +} + +h5 { + font-family: 'Seravek'; + font-size: 14px; + font-weight: 400; + font-style: italic; + color: inherit; +} + +p { + font-family: 'Seravek'; + font-size: 14px; + font-weight: 400; + color: #776963; +} + +img{ + max-width: 375px; +} + +#frank-preview, +#arbus-preview, +#meatyard-preview { + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #F3E7E2; + border: 1px solid; + border-left: none; + border-right: none; + margin-bottom: 30px; +} + +#frank-preview { + border-color: #E95D0C; +} + +#arbus-preview { + border-color: #4B2D71; +} + +#meatyard-preview { + border-color: #633526; +} + +#top img { + height: 135px; + margin: 15px 20px; +} + +a { + text-decoration: none; + color: inherit; +} + +.big-amber { + position: absolute; + top: 10px; + right: 20px; + height: 70px; +} + +.small-amber { + height: 25px; + flex-grow: 1; +} +/* flèches sur image */ +.preview-box { + height: 100%; +} + +.button-left { + height: 10px; + top: 325px; + left: 20px; +} + +.button-right { + height: 10px; + top: 325px; + left: 332px; +} + +.button-home { + height: 15px; +} + +.button-top { + height: 15px; +} + +.fifties .button-buy { + border-color: #65ADB3; +} + +.sixties .button-buy { + border-color: #EA541F; +} + +.seventies .button-buy { + border-color: #87AC29; +} + +.price { + font-family: 'Seravek'; + font-size: 25px; + font-weight: 400; + margin: 0; + color: inherit; +} + +#resellers { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} + +#resellers img { + max-height: 25px; + max-width: 100px; +} +.contact { + display: flex; + flex-direction: column; + margin: 15px 10px; +} + +.informations{ + width: 250px; + margin: 0 auto; + padding: 20px; + display: block; +} + +.artist { + padding: 0 20px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + color: #F3E7E2; +} + +.biography { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: baseline; + align-items: flex-start; +} + +.biography img { + max-width: 155px; + margin: 20px 0; +} + +.works img { + width: 375px; + margin-bottom: 30px; +} + +.sell { + display: flex; + flex-direction: column; + justify-items: flex-start; + align-items: flex-end; +} + +.button-buy { + font-family: 'Seravek'; +} + +.button-buy, +.button-others { + font-size: 18px; + border: 1px solid; + width: 200px; + margin: 30px auto; + display: block; + padding: 10px; + text-align: center; +} + +.button-others { + font-family: 'Cash Currency'; + font-weight: 400; +} + +.fifties .artist { + background-color: #EE7670; +} + +.sixties .artist { + background-color: #4B2D71; +} + +.seventies .artist { + background-color: #633526; +} + +.fifties { + color: #65ADB3; +} + +.sixties { + color: #EA541F; +} + +.seventies { + color: #87AC29; +} + +header img { + display: block; +} \ No newline at end of file diff --git a/fifties.html b/fifties.html new file mode 100644 index 0000000..8c9daac --- /dev/null +++ b/fifties.html @@ -0,0 +1,109 @@ + + + + + + fifties + + + + +
+ Une photo de Frank montrant un bus rempli d'américains +
+
+
+
+

Robert Frank

+ image du produit et du packaging +
+
+
+ Acheter +

190.-

+

OneBuds Pro

+
+ tableau d'informations +
+
+
+

Robert Frank

+
+ portrait de Robert Frank +

+ Robert Frank crée une nou- velle forme de photogra- phie vernaculaire + et redéfi- nit, comme le firent les au- teurs de la beat generation, + une image de la société américaine non idéalisée. Il donne à voir les + marginaux, les espaces vides, la pauvre- té, l'avidité et les excès. +

+
+
+
Quelques autres photo de cet artiste
+ une photo de Robert Frank + une photo de Robert Frank + une photo de Robert Frank + une photo de Robert Frank + une photo de Robert Frank + une photo de Robert Frank +
+
+ Autres produits + +
+ + + \ No newline at end of file diff --git a/fonts/Beauty Florist.woff2 b/fonts/Beauty Florist.woff2 new file mode 100644 index 0000000..987dc4f Binary files /dev/null and b/fonts/Beauty Florist.woff2 differ diff --git a/fonts/Cash Currency.woff2 b/fonts/Cash Currency.woff2 new file mode 100644 index 0000000..7f75f8e Binary files /dev/null and b/fonts/Cash Currency.woff2 differ diff --git a/fonts/ChemyRetro_v01.woff2 b/fonts/ChemyRetro_v01.woff2 new file mode 100644 index 0000000..e7142ed Binary files /dev/null and b/fonts/ChemyRetro_v01.woff2 differ diff --git a/fonts/Love Craft.woff2 b/fonts/Love Craft.woff2 new file mode 100644 index 0000000..1468c4d Binary files /dev/null and b/fonts/Love Craft.woff2 differ diff --git a/img/arbus-main-picture-detail.webp b/img/arbus-main-picture-detail.webp new file mode 100644 index 0000000..136acb9 Binary files /dev/null and b/img/arbus-main-picture-detail.webp differ diff --git a/img/arbus-main-picture.webp b/img/arbus-main-picture.webp new file mode 100644 index 0000000..a62ac75 Binary files /dev/null and b/img/arbus-main-picture.webp differ diff --git a/img/arbus-others-1.webp b/img/arbus-others-1.webp new file mode 100644 index 0000000..c9d5e91 Binary files /dev/null and b/img/arbus-others-1.webp differ diff --git a/img/arbus-others-2.webp b/img/arbus-others-2.webp new file mode 100644 index 0000000..2045e14 Binary files /dev/null and b/img/arbus-others-2.webp differ diff --git a/img/arbus-others-3.webp b/img/arbus-others-3.webp new file mode 100644 index 0000000..44147eb Binary files /dev/null and b/img/arbus-others-3.webp differ diff --git a/img/arbus-others-4.webp b/img/arbus-others-4.webp new file mode 100644 index 0000000..4406877 Binary files /dev/null and b/img/arbus-others-4.webp differ diff --git a/img/arbus-others-5.webp b/img/arbus-others-5.webp new file mode 100644 index 0000000..203e921 Binary files /dev/null and b/img/arbus-others-5.webp differ diff --git a/img/arbus-others-6.webp b/img/arbus-others-6.webp new file mode 100644 index 0000000..7c39329 Binary files /dev/null and b/img/arbus-others-6.webp differ diff --git a/img/arbus-portrait.webp b/img/arbus-portrait.webp new file mode 100644 index 0000000..f4db01f Binary files /dev/null and b/img/arbus-portrait.webp differ diff --git a/img/arrow-left.svg b/img/arrow-left.svg new file mode 100644 index 0000000..4655a01 --- /dev/null +++ b/img/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/arrow-right.svg b/img/arrow-right.svg new file mode 100644 index 0000000..3634502 --- /dev/null +++ b/img/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/arrow-top.svg b/img/arrow-top.svg new file mode 100644 index 0000000..aea5fdc --- /dev/null +++ b/img/arrow-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/contact.svg b/img/contact.svg new file mode 100644 index 0000000..a53ee74 --- /dev/null +++ b/img/contact.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/digitec-logo.webp b/img/digitec-logo.webp new file mode 100644 index 0000000..b05f634 Binary files /dev/null and b/img/digitec-logo.webp differ diff --git a/img/fnac-logo.webp b/img/fnac-logo.webp new file mode 100644 index 0000000..24dbd8e Binary files /dev/null and b/img/fnac-logo.webp differ diff --git a/img/frank-main-picture-detail.webp b/img/frank-main-picture-detail.webp new file mode 100644 index 0000000..940f33e Binary files /dev/null and b/img/frank-main-picture-detail.webp differ diff --git a/img/frank-main-picture.webp b/img/frank-main-picture.webp new file mode 100644 index 0000000..178689f Binary files /dev/null and b/img/frank-main-picture.webp differ diff --git a/img/frank-others-1.webp b/img/frank-others-1.webp new file mode 100644 index 0000000..89ff198 Binary files /dev/null and b/img/frank-others-1.webp differ diff --git a/img/frank-others-2.webp b/img/frank-others-2.webp new file mode 100644 index 0000000..f5b5e12 Binary files /dev/null and b/img/frank-others-2.webp differ diff --git a/img/frank-others-3.webp b/img/frank-others-3.webp new file mode 100644 index 0000000..3d4b41d Binary files /dev/null and b/img/frank-others-3.webp differ diff --git a/img/frank-others-4.webp b/img/frank-others-4.webp new file mode 100644 index 0000000..ced913a Binary files /dev/null and b/img/frank-others-4.webp differ diff --git a/img/frank-others-5.webp b/img/frank-others-5.webp new file mode 100644 index 0000000..587f7d4 Binary files /dev/null and b/img/frank-others-5.webp differ diff --git a/img/frank-others-6.webp b/img/frank-others-6.webp new file mode 100644 index 0000000..c979908 Binary files /dev/null and b/img/frank-others-6.webp differ diff --git a/img/frank-portrait.webp b/img/frank-portrait.webp new file mode 100644 index 0000000..4601677 Binary files /dev/null and b/img/frank-portrait.webp differ diff --git a/img/home.svg b/img/home.svg new file mode 100644 index 0000000..96810d8 --- /dev/null +++ b/img/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/informations-blue.svg b/img/informations-blue.svg new file mode 100644 index 0000000..77889fd --- /dev/null +++ b/img/informations-blue.svg @@ -0,0 +1 @@ +Etanchéité ipx7Son clair et basses richesAutonomie 15hPort confortableBluetooth 5.1Toucher pour contrôler \ No newline at end of file diff --git a/img/informations-green.svg b/img/informations-green.svg new file mode 100644 index 0000000..932e995 --- /dev/null +++ b/img/informations-green.svg @@ -0,0 +1 @@ +Etanchéité ipx7Son clair et basses richesAutonomie 15hPort confortableBluetooth 5.1Toucher pour contrôler \ No newline at end of file diff --git a/img/informations-orange.svg b/img/informations-orange.svg new file mode 100644 index 0000000..0dfc94c --- /dev/null +++ b/img/informations-orange.svg @@ -0,0 +1 @@ +Etanchéité ipx7Son clair et basses richesAutonomie 15hPort confortableBluetooth 5.1Toucher pour contrôler \ No newline at end of file diff --git a/img/interdiscount-logo.webp b/img/interdiscount-logo.webp new file mode 100644 index 0000000..6725919 Binary files /dev/null and b/img/interdiscount-logo.webp differ diff --git a/img/logo-amber.svg b/img/logo-amber.svg new file mode 100644 index 0000000..34d1581 --- /dev/null +++ b/img/logo-amber.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/meatyard-main-picture-detail.webp b/img/meatyard-main-picture-detail.webp new file mode 100644 index 0000000..6de3a02 Binary files /dev/null and b/img/meatyard-main-picture-detail.webp differ diff --git a/img/meatyard-main-picture.webp b/img/meatyard-main-picture.webp new file mode 100644 index 0000000..fffcca6 Binary files /dev/null and b/img/meatyard-main-picture.webp differ diff --git a/img/meatyard-others-1.webp b/img/meatyard-others-1.webp new file mode 100644 index 0000000..89ad1ab Binary files /dev/null and b/img/meatyard-others-1.webp differ diff --git a/img/meatyard-others-2.webp b/img/meatyard-others-2.webp new file mode 100644 index 0000000..573a9d5 Binary files /dev/null and b/img/meatyard-others-2.webp differ diff --git a/img/meatyard-others-3.webp b/img/meatyard-others-3.webp new file mode 100644 index 0000000..f212cb4 Binary files /dev/null and b/img/meatyard-others-3.webp differ diff --git a/img/meatyard-others-4.webp b/img/meatyard-others-4.webp new file mode 100644 index 0000000..057c83a Binary files /dev/null and b/img/meatyard-others-4.webp differ diff --git a/img/meatyard-others-5.webp b/img/meatyard-others-5.webp new file mode 100644 index 0000000..5c23294 Binary files /dev/null and b/img/meatyard-others-5.webp differ diff --git a/img/meatyard-others-6.webp b/img/meatyard-others-6.webp new file mode 100644 index 0000000..9783d8b Binary files /dev/null and b/img/meatyard-others-6.webp differ diff --git a/img/meatyard-portrait.webp b/img/meatyard-portrait.webp new file mode 100644 index 0000000..0caadd5 Binary files /dev/null and b/img/meatyard-portrait.webp differ diff --git a/img/media-markt-logo.webp b/img/media-markt-logo.webp new file mode 100644 index 0000000..e276154 Binary files /dev/null and b/img/media-markt-logo.webp differ diff --git a/img/preview-arbus.webp b/img/preview-arbus.webp new file mode 100644 index 0000000..7bf584e Binary files /dev/null and b/img/preview-arbus.webp differ diff --git a/img/product-arbus.jpg b/img/product-arbus.jpg new file mode 100644 index 0000000..755c695 Binary files /dev/null and b/img/product-arbus.jpg differ diff --git a/img/product-frank.jpg b/img/product-frank.jpg new file mode 100644 index 0000000..ea4afb5 Binary files /dev/null and b/img/product-frank.jpg differ diff --git a/img/product-meatyard.jpg b/img/product-meatyard.jpg new file mode 100644 index 0000000..54b195d Binary files /dev/null and b/img/product-meatyard.jpg differ diff --git a/index.html b/index.html index 7520850..ab464c4 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,119 @@ - + - + home + - - + +
+ logo amber + photo d'un des trois packaging +
+
+ +
+

Vintage

+ +
+

Robert Frank

+ détail d'une photo de Robert Frank +
+ + +
+

Diane Arbus

+ détail d'une photo de Diane Arbus +
+ + +
+

Ralph Eugene Meatyard

+ détail d'une photo de Ralp Eugene Meatyard +
+ +
+
+

La photographie

+

+ Le premier procédé photographique ou héliographie a été inventé par + Nicéphore Niépce vers 1824. Les images étaient obtenues avec du bitume + de Judée étendu sur une plaque d’argent, après un temps de pose de + plusieurs jours. + En 1829, Niépce associa à ses recherches, Louis Jacques Mandé Daguerre. + En 1832, ils mirent au point, à partir du résidu de la distillation de + l’essence de lavande, un second procédé produisant des images en une + journée de temps de pose. +

+
+
+

Nos revendeurs

+ +
+
+ + + \ No newline at end of file diff --git a/seventies.html b/seventies.html new file mode 100644 index 0000000..5c0be97 --- /dev/null +++ b/seventies.html @@ -0,0 +1,109 @@ + + + + + + seventies + + + + +
+ Une photo de Meatyard montrant un couple portant des masques +
+
+
+
+

Ralph Eugene Meatyard

+ image du produit et du packaging +
+
+
+ Acheter +

190.-

+

OneBuds Pro

+
+ tableau d'informations +
+
+
+

Ralph Eugene Meatyard

+
+ portrait de Ralph Eugène Meatyard +

+ La photographie de Meatyard est influencée par sa passion pour la + littérature et sa fascination pour le passé. Ses drames symboliques + sont mis en scène dans des endroits ordinaires, souvent à l'abandon, et + ont les acteurs sont la plupart du temps des membres de sa propre famille. +

+
+
+
Quelques autres photo de cette artiste
+ une photo de Ralph Eugène Meatyard + une photo de Ralph Eugène Meatyard + une photo de Ralph Eugène Meatyard + une photo de Ralph Eugène Meatyard + une photo de Ralph Eugène Meatyard + une photo de Ralph Eugène Meatyard +
+
+ Autres produits + +
+ + + \ No newline at end of file diff --git a/sixties.html b/sixties.html new file mode 100644 index 0000000..708a03b --- /dev/null +++ b/sixties.html @@ -0,0 +1,110 @@ + + + + + + sixties + + + + +
+ Une photo d'Arbus montrant une femme et son chien +
+
+
+
+

Diane Arbus

+ image du produit et du packaging +
+
+
+ Acheter +

190.-

+

OneBuds Pro

+
+ tableau d'informations +
+
+
+

Diane Arbus

+
+ portrait de Diane Arbus +

+ Les photographies d'Arbus suscitent toujours la même fascination, les + mêmes controverses. Elles pénètrent au plus profond de nous-même + avec la force d'une rencontre personnelle et, ce faisant, elles + transforment la manière dont nous voyons le monde et les gens qui + nous en- tourent. +

+
+
+
Quelques autres photo de cette artiste
+ une photo de Diane Arbus + une photo de Diane Arbus + une photo de Diane Arbus + une photo de Diane Arbus + une photo de Diane Arbus + une photo de Diane Arbus +
+
+ Autres produits + +
+ + + \ No newline at end of file