jminguely · katrinemarku · May 24, 2022 · May 24, 2022 · May 24, 2022 · May 24, 2022
diff --git a/css/styles.css b/css/styles.css
diff --git a/fonts/.gitkeep b/fonts/.gitkeep
diff --git a/fonts/AnnaStd.woff2 b/fonts/AnnaStd.woff2
diff --git a/fonts/BellGothicStd-Light.woff2 b/fonts/BellGothicStd-Light.woff2
diff --git a/fonts/BellMTStd-Bold.woff2 b/fonts/BellMTStd-Bold.woff2
diff --git a/fonts/MyriadPro-Regular.woff2 b/fonts/MyriadPro-Regular.woff2
diff --git a/halloween.html b/halloween.html
@@ -0,0 +1,65 @@
+<!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" />
+    <title>Halloween</title>
+  </head>
+  <body class="body-halloween">
+    <header class="header-halloween">
+      <div class="header-banner" id="go-up">
+        <img class="amber-logo" src="img/logo-amber.png" alt="logo amber">
+        <img class="shopping-cart" src="img/shopping-cart.png" alt="shopping cart">
+      </div>
+      <div class="years">
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/tarantula.html" target="_blank"><h2>50</h2></a>
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/psychose.html" target="_blank"><h2>60</h2></a>
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/halloween.html" target="_blank"><h3>70</h3></ha>
+      </div>
+      <h1 class="catchphrase">you can't kill the boogeyman</h1>
+      </header>
+      <main class="main-halloween">
+      <img src="img/halloween-box.png" class="box-halloween" alt="picture of the halloween box">
+    <h2>113.-</h2>
+    <a href="main.html" target="sellers" class="button-buy">BUY</a>
+    <p class="description-airpod">Wireless, long-lasting, great quality
+      and <br>gore-geous!</p>
+    </main>
+    <h1 class="signature">Katrine Marku</h1>
+    <div class="footer-banner tarantula">
+      <p class="copyrights">
+        ©2022 MOVING MUSIC INDUSTRIES, TOUS DROITS RÉSERVÉS
+      </p>
+      <img
+        class="amber-logo-footer"
+        src="img/logo-amber.png"
+        alt="logo amber"
+      />
+      <div class="social-media tarantula">
+        <a href="https://www.spotify.com/ch-fr/" target="_blank"
+          ><img src="img/spotify-white.png" alt="spotify logo" class="spotify-logo"
+        /></a>
+        <a href="https://www.instagram.com/" target="_blank"
+          ><img
+            src="img/instagram-logo-white.png"
+            alt="instagram logo"
+            class="instagram-logo"
+        /></a>
+        <a href="https://twitter.com" target="_blank"
+          ><img
+            src="img/twitter-logo-white.png"
+            alt="twitter logo"
+            class="twitter-logo"
+        /></a>
+      </div>
+    </div>
+    <a href="#go-up"
+      ><img
+        id="go-up"
+        src="img/go-up-white.png"
+        alt="go to the top of the page button"
+        class="go-up-button"
+    /></a>
+  </footer>
+    </body>
diff --git a/img/.gitkeep b/img/.gitkeep
diff --git a/img/airpod-icon.png b/img/airpod-icon.png
diff --git a/img/caddie.png b/img/caddie.png
diff --git a/img/eikon_VINTAGE_logo_AMBER.png b/img/eikon_VINTAGE_logo_AMBER.png
diff --git a/img/fnac-logo.png b/img/fnac-logo.png
diff --git a/img/galaxus-logo.png b/img/galaxus-logo.png
diff --git a/img/go-up-black.png b/img/go-up-black.png
diff --git a/img/go-up-white.png b/img/go-up-white.png
diff --git a/img/halloween-box.png b/img/halloween-box.png
diff --git a/img/halloween-poster.png b/img/halloween-poster.png
diff --git a/img/instagram-logo-white.png b/img/instagram-logo-white.png
diff --git a/img/instagram-logo.png b/img/instagram-logo.png
diff --git a/img/interdiscount-logo.png b/img/interdiscount-logo.png
diff --git a/img/logo-amber.png b/img/logo-amber.png
diff --git a/img/mediamarkt-logo.png b/img/mediamarkt-logo.png
diff --git a/img/microspot_logo.png b/img/microspot_logo.png
diff --git a/img/payment-method.png b/img/payment-method.png
diff --git a/img/psychose-box.png b/img/psychose-box.png
diff --git a/img/psychose-poster.png b/img/psychose-poster.png
diff --git a/img/shopping-cart.png b/img/shopping-cart.png
diff --git a/img/spotify-white.png b/img/spotify-white.png
diff --git a/img/spotify.png b/img/spotify.png
diff --git a/img/tarantula-box.png b/img/tarantula-box.png
diff --git a/img/tarantula-poster.png b/img/tarantula-poster.png
diff --git a/img/twitter-logo-white.png b/img/twitter-logo-white.png
diff --git a/img/twitter-logo.png b/img/twitter-logo.png
diff --git a/index.html b/index.html
diff --git a/js/.gitkeep b/js/.gitkeep
diff --git a/main.html b/main.html
@@ -0,0 +1,136 @@
+<!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"/>
+    <title>Amber</title>
+  </head>
+  <body>
+    <header>
+      <div class="header-banner" id="top-of-the-page">
+        <img class="amber-logo" src="img/logo-amber.png" alt="logo amber"/>
+        <img
+          class="shopping-cart"
+          src="img/shopping-cart.png"
+          alt="shopping cart"
+        />
+      </div>
+    </header>
+    <article class="amber-description">
+      <p>
+        La marque Amber© créer des écouteurs de qualité depuis 2002.<br/>
+        À l’occasion des vingts ans de Amber©, nous proposons une gamme vintage
+        pour nos amateurs d’horreurs.
+      </p>
+        <img src="img/airpod-icon.png" alt="airpod icon" class="airpod-icon"/>
+    </article>
+    <main>
+      <h1>Nos boîtes</h1>
+      <div class="products-and-links">
+        <div class="card card-tarantula">
+          <img
+              src="img/tarantula-poster.png"
+              alt="tarantula poster"
+              class="image"
+          />
+          <a href="tarantula.html" target="_blank" class="button">
+          Tarantula<br> 50'S
+          </a>
+        </div>
+        <div class="card card-psychose">
+          <img
+              src="img/psychose-poster.png"
+              alt="psychose poster"
+              class="image"
+          />  
+          <a href="psychose.html" target="_blank" class="button">
+            Psychose<br> 60's
+          </a>
+        </div>
+        <div class="card card-halloween">
+          <img
+              src="img/halloween-poster.png"
+              alt="halloween poster"
+              class="image"
+          />
+          <a href="halloween.html" target="_blank" class="button">
+            Halloween<br> 70'S
+          </a>
+        </div>
+      </div>
+    </main>
+    <nav>
+      <a id="sellers"><h1>Revendeurs</h1>
+      <div class="sellers">
+        <a href="https://www.microspot.ch/fr" target="_blank"
+          ><img
+            src="img/microspot_logo.png"
+            alt="logo microspot"
+            class="microspot"
+        /></a>
+        <a href="https://www.fnac.com" target="_blank"
+          ><img src="img/fnac-logo.png" alt="logo fnac" class="fnac"
+        /></a>
+        <a href="https://www.galaxus.ch/fr" target="_blank"
+          ><img src="img/galaxus-logo.png" alt="logo galaxus" class="galaxus"
+        /></a>
+        <a href="https://www.mediamarkt.ch/fr/" target="_blank"
+          ><img
+            src="img/mediamarkt-logo.png"
+            alt="logo mediamarkt"
+            class="mediamarkt"
+        /></a>
+        <a href="https://www.interdiscount.ch/fr/" target="_blank"
+          ><img
+            src="img/interdiscount-logo.png"
+            alt="logo inderdiscount"
+            class="interdiscount"
+        /></a>
+      </div>
+    </nav>
+    <footer>
+      <h1>Katrine Marku</h1>
+      <h2>PAIEMENT SÉCURISÉ</h2>
+      <p>Les méthodes suivantes sont disponibles</p>
+      <img
+        src="img/payment-method.png"
+        alt="méthode de payement"
+        class="payment-method"
+      />
+      <div class="footer-banner">
+        <p class="copyrights">
+          ©2022 MOVING MUSIC INDUSTRIES, TOUS DROITS RÉSERVÉS
+        </p>
+        <img
+          class="amber-logo-footer"
+          src="img/logo-amber.png"
+          alt="logo amber"
+        />
+        <div class="social-media">
+          <a href="https://www.spotify.com/ch-fr/" target="_blank"
+            ><img src="img/spotify.png" alt="spotify logo" class="spotify-logo"
+          /></a>
+          <a href="https://www.instagram.com/" target="_blank"
+            ><img
+              src="img/instagram-logo.png"
+              alt="instagram logo"
+              class="instagram-logo"
+          /></a>
+          <a href="https://twitter.com" target="_blank"
+            ><img
+              src="img/twitter-logo.png"
+              alt="twitter logo"
+              class="twitter-logo"
+          /></a>
+        </div>
+      </div>
+      <a href="#top-of-the-page"
+        ><img
+          src="img/go-up-black.png"
+          alt="go to the top of the page button"
+          class="go-up-button"
+      /></a>
+    </footer>
+  </body>
+</html>
diff --git a/psychose.html b/psychose.html
@@ -0,0 +1,66 @@
+<!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" />
+    <title>Psychose</title>
+  </head>
+  <body class="body-psychose">
+    <header class="header-psychose">
+      <div class="header-banner" id="go-up">
+        <img class="amber-logo" src="img/logo-amber.png" alt="logo amber">
+        <img class="shopping-cart" src="img/shopping-cart.png" alt="shopping cart">
+      </div>
+      <div class="years">
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/tarantula.html" target="_blank"><h2>50</h2></a>
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/psychose.html" target="_blank"><h3>60</h3></a>
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/halloween.html" target="_blank"><h2>70</h2></a>
+      </div>
+      <h1 class="catchphrase">we all go a little mad sometimes</h1>
+      </header>
+      <main class="main-psychose">
+        <img src="img/psychose-box.png" class="box-psychose" alt="picture of the psychose box">
+        <h2>113.-</h2>
+    <a href="main.html" target="sellers" class="button-buy">BUY</a>
+    <p class="description-airpod">Wireless, long-lasting, great quality
+      and <br>gore-geous!</p>
+    </main>
+    <footer class="footer-psychose">
+      <h1 class="signature">Katrine Marku</h1>
+          <div class="banner-other-pages">
+        <p class="copyrights">
+          ©2022 MOVING MUSIC INDUSTRIES, TOUS DROITS RÉSERVÉS
+        </p>
+        <img
+          class="amber-logo-footer"
+          src="img/logo-amber.png"
+          alt="logo amber"
+        />
+        <div class="social-media-other">
+          <a href="https://www.spotify.com/ch-fr/" target="_blank"
+            ><img src="img/spotify-white.png" alt="spotify logo" class="spotify-logo"
+          /></a>
+          <a href="https://www.instagram.com/" target="_blank"
+            ><img
+              src="img/instagram-logo-white.png"
+              alt="instagram logo"
+              class="instagram-logo"
+          /></a>
+          <a href="https://twitter.com" target="_blank"
+            ><img
+              src="img/twitter-logo-white.png"
+              alt="twitter logo"
+              class="twitter-logo"
+          /></a>
+        </div>
+      <a href="#go-up"
+        ><img
+          id="go-up"
+          src="img/go-up-white.png"
+          alt="go to the top of the page button"
+          class="go-up-button"
+      /></a>
+    </footer>
+      </body>
+      </html>
diff --git a/tarantula.html b/tarantula.html
@@ -0,0 +1,67 @@
+<!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" />
+    <title>Tarantula</title>
+  </head>
+  <body class="body-tarantula">
+    <header class="header-tarantula">
+      <div class="header-banner" id="go-up">
+        <img class="amber-logo" src="img/logo-amber.png" alt="logo amber">
+        <img class="shopping-cart" src="img/shopping-cart.png" alt="shopping cart">
+      </div>
+      <div class="years">
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/tarantula.html" target="_blank"><h3>50</h3></a>
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/psychose.html" target="_blank"><h2>60</h2></a>
+      <a href="file:///Users/katrinemarku/Desktop/Sites%20/17-amber/halloween.html" target="_blank"><h2>70</h2></ha>
+      </div>
+      <h1 class="catchphrase">…CRAWLING TERROR 100 FEET HIGH!</h1>
+      </header>
+      <main class="main-tarantula">
+      <img src="img/tarantula-box.png" class="box-tarantula" alt="picture of the tarantula box">
+    <h2>113.-</h2>
+    <a href="main.html" target="sellers" class="button-buy">BUY</a>
+    <p class="description-airpod">Wireless, long-lasting, great quality
+      and <br>gore-geous!</p>
+      <a href="main.html" target="sellers" class="button-other-products">Autres produits</a>
+    </main>
+    <footer class="footer-tarantula">
+    <h1 class="signature">Katrine Marku</h1>
+        <div class="banner-other-pages">
+      <p class="copyrights">
+        ©2022 MOVING MUSIC INDUSTRIES, TOUS DROITS RÉSERVÉS
+      </p>
+      <img
+        class="amber-logo-footer"
+        src="img/logo-amber.png"
+        alt="logo amber"
+      />
+      <div class="social-media-other">
+        <a href="https://www.spotify.com/ch-fr/" target="_blank"
+          ><img src="img/spotify-white.png" alt="spotify logo" class="spotify-logo"
+        /></a>
+        <a href="https://www.instagram.com/" target="_blank"
+          ><img
+            src="img/instagram-logo-white.png"
+            alt="instagram logo"
+            class="instagram-logo"
+        /></a>
+        <a href="https://twitter.com" target="_blank"
+          ><img
+            src="img/twitter-logo-white.png"
+            alt="twitter logo"
+            class="twitter-logo"
+        /></a>
+      </div>
+    <a href="#go-up"
+      ><img
+        id="go-up"
+        src="img/go-up-white.png"
+        alt="go to the top of the page button"
+        class="go-up-button"
+    /></a>
+  </footer>
+    </body>
+    </html>