From 34536c80b92bd0fb0672012f92f0644b7ef51f53 Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Mon, 16 May 2022 11:23:54 +0200 Subject: [PATCH 01/22] added svgs --- img/spaceship-1.svg | 1 + img/spaceship-2.svg | 1 + img/spaceship-3.svg | 1 + 3 files changed, 3 insertions(+) create mode 100644 img/spaceship-1.svg create mode 100644 img/spaceship-2.svg create mode 100644 img/spaceship-3.svg diff --git a/img/spaceship-1.svg b/img/spaceship-1.svg new file mode 100644 index 0000000..638e8d1 --- /dev/null +++ b/img/spaceship-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/spaceship-2.svg b/img/spaceship-2.svg new file mode 100644 index 0000000..7d73e7e --- /dev/null +++ b/img/spaceship-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/spaceship-3.svg b/img/spaceship-3.svg new file mode 100644 index 0000000..93f7152 --- /dev/null +++ b/img/spaceship-3.svg @@ -0,0 +1 @@ + \ No newline at end of file From cc878bf49f77bc2e141dd011eb4cdee77e359a2d Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Mon, 16 May 2022 12:16:16 +0200 Subject: [PATCH 02/22] header-homepage --- css/styles.css | 54 ++++++++++++++++++++++++++++++++++++++++ img/all-3-spaceships.svg | 1 + img/logo-amber.svg | 1 + index.html | 21 ++++++++++++++-- 4 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 img/all-3-spaceships.svg create mode 100644 img/logo-amber.svg diff --git a/css/styles.css b/css/styles.css index e69de29..a2ee451 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,54 @@ + +body{ + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + color: black; + font-size: 14px; + margin: auto; + max-width: 375px; +} +nav { + margin: 5px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + padding: 5px; + justify-content: space-between; +} +a{ + font-size: 13px; + color: black; + text-decoration: none; + display: inline-block; + padding: 5px; + justify-content: space-between; + display: block; +} +hr{ + border-top: 1px solid black; +} +.logo{ + height: 42px; + justify-content: center; + transform: translate(145px, -5px) +} + +.scroll-left{ + left:0px; + animation-name: scroll-left; + animation-duration: 7s; + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 60px; + animation-iteration-count: infinite; + animation-timing-function: linear; + margin: 0; + line-height: 50px; + text-align: center; +} +@keyframes scroll-left{ + from {transform: translateX(375px);} + to {transform: translateX(-375px); } +} diff --git a/img/all-3-spaceships.svg b/img/all-3-spaceships.svg new file mode 100644 index 0000000..cda7f30 --- /dev/null +++ b/img/all-3-spaceships.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-amber.svg b/img/logo-amber.svg new file mode 100644 index 0000000..f351be8 --- /dev/null +++ b/img/logo-amber.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 7520850..586ae3d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,24 @@ - + + + + Amber - +
+ all three spaceships + +
+ +
+ +
+ From 0d051ed8cd44e5963183c98f24aa5c095ad46448 Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Tue, 17 May 2022 09:46:32 +0200 Subject: [PATCH 03/22] who are we --- css/styles.css | 18 ++++++++++++++++++ index.html | 13 +++++++++++++ 2 files changed, 31 insertions(+) diff --git a/css/styles.css b/css/styles.css index a2ee451..2e52e26 100644 --- a/css/styles.css +++ b/css/styles.css @@ -33,6 +33,24 @@ hr{ justify-content: center; transform: translate(145px, -5px) } +h1{ + text-align: center; + margin-top: 30px; +} +p{ + max-width: 235px; + transform: translateX(75px); + margin-bottom: 30px; +} +.slider-container{ + display: flex; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; + height: 130px; + border: solid black 1px; + flex-direction: column; +} .scroll-left{ left:0px; diff --git a/index.html b/index.html index 586ae3d..fba8ccb 100644 --- a/index.html +++ b/index.html @@ -22,5 +22,18 @@ Contact
+

Who are we?

+

Amber was founded in 2020 by a group young tech designers looking to make + music fun! We specialise in themed earbuds, from cult classics to the deep + sea, all with a retro twist, to make your music experience anything but + basic! Show of your style with a original pair of ear-buds which match + your vibe!

Our goal is to make you move to the music whilst moving + with your music! +

+
+

Our new collection!

+
+
+ tous les epaisseur de typo From 6c9ed282af5eecf84f29277f49ea76182b11d723 Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Tue, 17 May 2022 10:07:02 +0200 Subject: [PATCH 04/22] retrofuturism and moving text --- css/styles.css | 26 +++++++++++++++++++++++++- index.html | 16 +++++++++++++++- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/css/styles.css b/css/styles.css index 2e52e26..6a98107 100644 --- a/css/styles.css +++ b/css/styles.css @@ -33,7 +33,7 @@ hr{ justify-content: center; transform: translate(145px, -5px) } -h1{ +h1, h2{ text-align: center; margin-top: 30px; } @@ -41,6 +41,10 @@ p{ max-width: 235px; transform: translateX(75px); margin-bottom: 30px; + font-family: "coolvetica", sans-serif; + font-weight: 300; + font-style: normal; + font-size: 17pxs; } .slider-container{ display: flex; @@ -51,6 +55,9 @@ p{ border: solid black 1px; flex-direction: column; } +.parenthesis{ + font-size: 15px; +} .scroll-left{ left:0px; @@ -70,3 +77,20 @@ p{ from {transform: translateX(375px);} to {transform: translateX(-375px); } } +.scroll-left-text{ + left:0px; + animation-name: scroll-left-text; + animation-duration: 7s; + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 15px; + animation-iteration-count: infinite; + animation-timing-function: linear; + margin: 0; + text-align: center; +} +@keyframes scroll-left-text{ + from {transform: translateX(375px);} + to {transform: translateX(-375px); } +} \ No newline at end of file diff --git a/index.html b/index.html index fba8ccb..82bca08 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,20 @@

Who are we?

Our new collection!

- tous les epaisseur de typo + the three boxes +
+
+

Retrofuturism

+

What is retrofutrism? Well we’ll tell you now!

+ Retrofutrisim is the way we used to see the future, cool right?
+ We were really inspired by the way we used to see the future during the + 50s, 60s and 70s and thought that it would make an awesome design to + wear in your ears!
+ (Our team of designers just watched back to the future and thought it + was a good idea) +

+
+

Limited Edition! New Collection!

+
From 390f12d837a3627da579e03c676b70b2fc53883b Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Mon, 23 May 2022 09:05:56 +0200 Subject: [PATCH 05/22] footer icons --- css/styles.css | 36 ++++++++++++++++++++++++++++++++++-- fifties.html | 0 img/facebook.svg | 13 +++++++++++++ img/instagram.svg | 16 ++++++++++++++++ img/mail.svg | 14 ++++++++++++++ img/space-bg-50.svg | 1 + img/space-bg-60.svg | 1 + img/space-bg-70.svg | 1 + index.html | 36 +++++++++++++++++++++++++++++++++++- seventies.html | 0 sixties.html | 0 11 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 fifties.html create mode 100644 img/facebook.svg create mode 100644 img/instagram.svg create mode 100644 img/mail.svg create mode 100644 img/space-bg-50.svg create mode 100644 img/space-bg-60.svg create mode 100644 img/space-bg-70.svg create mode 100644 seventies.html create mode 100644 sixties.html diff --git a/css/styles.css b/css/styles.css index 6a98107..f9238af 100644 --- a/css/styles.css +++ b/css/styles.css @@ -58,7 +58,39 @@ p{ .parenthesis{ font-size: 15px; } - +.products{ + position: relative; +} +.products img { + width: 175px; + height: 260px; + display: flex; + flex-direction: column; + align-items: center; + margin: 70px 0px; + transform: translate(100px); +} +.see-more{ + background: white; + border: 1px solid black; + width: 150px; + height: 35px; + position: absolute; + transform: translate(107px, -98px); + z-index: 2; + font-size: 21px; +} +.venders{ + border: 1px solid black; + margin: 10px 2px; + width: 150px; + font-size: 20px; + transform: translate(107px, -10px); +} +.icon{ + height: 15px; + +} .scroll-left{ left:0px; animation-name: scroll-left; @@ -82,7 +114,7 @@ p{ animation-name: scroll-left-text; animation-duration: 7s; font-family: "coolvetica", sans-serif; - font-weight: 400; + font-weight: 300; font-style: normal; font-size: 15px; animation-iteration-count: infinite; diff --git a/fifties.html b/fifties.html new file mode 100644 index 0000000..e69de29 diff --git a/img/facebook.svg b/img/facebook.svg new file mode 100644 index 0000000..0d9cfd6 --- /dev/null +++ b/img/facebook.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/img/instagram.svg b/img/instagram.svg new file mode 100644 index 0000000..d573324 --- /dev/null +++ b/img/instagram.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/img/mail.svg b/img/mail.svg new file mode 100644 index 0000000..b66302a --- /dev/null +++ b/img/mail.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/img/space-bg-50.svg b/img/space-bg-50.svg new file mode 100644 index 0000000..4735025 --- /dev/null +++ b/img/space-bg-50.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/space-bg-60.svg b/img/space-bg-60.svg new file mode 100644 index 0000000..07b74b2 --- /dev/null +++ b/img/space-bg-60.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/space-bg-70.svg b/img/space-bg-70.svg new file mode 100644 index 0000000..38d2163 --- /dev/null +++ b/img/space-bg-70.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 82bca08..15fe56b 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,41 @@

Retrofuturism

was a good idea)

-

Limited Edition! New Collection!

+

Limited Edition! New Collection!

+

Our products!

+
+ 50s space print + Shop the 50s + 60s space print + Shop the 60s + 70s space print + Shop the 70s +
+
+

Where to buy!

+

+ Your can buy your own pair of Amber earbuds from anyone of our trusted + venders. +

+ Amazon + Fnac + Galaxus +
+

Contact

+

like, follow or drop us a message for more Amber updates!

+
+ + email + + + instagram + + + facebook + +
+ + all three spaceships diff --git a/seventies.html b/seventies.html new file mode 100644 index 0000000..e69de29 diff --git a/sixties.html b/sixties.html new file mode 100644 index 0000000..e69de29 From f3f730d8280633edda653b871c192c9fe37125cb Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Mon, 23 May 2022 09:28:00 +0200 Subject: [PATCH 06/22] icons actually got them to work this time --- css/styles.css | 13 ++++++++++--- index.html | 6 +++++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/css/styles.css b/css/styles.css index f9238af..270a741 100644 --- a/css/styles.css +++ b/css/styles.css @@ -87,9 +87,16 @@ p{ font-size: 20px; transform: translate(107px, -10px); } + .icon{ - height: 15px; - + display: flex; + justify-content: center; + align-content: space-between; +} +.icon img{ + height: 40px; + width: auto; + margin: 30px; } .scroll-left{ left:0px; @@ -125,4 +132,4 @@ p{ @keyframes scroll-left-text{ from {transform: translateX(375px);} to {transform: translateX(-375px); } -} \ No newline at end of file +} diff --git a/index.html b/index.html index 15fe56b..4e51e54 100644 --- a/index.html +++ b/index.html @@ -68,6 +68,7 @@

Where to buy!

Fnac Galaxus
+

Contact

like, follow or drop us a message for more Amber updates!

@@ -82,6 +83,9 @@

Contact

- all three spaceships +
+ all three spaceships +
+
From b6a1022b090107f0414ea30762cd9f232f83006a Mon Sep 17 00:00:00 2001 From: ElenoreGill Date: Mon, 23 May 2022 10:02:07 +0200 Subject: [PATCH 07/22] fifties page header & links --- css/styles.css | 10 ++++- fifties.html | 81 +++++++++++++++++++++++++++++++++++++++++ img/3-50s-spaceship.svg | 1 + img/3-60s-spaceship.svg | 1 + img/3-70s-spaceship.svg | 1 + img/50s-pattern.svg | 1 + img/60s-pattern.svg | 1 + img/70s-pattern.svg | 1 + index.html | 22 +++++------ 9 files changed, 106 insertions(+), 13 deletions(-) create mode 100644 img/3-50s-spaceship.svg create mode 100644 img/3-60s-spaceship.svg create mode 100644 img/3-70s-spaceship.svg create mode 100644 img/50s-pattern.svg create mode 100644 img/60s-pattern.svg create mode 100644 img/70s-pattern.svg diff --git a/css/styles.css b/css/styles.css index 270a741..889b6aa 100644 --- a/css/styles.css +++ b/css/styles.css @@ -44,7 +44,7 @@ p{ font-family: "coolvetica", sans-serif; font-weight: 300; font-style: normal; - font-size: 17pxs; + font-size: 17px; } .slider-container{ display: flex; @@ -87,7 +87,6 @@ p{ font-size: 20px; transform: translate(107px, -10px); } - .icon{ display: flex; justify-content: center; @@ -98,6 +97,13 @@ p{ width: auto; margin: 30px; } +.title h1 h2 { + text-align: left; + +} +strong{ + font-size: 14px; +} .scroll-left{ left:0px; animation-name: scroll-left; diff --git a/fifties.html b/fifties.html index e69de29..52d20dd 100644 --- a/fifties.html +++ b/fifties.html @@ -0,0 +1,81 @@ + + + + + + + + + Amber + +
+ 50sm spaceship + + + +
+ +
+ +
+ 50s pattern +
+

50s

+

Our new collection!

+
+

Retrofuturism

+

What is retrofutrism? Well we’ll tell you now!

+ Retrofutrisim is the way we used to see the future, cool right?
+ We were really inspired by the way we used to see the future during the + 50s, 60s and 70s and thought that it would make an awesome design to + wear in your ears!
+ (Our team of designers just watched back to the future and thought it + was a good idea) +

+
+

Look at the future as seen by the past!

+
+

Our other products

+
+ 60s space print + Shop the 60s + 70s space print + Shop the 70s +
+
+

Where to buy!

+

+ Your can buy your own pair of Amber earbuds from anyone of our trusted + venders. +

+ Amazon + Fnac + Galaxus +
+
+

Contact

+

like, follow or drop us a message for more Amber updates!

+
+ + email + + + instagram + + + facebook + +
+ +
+ all three spaceships +
+
+ + diff --git a/img/3-50s-spaceship.svg b/img/3-50s-spaceship.svg new file mode 100644 index 0000000..487985c --- /dev/null +++ b/img/3-50s-spaceship.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/3-60s-spaceship.svg b/img/3-60s-spaceship.svg new file mode 100644 index 0000000..89177bf --- /dev/null +++ b/img/3-60s-spaceship.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/3-70s-spaceship.svg b/img/3-70s-spaceship.svg new file mode 100644 index 0000000..549168f --- /dev/null +++ b/img/3-70s-spaceship.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/50s-pattern.svg b/img/50s-pattern.svg new file mode 100644 index 0000000..bb044b3 --- /dev/null +++ b/img/50s-pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/60s-pattern.svg b/img/60s-pattern.svg new file mode 100644 index 0000000..38c0d3a --- /dev/null +++ b/img/60s-pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/70s-pattern.svg b/img/70s-pattern.svg new file mode 100644 index 0000000..6b7f5a5 --- /dev/null +++ b/img/70s-pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 4e51e54..19486a1 100644 --- a/index.html +++ b/index.html @@ -8,21 +8,21 @@ Amber -
+
all three spaceships
-

Who are we?

+

Who are we?

Amber was founded in 2020 by a group young tech designers looking to make music fun! We specialise in themed earbuds, from cult classics to the deep sea, all with a retro twist, to make your music experience anything but @@ -31,7 +31,7 @@

Who are we?

with your music!

-

Our new collection!

+

Our new collection!

the three boxes @@ -49,7 +49,7 @@

Retrofuturism

Limited Edition! New Collection!

-

Our products!

+

Our products!

50s space print Shop the 50s @@ -59,7 +59,7 @@

Our products!

Shop the 70s
-

Where to buy!

+

Where to buy!

Your can buy your own pair of Amber earbuds from anyone of our trusted venders. @@ -69,7 +69,7 @@

Where to buy!

Galaxus
@@ -51,14 +52,14 @@

100% Wireless

100% Well-made

100% Worth it

-

Look at the future as seen by the past!

+

Look at the past looking back at us!

Our other products

50s space print - Shop the 50s + Shop the 50s -> 70s space print - Shop the 70s + Shop the 70s ->

Where to buy!

@@ -66,9 +67,9 @@

Where to buy!

Your can buy your own pair of Amber earbuds from anyone of our trusted venders.

- Amazon - Fnac - Galaxus + Amazon -> + Fnac -> + Galaxus ->