diff --git a/css/styles.css b/css/styles.css index e69de29..07e510f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,477 @@ +@font-face { + font-family: "ITC Anna Std"; + src: url("AnnaStd.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Bell MT Std"; + src: url("BellMTStd-Bold.woff2") format("woff2"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Bell Gothic Std"; + src: url("BellGothicStd-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Myriad Pro"; + src: url("MyriadPro-Regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: white; +} + +header { + background-color: black; +} +.header-banner { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; +} + +.amber-logo { + display: block; + margin: auto; + max-width: 54px; + padding: 10px 0 5px; +} + +.shopping-cart { + position: absolute; + right: 0; + padding-right: 23px; + max-width: 20px; + max-height: 16px; + padding-top: 16px; +} + +article { + border: solid black 2px; + border-radius: 15px; + margin: 34px 26px 34px 26px; + padding: 23px 11px 0px 20px; +} + +article p { + font-family: "ITC Anna Std"; + text-align: center; + font-size: 20px; + margin-bottom: 0px; +} + +.airpod-icon { + display: flex; + width: 35px; + height: 40px; + padding-left: 220px; +} + +main { + background-color: black; + padding-bottom: 15px; +} + +h1 { + font-family: "ITC Anna Std"; + text-align: center; + color: white; + font-weight: normal; + font-size: 25px; + padding-top: 20px; +} + +main a { + font-family: "ITC Anna Std"; + color: white; + font-weight: normal; + font-size: 15px; + padding-left: 10px; + padding-top: 5px; + text-decoration: none; +} + +.button { + background-color: black; + border: solid white; + margin-right: 60px; + padding-right: 20px; +} + +.card { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 15px; +} + +.card-tarantula { + background-color: #eb912e; +} + +.card-psychose { + background-color: #d32e2c; +} + +.card-halloween { + background-color: #ec711e; +} + +p { + text-align: left; + margin: 0 0 1em 0; +} + +.image { + width: 72px; +} + +nav { + background-color: white; + margin: 26px 26px 24px 40px; +} + +nav h1 { + color: black; + font-size: 25px; + font-family: "ITC Anna Std"; + text-align: center; + padding-top: 0px; +} + +.sellers { + align-items: center; + display: grid; + grid-template-columns: 0fr 0fr 0fr; + grid-row-gap: 14px; + grid-column-gap: 34px; +} + +.products-and-links { + margin: 50px; +} + +.microspot { + width: 58px; + height: 58px; +} +.fnac { + width: 78px; + height: 48px; +} + +.galaxus { + width: 42px; + height: 42px; +} + +.mediamarkt { + width: 84px; + height: 48px; +} + +.interdiscount { + width: 65px; + height: 30px; +} + +footer { + background-color: black; +} + +footer h1 { + font-family: "Myriad Pro"; + text-align: center; + color: white; + font-size: 15px; + padding: 28px 0 33px; +} + +footer h2 { + font-family: "Bell MT Std"; + color: #878787; + text-align: center; + font-size: 13px; +} + +footer p { + font-family: "Bell Gothic Std"; + color: #878787; + text-align: center; + font-size: 10px; + padding-top: 5px; +} + +.footer-banner { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-row-gap: 5px; + grid-column-gap: 5px; +} + +.payment-method { + display: block; + margin: auto; + width: 160px; + height: 61px; + padding: 15px 0 33px; +} + +.copyrights { + font-family: "Bell Gothic Std"; + color: white; + font-size: 7px; + margin-left: 26px; +} + +.spotify-logo { + width: 15px; + height: 15px; +} + +.instagram-logo { + width: 15px; + height: 15px; +} + +.twitter-logo { + width: 15px; + height: 15px; +} + +.go-up-button { + width: 25px; + height: 25px; + display: block; + box-shadow: 0 0 10px #33333355; + position: fixed; + bottom: 0; + transform: translate(50%); + right: 50%; + z-index: 2; +} + +.social-media { + display: grid; + grid-template-columns: 0fr 0fr 0fr; + grid-column-gap: 20px; +} + +.amber-logo-footer { + margin-top: 0px; + padding-top: 0px; + max-width: 54px; + display: block; + margin: auto; + padding-bottom: 26px; +} + +/* tarantula */ + +.body-tarantula { + background-color: #eb912e; +} + +.header-tarantula { + background-color: #eb912e; +} + +.footer-tarantula { + background-color: #eb912e; +} + +.main-tarantula { + background-color: #eb912e; +} + +.years { + display: grid; + grid-template-columns: 0fr 0fr 0fr; + grid-column-gap: 95px; + align-items: baseline; + justify-content: center; +} + +h2, a { + font-family: "ITC Anna Std"; + color: white; + text-decoration: none; +} + +.catchphrase { + text-align: center; + font-size: 28px; + padding-top: 0px; +} + +.box-tarantula { + height: 292px; + display: block; + margin: auto; +} + +.airpod-amber-fifties { + width: 100px; + z-index: 1; +} + +h2 { + text-align: center; + font-size: 31px; + text-decoration: none; + margin-top: 46px; +} + +.button-buy { + background-color: black; + border: solid white; + padding-right: 20px; + font-size: 40px; + text-align: center; + margin-left: 40%; + margin-right: 40%; + display: flex; + padding-left: 15px; + margin-bottom: 53px; + margin-top: 36px; +} + +.button-other-products{ + background-color: black; + padding-right: 20px; + font-size: 30px; + text-align: center; + margin-bottom: 96px; + margin-top: 96px; + margin-left: 20%; + margin-right: 20%; + display: flex; + padding-left: 40px; +} + +.description-airpod { + text-align: center; + color: black; + font-family: "ITC Anna Std"; + padding-top: 40px; + font-size: 20px; + margin-left: 26px; + margin-right: 26px; +} + +.nav-tarantula { + position: absolute; + width: 400px; + height: auto; + display: block; + left: 0px; +} + +.button-products { + background-color: black; + border: solid white; + padding-right: 20px; + font-size: 40px; + text-align: center; + margin-left: 40%; + margin-right: 40%; + display: flex; + padding-left: 15px; +} + +.banner-other-pages { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 5px; +} + +.social-media-other { + margin-top: 8px; + padding-left: 20px; + display: grid; + grid-template-columns: 0fr 0fr 0fr; + grid-column-gap: 12px; +} + +/* psychose */ + +.box-psychose { + height: 292px; + display: block; + margin: auto; +} + +.main-psychose { + background-color: #d32e2c; +} + +.main-psychose h2 { + font-family: "ITC Anna Std"; + color: white; + font-size: 31px; +} + +.body-psychose { + background-color: #d32e2c; +} + +.header-psychose { + background-color: #d32e2c; +} + +.footer-psychose { + background-color: #d32e2c; +} + +/* halloween */ + +.box-halloween { + height: 292px; + display: block; + margin: auto; +} + +.main-halloween { + background-color: #ec711e; +} + +.body-halloween { + background-color: #ec711e; +} + +.header-halloween { + background-color: #ec711e; +} + +h3 { + font-family: "ITC Anna Std"; + color: white; + font-size: 40px; +} + +.signature { + font-family: "Myriad Pro"; + font-size: 15px; + color: white; + text-align: center; + padding-bottom: 33px; + padding-top: 14px; +} diff --git a/fonts/.gitkeep b/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/fonts/AnnaStd.woff2 b/fonts/AnnaStd.woff2 new file mode 100644 index 0000000..7aac145 Binary files /dev/null and b/fonts/AnnaStd.woff2 differ diff --git a/fonts/BellGothicStd-Light.woff2 b/fonts/BellGothicStd-Light.woff2 new file mode 100644 index 0000000..2829c2d Binary files /dev/null and b/fonts/BellGothicStd-Light.woff2 differ diff --git a/fonts/BellMTStd-Bold.woff2 b/fonts/BellMTStd-Bold.woff2 new file mode 100644 index 0000000..af3f4d7 Binary files /dev/null and b/fonts/BellMTStd-Bold.woff2 differ diff --git a/fonts/MyriadPro-Regular.woff2 b/fonts/MyriadPro-Regular.woff2 new file mode 100644 index 0000000..ae29965 Binary files /dev/null and b/fonts/MyriadPro-Regular.woff2 differ diff --git a/halloween.html b/halloween.html new file mode 100644 index 0000000..e29efec --- /dev/null +++ b/halloween.html @@ -0,0 +1,65 @@ + + + + + + + Halloween + + +
+
+ + shopping cart +
+
+

50

 +

60

 +

70

+
+

you can't kill the boogeyman

+
+
+ picture of the halloween box +

113.-

+ BUY +

Wireless, long-lasting, great quality + and
gore-geous!

+
+

Katrine Marku

+
+

+ ©2022 MOVING MUSIC INDUSTRIES, TOUS DROITS RÉSERVÉS +

+ logo amber +
+ + + +
+
+ go to the top of the page button + + \ No newline at end of file diff --git a/img/.gitkeep b/img/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/img/airpod-icon.png b/img/airpod-icon.png new file mode 100644 index 0000000..1d37b0d Binary files /dev/null and b/img/airpod-icon.png differ diff --git a/img/caddie.png b/img/caddie.png new file mode 100644 index 0000000..66e0eac Binary files /dev/null and b/img/caddie.png differ diff --git a/img/eikon_VINTAGE_logo_AMBER.png b/img/eikon_VINTAGE_logo_AMBER.png new file mode 100644 index 0000000..04814b4 Binary files /dev/null and b/img/eikon_VINTAGE_logo_AMBER.png differ diff --git a/img/fnac-logo.png b/img/fnac-logo.png new file mode 100644 index 0000000..55d7b10 Binary files /dev/null and b/img/fnac-logo.png differ diff --git a/img/galaxus-logo.png b/img/galaxus-logo.png new file mode 100644 index 0000000..760b28c Binary files /dev/null and b/img/galaxus-logo.png differ diff --git a/img/go-up-black.png b/img/go-up-black.png new file mode 100644 index 0000000..5c55258 Binary files /dev/null and b/img/go-up-black.png differ diff --git a/img/go-up-white.png b/img/go-up-white.png new file mode 100644 index 0000000..1ca65f3 Binary files /dev/null and b/img/go-up-white.png differ diff --git a/img/halloween-box.png b/img/halloween-box.png new file mode 100644 index 0000000..615cbcf Binary files /dev/null and b/img/halloween-box.png differ diff --git a/img/halloween-poster.png b/img/halloween-poster.png new file mode 100644 index 0000000..b96ea48 Binary files /dev/null and b/img/halloween-poster.png differ diff --git a/img/instagram-logo-white.png b/img/instagram-logo-white.png new file mode 100644 index 0000000..2b5dfbd Binary files /dev/null and b/img/instagram-logo-white.png differ diff --git a/img/instagram-logo.png b/img/instagram-logo.png new file mode 100644 index 0000000..7bc82ee Binary files /dev/null and b/img/instagram-logo.png differ diff --git a/img/interdiscount-logo.png b/img/interdiscount-logo.png new file mode 100644 index 0000000..eebae05 Binary files /dev/null and b/img/interdiscount-logo.png differ diff --git a/img/logo-amber.png b/img/logo-amber.png new file mode 100644 index 0000000..ea779b3 Binary files /dev/null and b/img/logo-amber.png differ diff --git a/img/mediamarkt-logo.png b/img/mediamarkt-logo.png new file mode 100644 index 0000000..cc0dd20 Binary files /dev/null and b/img/mediamarkt-logo.png differ diff --git a/img/microspot_logo.png b/img/microspot_logo.png new file mode 100644 index 0000000..7b5ada0 Binary files /dev/null and b/img/microspot_logo.png differ diff --git a/img/payment-method.png b/img/payment-method.png new file mode 100644 index 0000000..797dce0 Binary files /dev/null and b/img/payment-method.png differ diff --git a/img/psychose-box.png b/img/psychose-box.png new file mode 100644 index 0000000..6b4d50c Binary files /dev/null and b/img/psychose-box.png differ diff --git a/img/psychose-poster.png b/img/psychose-poster.png new file mode 100644 index 0000000..bf114d6 Binary files /dev/null and b/img/psychose-poster.png differ diff --git a/img/shopping-cart.png b/img/shopping-cart.png new file mode 100644 index 0000000..093d3d4 Binary files /dev/null and b/img/shopping-cart.png differ diff --git a/img/spotify-white.png b/img/spotify-white.png new file mode 100644 index 0000000..1d70b6a Binary files /dev/null and b/img/spotify-white.png differ diff --git a/img/spotify.png b/img/spotify.png new file mode 100644 index 0000000..3bd9a56 Binary files /dev/null and b/img/spotify.png differ diff --git a/img/tarantula-box.png b/img/tarantula-box.png new file mode 100644 index 0000000..ca8e9af Binary files /dev/null and b/img/tarantula-box.png differ diff --git a/img/tarantula-poster.png b/img/tarantula-poster.png new file mode 100644 index 0000000..2ed8ec1 Binary files /dev/null and b/img/tarantula-poster.png differ diff --git a/img/twitter-logo-white.png b/img/twitter-logo-white.png new file mode 100644 index 0000000..503331b Binary files /dev/null and b/img/twitter-logo-white.png differ diff --git a/img/twitter-logo.png b/img/twitter-logo.png new file mode 100644 index 0000000..ad909f7 Binary files /dev/null and b/img/twitter-logo.png differ diff --git a/index.html b/index.html deleted file mode 100644 index 7520850..0000000 --- a/index.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/js/.gitkeep b/js/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/main.html b/main.html new file mode 100644 index 0000000..9aecf7e --- /dev/null +++ b/main.html @@ -0,0 +1,136 @@ + + + + + + + Amber + + +
+
+ + shopping cart +
+
+
+

+ La marque Amber© créer des écouteurs de qualité depuis 2002.
+ À l’occasion des vingts ans de Amber©, nous proposons une gamme vintage + pour nos amateurs d’horreurs. +

+ airpod icon +
+
+

Nos boîtes

+
+
+ tarantula poster + + Tarantula
50'S + +
+
+ psychose poster + + Psychose
60's + +
+
+ halloween poster + + Halloween
70'S + +
+
+
+ + + + diff --git a/psychose.html b/psychose.html new file mode 100644 index 0000000..cd40876 --- /dev/null +++ b/psychose.html @@ -0,0 +1,66 @@ + + + + + + + Psychose + + +
+
+ + shopping cart +
+
+

50

 +

60

 +

70

 +
+

we all go a little mad sometimes

+
+
+ picture of the psychose box +

113.-

+ BUY +

Wireless, long-lasting, great quality + and
gore-geous!

+
+ + + \ No newline at end of file diff --git a/tarantula.html b/tarantula.html new file mode 100644 index 0000000..943e499 --- /dev/null +++ b/tarantula.html @@ -0,0 +1,67 @@ + + + + + + + Tarantula + + +
+
+ + shopping cart +
+
+

50

 +

60

 +

70

+
+

…CRAWLING TERROR 100 FEET HIGH!

+
+
+ picture of the tarantula box +

113.-

+ BUY +

Wireless, long-lasting, great quality + and
gore-geous!

+ Autres produits +
+ + + \ No newline at end of file