diff --git a/50s.html b/50s.html new file mode 100644 index 0000000..8693cb3 --- /dev/null +++ b/50s.html @@ -0,0 +1,82 @@ + + + + + + + + + + + +
+

"I hate rain
at the funeral"

+
+
+

Airbuds pro touch

+

199,99 chf

+
+
+
+ Une photo du produit +
+ Une photo du produit + Une photo du produit +
+
+
+
    +
  • Réduction du bruit active
    • +
  • Fonction tile tracking activée
    • +
  • Amplification des aigus et des basses pour un son optimisé
    • +
  • controle de la balance pour compenser le déséquiliibre sonore
    • +
  • Résistance à l’eau et à la transpiration
    • +
  • Jusqu’à 5 heures d’écoute sûr une seule charge
    • +
+ Acheter +
+
+

Mettez de la magie dans vos oreilles + Les Airbuds Pro touch sont dotés de la technologie de Réduction + active du bruit pour vous immerger dans le son et d’un design adaptatif + qui permet de les porter confortablement toute la journée. + Et ils sont prêts à être utilisés dès leur sortie du boîtier. +

+
+
+

Autres produits

+
+
+ Une photo du produit + +
Airbuds pro touch sixties
+
+
+ Une photo du produit + +
Airbuds pro touch seventies
+
+
+
+
+ + + diff --git a/60s.html b/60s.html new file mode 100644 index 0000000..1ef71b3 --- /dev/null +++ b/60s.html @@ -0,0 +1,82 @@ + + + + + + + + + + + +
+

"We all go a little mad sometimes"

+
+
+

Airbuds pro touch

+

199,99 chf

+
+
+
+ Une photo du produit +
+ Une photo du produit + Une photo du produit +
+
+
+
    +
  • Réduction du bruit active
    • +
  • Fonction tile tracking activée
    • +
  • Amplification des aigus et des basses pour un son optimisé
    • +
  • controle de la balance pour compenser le déséquiliibre sonore
    • +
  • Résistance à l’eau et à la transpiration
    • +
  • Jusqu’à 5 heures d’écoute sûr une seule charge
    • +
+ Acheter +
+
+

Mettez de la magie dans vos oreilles + Les Airbuds Pro touch sont dotés de la technologie de Réduction + active du bruit pour vous immerger dans le son et d’un design adaptatif + qui permet de les porter confortablement toute la journée. + Et ils sont prêts à être utilisés dès leur sortie du boîtier. +

+
+
+

Autres produits

+
+
+ Une photo du produit + +
Airbuds pro touch fifties
+
+
+ Une photo du produit + +
Airbuds pro touch seventies
+
+
+
+ +
+ + \ No newline at end of file diff --git a/70s.html b/70s.html new file mode 100644 index 0000000..ea760d5 --- /dev/null +++ b/70s.html @@ -0,0 +1,82 @@ + + + + + + + + + + + +
+

"Mr. Rusk, you’re not wearing your tie"

+
+
+

Airbuds pro touch

+

199,99 chf

+
+
+
+ Une photo du produit +
+ Une photo du produit + Une photo du produit +
+
+
+
    +
  • Réduction du bruit active
    • +
  • Fonction tile tracking activée
    • +
  • Amplification des aigus et des basses pour un son optimisé
    • +
  • controle de la balance pour compenser le déséquiliibre sonore
    • +
  • Résistance à l’eau et à la transpiration
    • +
  • Jusqu’à 5 heures d’écoute sûr une seule charge
    • +
+ Acheter +
+
+

Mettez de la magie dans vos oreilles + Les Airbuds Pro touch sont dotés de la technologie de Réduction + active du bruit pour vous immerger dans le son et d’un design adaptatif + qui permet de les porter confortablement toute la journée. + Et ils sont prêts à être utilisés dès leur sortie du boîtier. +

+
+
+

Autres produits

+
+
+ Une photo du produit + +
Airbuds pro touch fifties
+
+
+ Une photo du produit + +
Airbuds pro touch sixties
+
+
+
+ +
+ + diff --git a/SVG/50s_pattern.svg b/SVG/50s_pattern.svg new file mode 100644 index 0000000..3982110 --- /dev/null +++ b/SVG/50s_pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/SVG/60s_pattern.svg b/SVG/60s_pattern.svg new file mode 100644 index 0000000..70ac415 --- /dev/null +++ b/SVG/60s_pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/SVG/70s_pattern.svg b/SVG/70s_pattern.svg new file mode 100644 index 0000000..0271426 --- /dev/null +++ b/SVG/70s_pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/SVG/logo_amber.svg b/SVG/logo_amber.svg new file mode 100644 index 0000000..984514c --- /dev/null +++ b/SVG/logo_amber.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index e69de29..df54d15 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,332 @@ +News Gothic Std Bold{ +font-family: news-gothic-std, sans-serif; +font-weight: 700; +font-style: normal; +} + +News Gothic Std Bold Oblique{ +font-family: news-gothic-std, sans-serif; +font-weight: 700; +font-style: italic; +} + +News Gothic Std Oblique{ +font-family: news-gothic-std, sans-serif; +font-weight: 200; +font-style: italic; +} + +News Gothic Std Medium{ +font-family: news-gothic-std, sans-serif; +font-weight: 400; +font-style: normal; +} + +Clarendon URW Regular{ +font-family: clarendon-urw, serif; +font-weight: 400; +font-style: normal; +} + +Clarendon URW Bold{ +font-family: clarendon-urw, serif; +font-weight: 700; +font-style: normal; +} + +Clarendon URW Regular Oblique{ +font-family: clarendon-urw, serif; +font-weight: 400; +font-style: italic; +} + +Clarendon URW Bold Oblique{ +font-family: clarendon-urw, serif; +font-weight: 700; +font-style: italic; +} + +html{ + max-width: 375px; + scroll-behavior: smooth; +} + +body{ + background-color: #1b1c1e; + margin: 0; + max-width: 375px; + box-sizing: border-box; +} + +header{ + min-height: 285px; +} + +h1{ + font-family: clarendon-urw, serif; + font-weight: 400; + color: #fffefd; + font-size: 24px; + margin-bottom: 20px; + margin-top: 0; + padding-top: 20px; +} + +h2{ + font-family: clarendon-urw, serif; + font-weight: 400; + color: #fffefd; + font-size: 20px; +} + + +a{ + font-family: clarendon-urw, serif; + font-weight: 400; + font-style: normal; + font-size: 21px; + text-decoration: none; + color: #fffefd; + cursor: pointer; +} + +nav{ + display: flex; + flex-flow: row nowrap; + position: sticky; + align-items: center; + top: 0; + padding: 25px 15px; + background-color: #1b1c1e; +} + +p, +li, +.home-page p{ + color: #fffefd; + text-align: left; + font-family: news-gothic-std, sans-serif; + font-weight: 200; + font-size: 18px; +} + +figcaption{ + font-family: news-gothic-std, sans-serif; + font-weight: 400; + font-style: normal; + color: #fffefd; + font-size: 14px; + +} + +li{ + font-size: 15px; +} + +ul{ + max-height: 100px; + max-width: 250px; + overflow: scroll; +} + + +nav img{ + max-height: 45px; +} + +header p{ + font-size: 36px; + font-family: news-gothic-std, sans-serif; + font-weight: 700; + padding: 20px 20px 0 20px; +} + +article img{ + max-height: 200px; +} + +article p{ + background-color: #1b1c1e; + padding: 25px; + margin-bottom: 40px; + box-sizing: border-box; +} + +figure img{ + margin: 0; + max-height: 150px; + padding: 0; +} + +.fifties-page header{ + background-image: url(../img/50s_header.jpg); +} + +.sixties-page header{ + background-image: url(../img/60s_header.webp); +} + +.seventies-page header{ + background-image: url(../img/70s_header.webp); +} + +.home-page p{ + background-image: url(../img/accueil_hitchcock_header.webp); + text-align: left; + font-size: 14px; + margin: 0; + padding: 60px 20px; +} + +.home-page img{ + max-width: 375px; + margin: 0; +} + +.button{ + font-family: clarendon-urw, serif; + font-weight: 700; + font-style: normal; + font-size: 18px; + color: #fffefd; + background-color: #1b1c1e; + padding: 5px 10px; + border-radius: 15px; +} + +.product-page{ + position: absolute; + right: 20px; +} + +.sale-product{ + display: flex; + flex-flow: row nowrap; + margin: 50px 0 50px; + padding: 20px; + background-color: #1b1c1ec7; +} + +.sale-product-pictures{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; +} + +.sale-product-text{ + display: flex; + flex-flow: column wrap; + align-items: flex-end; + justify-content: flex-start + +} + +.fifties-page main .product{ + background-image: url(../SVG/50s_pattern.svg); +} + +.sixties-page main .product{ + background-image: url(../SVG/60s_pattern.svg); +} + +.seventies-page main .product{ + background-image: url(../SVG/70s_pattern.svg); +} + +.proposal_picture img{ + max-height: 70px; +} + +.proposal_picture{ + display: flex; + flex-flow: row nowrap; +} + +.proposal_picture img{ + margin: 5px 5px 0 0; +} + +.other-product{ + padding: 20px; + margin-top: 50px; +} + +.other-product-presentation{ + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; +} + +.presentation-product{ + background-color: #1b1c1e; + padding: 20px 20px 20px; +} + +.presentation-product-picture img{ + max-height: 250px; +} +.presentation-product-other-view img{ + max-height: 125px; + padding: 10px 10px 5px 0; +} + +.presentation-product-picture-60s .presentation-product-other-view img{ + padding: 10px 0 5px 10px; +} + +.presentation-product-other-view{ + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-content: flex-start; +} + +.presentation-product-picture{ + display: flex; + flex-flow: column wrap; + align-items: flex-start; + margin: 50px 0; +} + +.presentation-product-picture-60s{ + align-items: flex-end; +} + +.presentation-product-picture-70s{ + align-items: center; + justify-content: center; +} + +.home-page-product ul, +.home-page-product ul li, +.home-page-product a, +.contact a{ + max-height: 400px; + text-align: center; + font-family: news-gothic-std, sans-serif; + font-weight: 400; + font-style: normal; + cursor: pointer; +} + +.home-page-product a:active{ + color: #1b1c1e; +} + +.home-page-product ul{ + margin-top: 20px; +} + +.home-page-product article{ + padding: 20px; +} + +.contact{ + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + align-items: flex-start; + padding-bottom: 60px; +} \ No newline at end of file diff --git a/img/50s_header.jpg b/img/50s_header.jpg new file mode 100644 index 0000000..26bccf7 Binary files /dev/null and b/img/50s_header.jpg differ diff --git a/img/50s_product_back.webp b/img/50s_product_back.webp new file mode 100644 index 0000000..6a56761 Binary files /dev/null and b/img/50s_product_back.webp differ diff --git a/img/50s_product_front.webp b/img/50s_product_front.webp new file mode 100644 index 0000000..0d0f44c Binary files /dev/null and b/img/50s_product_front.webp differ diff --git a/img/50s_product_side.webp b/img/50s_product_side.webp new file mode 100644 index 0000000..8ad3a7a Binary files /dev/null and b/img/50s_product_side.webp differ diff --git a/img/60s_header.webp b/img/60s_header.webp new file mode 100644 index 0000000..88af239 Binary files /dev/null and b/img/60s_header.webp differ diff --git a/img/60s_product_back.webp b/img/60s_product_back.webp new file mode 100644 index 0000000..cc375aa Binary files /dev/null and b/img/60s_product_back.webp differ diff --git a/img/60s_product_front.webp b/img/60s_product_front.webp new file mode 100644 index 0000000..f0a4e46 Binary files /dev/null and b/img/60s_product_front.webp differ diff --git a/img/60s_product_side.webp b/img/60s_product_side.webp new file mode 100644 index 0000000..7064772 Binary files /dev/null and b/img/60s_product_side.webp differ diff --git a/img/70s_header.webp b/img/70s_header.webp new file mode 100644 index 0000000..7b2c50d Binary files /dev/null and b/img/70s_header.webp differ diff --git a/img/70s_product_back.webp b/img/70s_product_back.webp new file mode 100644 index 0000000..04def35 Binary files /dev/null and b/img/70s_product_back.webp differ diff --git a/img/70s_product_front.webp b/img/70s_product_front.webp new file mode 100644 index 0000000..6f453af Binary files /dev/null and b/img/70s_product_front.webp differ diff --git a/img/70s_product_side.webp b/img/70s_product_side.webp new file mode 100644 index 0000000..ab10488 Binary files /dev/null and b/img/70s_product_side.webp differ diff --git a/img/accueil_50s_header.webp b/img/accueil_50s_header.webp new file mode 100644 index 0000000..3098caa Binary files /dev/null and b/img/accueil_50s_header.webp differ diff --git a/img/accueil_60s_header.webp b/img/accueil_60s_header.webp new file mode 100644 index 0000000..b845ceb Binary files /dev/null and b/img/accueil_60s_header.webp differ diff --git a/img/accueil_70s_header.webp b/img/accueil_70s_header.webp new file mode 100644 index 0000000..14b6fc5 Binary files /dev/null and b/img/accueil_70s_header.webp differ diff --git a/img/accueil_hitchcock_header.webp b/img/accueil_hitchcock_header.webp new file mode 100644 index 0000000..3685aa4 Binary files /dev/null and b/img/accueil_hitchcock_header.webp differ diff --git a/index.html b/index.html index 7520850..33e8afa 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,100 @@ + + - + + +
+ des images du film stage fright +

+ Amber est une marque d'écouteurs sans fil haut de gamme. + Ce site est dédié à l'édition limitée et collector "revival", + sur le thème des films de Hitchcok. Trois décénnies ont été choisie, + les années 50 avec le film "Stage Fright", les années 60 avec le film "Psycho", + les années 70 avec le film "Frenzy". +

+
+
+
+
+ + Une imade du produit 50s + +
+ + Une imade du produit 50s + + + Une imade du produit 50s + +
+
+
+ + Une imade du produit 60s + +
+ + Une imade du produit 60s + + + Une imade du produit 60s + +
+
+
+ + Une imade du produit 70s + +
+ + Une imade du produit 70s + + + Une imade du produit 70s + +
+
+
+
+

Revendeurs

+ +
+
+ +