diff --git a/css/styles.css b/css/styles.css index e69de29..ce67729 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,188 @@ + +body{ + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + color: black; + font-size: 14px; + margin: auto; + max-width: 375px; + scroll-behavior: smooth; +} +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) +} +h1, h2{ + text-align: center; + margin-top: 30px; +} +p{ + max-width: 235px; + transform: translateX(75px); + margin-bottom: 30px; + font-family: "coolvetica", sans-serif; + font-weight: 300; + font-style: normal; + font-size: 17px; +} +.slider-container{ + display: flex; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; + height: 130px; + border: solid black 1px; + flex-direction: column; +} +.slider-container img{ + height: 150px; + width: auto; + border-right: 1px solid black; + border-left: 1px solid black; +} +.slider-container img:first-of-type{ + border-left: 0; +} +.slider-container img:last-of-type{ + border-left: 0; +} +.parenthesis{ + font-size: 15px; +} +.products{ + position: relative; + margin-bottom: 30px; + width: 170px; + margin: auto auto 30px; +} +.products img { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin: 0; +} +.see-more{ + background: white; + border: 1px solid black; + z-index: 2; + font-size: 21px; + margin-bottom: 47px; + border-top: 0; +} +.venders{ + border: 1px solid black; + margin: auto auto 30px; + width: 170px; + font-size: 20px; +} +.icon{ + display: flex; + justify-content: center; + align-content: space-between; +} +.icon img{ + height: 40px; + width: auto; + margin: 30px; +} +.title { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.title h1{ + font-size: 55px; + margin: 10px 0px 0px 20px; +} +.title h2{ + font-size: 30px; + margin: 10px 0px 0px 20px; +} +strong{ + font-size: 14px; + text-align: center; +} +.packaging{ + display: flex; + margin: 15px; +} +.packaging img{ + height: 150px; + border: 1px solid black; + margin: 20px; +} +.packaging p{ + margin: auto; + width: 140px; + transform: translate(15px); +} +h3{ + font-size: 30px; + border: 1px solid black; + text-align: center; + margin: auto auto 0; + width: 220px; + font-size: 26px; + margin-bottom: 50px; +} +footer p{ + text-align: center; +} +.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); } +} +.scroll-left-text{ + left:0px; + animation-name: scroll-left-text; + animation-duration: 7s; + font-family: "coolvetica", sans-serif; + font-weight: 300; + 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); } +} diff --git a/fifties.html b/fifties.html new file mode 100644 index 0000000..205c905 --- /dev/null +++ b/fifties.html @@ -0,0 +1,96 @@ + + + + + + + + + Amber + +
+ 50s spaceship + + + +
+ +
+ +
+ 50s pattern +
+

50s

+

Our new collection!

+
+
+
+

Do you like this packaging? + Well we designed it just for you! + We mixed just the right amout of retro and future to give you the best + box to go with the best earbuds!
+ 169-. +

+ 50s packaging +
+
+

Limited Edition! New Collection!

+
+

What’s so great about our earbuds?

+

Well the real question is what is not great about our earbuds!
+ Our earbuds were designed with all the best features to make them + stand out, not just from their awesome design but also their + incredible sound!

+

100% Waterproof

+

100% Wireless

+

100% Well-made

+

100% Worth it

+
+

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 -> +
+ + + 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..3b9ca9e --- /dev/null +++ b/img/60s-pattern.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/70s-pattern.svg b/img/70s-pattern.svg new file mode 100644 index 0000000..7470fec --- /dev/null +++ b/img/70s-pattern.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/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/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/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/packaging-50.jpg b/img/packaging-50.jpg new file mode 100644 index 0000000..51714e9 Binary files /dev/null and b/img/packaging-50.jpg differ diff --git a/img/packaging-60s.jpg b/img/packaging-60s.jpg new file mode 100644 index 0000000..970f85b Binary files /dev/null and b/img/packaging-60s.jpg differ diff --git a/img/packaging-70s.jpg b/img/packaging-70s.jpg new file mode 100644 index 0000000..62dfabd Binary files /dev/null and b/img/packaging-70s.jpg differ 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/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 diff --git a/index.html b/index.html index 7520850..1fe8edf 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,91 @@ - + + + + Amber - +
+ all three spaceships + +
+ +
+ +
+

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!

+
+
+ 50s box + 60s box + 70s box +
+
+

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!

+
+

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 -> +
+ + diff --git a/js/.gitkeep b/js/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/seventies.html b/seventies.html new file mode 100644 index 0000000..e20b712 --- /dev/null +++ b/seventies.html @@ -0,0 +1,96 @@ + + + + + + + + + Amber + +
+ 70s spaceship + + + +
+ +
+ +
+ 70s pattern +
+

70s

+

Our new collection!

+
+
+
+

Do you like this packaging? + Well we designed it just for you! + We mixed just the right amout of retro and future to give you the best + box to go with the best earbuds!
+ 169-. +

+ 70s packaging +
+
+

Limited Edition! New Collection!

+
+

What’s so great about our earbuds?

+

Well the real question is what is not great about our earbuds!
+ Our earbuds were designed with all the best features to make them + stand out, not just from their awesome design but also their + incredible sound!

+

100% Waterproof

+

100% Wireless

+

100% Well-made

+

100% Worth it

+
+

Look back at the future!

+
+

Our other products

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

Where to buy!

+

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

+ Amazon -> + Fnac -> + Galaxus -> +
+ + + diff --git a/sixties.html b/sixties.html new file mode 100644 index 0000000..d4d8afb --- /dev/null +++ b/sixties.html @@ -0,0 +1,96 @@ + + + + + + + + + Amber + +
+ 60s spaceship + + + +
+ +
+ +
+ 60s pattern +
+

60s

+

Our new collection!

+
+
+
+

Do you like this packaging? + Well we designed it just for you! + We mixed just the right amout of retro and future to give you the best + box to go with the best earbuds!
+ 169-. +

+ 60s packaging +
+
+

Limited Edition! New Collection!

+
+

What’s so great about our earbuds?

+

Well the real question is what is not great about our earbuds!
+ Our earbuds were designed with all the best features to make them + stand out, not just from their awesome design but also their + incredible sound!

+

100% Waterproof

+

100% Wireless

+

100% Well-made

+

100% Worth it

+
+

Look at the past looking back at us!

+
+

Our other products

+
+ 50s space print + Shop the 50s -> + 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 -> +
+ + +