jminguely · ElenoreGill · May 16, 2022 · May 16, 2022 · May 17, 2022 · May 17, 2022
diff --git 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
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./css/styles.css">
+    <link rel="stylesheet" href="https://use.typekit.net/yel4ecm.css">
+    <link rel="stylesheet" href="https://use.typekit.net/yel4ecm.css">
+    <title>Amber</title>
+  </head>
+  <header>
+    <img class="scroll-left" src="img/3-50s-spaceship.svg" alt="50s spaceship">
+    <a href="index.html">
+    <img  class="logo"src="img/logo-amber.svg" alt="logo logo-amber">
+  </a>
+</header>
+  <body>
+    <hr/>
+    <nav>
+        <a href="#us">Amber</a>
+        <a href="#50s-collection"> 50s Collection</a>
+        <a href="#characteristics">Characteristics</a>
+        <a href="#venders">Venders</a>
+        <a href="#contact">Contact</a>
+    </nav>
+    <hr/>
+    <img src="img/50s-pattern.svg" alt="50s pattern">
+    <div class="title">
+      <h1 id="50s-collection">50s</h1>
+      <h2>Our new collection!</h2>
+    </div>
+      <hr/>
+    <div class="packaging">
+      <p>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!<br> 
+        <strong> 169-. </strong>
+        </p>
+        <img src="img/packaging-50.jpg" alt="50s packaging">
+      </div>
+      <hr/>
+        <p class="scroll-left-text">Limited Edition! New Collection! </p>
+        <hr/>
+        <h1 id="characteristics">What’s so great about our earbuds?</h1>
+        <p>Well the real question is what is <em>not</em> great about our earbuds! <br>
+          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!</p>
+            <h3>100% Waterproof</h3>
+            <h3>100% Wireless</h3>
+            <h3>100% Well-made</h3>
+            <h3>100% Worth it</h3>
+            <hr>
+          <p> <strong> Look at the future as seen by the past!</strong> </p>
+        <hr>
+        <h1>Our other products</h1>
+        <div class="products">
+          <img src="img/space-bg-60.svg" alt="60s space print">
+          <a class="see-more" href="index.html"> Shop the 60s -> </a>
+          <img src="img/space-bg-70.svg" alt="70s space print">
+          <a class="see-more" href="index.html"> Shop the 70s -> </a>
+        </div>
+        <hr>
+        <h1 id="venders">Where to buy!</h1>
+        <p>
+          Your can buy your own pair of Amber earbuds from anyone of our trusted
+           venders.
+        </p>   
+        <a class="venders" href="https://amazon.fr/"> Amazon -></a>
+        <a class="venders" href="https://www.fr.fnac.ch/"> Fnac -></a>
+        <a class="venders" href="https://www.galaxus.ch/search?q=earbuds"> Galaxus -></a>
+        <hr>
+        <footer>
+        <h1 id="contact">Contact</h1>
+        <p>like, follow or drop us a message for more Amber updates! </p> 
+        <div class="icon">
+          <a href="mailto:Amberinfo@gmail.com" target="_blank">
+            <img src="img/mail.svg" alt="email"> 
+          </a>
+          <a href="https://www.instagram.com" target="_blank">
+            <img src="img/instagram.svg" alt="instagram">
+          </a>
+          <a href="https://www.facebook.com" target="_blank">
+            <img src="img/facebook.svg" alt="facebook">     
+        </a>
+      </div> 
+      <a href="index.html">
+        <img  class="logo"src="img/logo-amber.svg" alt="logo logo-amber">
+      </a>
+    <hr/>
+      <img class="scroll-left" src="img/all-3-spaceships.svg" alt="all three spaceships"> 
+  <hr/>    
+</footer>                                                                           
+  </body>
+</html>
diff --git a/img/3-50s-spaceship.svg b/img/3-50s-spaceship.svg
diff --git a/img/3-60s-spaceship.svg b/img/3-60s-spaceship.svg
diff --git a/img/3-70s-spaceship.svg b/img/3-70s-spaceship.svg