techstationspace · Hooah-dev · Jun 11, 2020 · Jun 12, 2020
diff --git a/assets/header-logo copy.svg b/assets/header-logo copy.svg
diff --git a/assets/header-logo.svg b/assets/header-logo.svg
diff --git a/assets/header-menu-icon.svg b/assets/header-menu-icon.svg
diff --git a/components/footer.html b/components/footer.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="../style.css">
+</head>
+<body style="min-height: 100vh;">
+  <!-- component -->
+    <footer class="footer">
+      <div class="footer footer-container">
+        <div class="footer-logo"></div>
+        <div class="footer-nav">
+          <div class="footer-nav-column">
+            <a href="#" class="footer-link"></a>
+            <a href="#" class="footer-link"></a>
+            <a href="#" class="footer-link"></a>
+            <a href="#" class="footer-link"></a>
+          </div> 
+          <div class="footer-nav-column">
+            <a href="#" class="footer-link"></a>
+            <a href="#" class="footer-link"></a>
+            <a href="#" class="footer-link"></a>
+            <a href="#" class="footer-link"></a>
+          </div>
+        </div>
+        <div class="footer-info">
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, beatae molestiae? Obcaecati nisi distinctio sint saepe natus minus nobis accusantium. Maxime iusto dolores, iure ipsum saepe aliquam sed pariatur ipsam.</p>
+          <p>social</p>
+          <div class="footer-icons">icone</div>
+        </div>
+
+        <p>TERMINI E CONDIZIONI</p>
+
+      </div>
+    </footer>
+</body>
+</html>
diff --git a/components/header.html b/components/header.html
@@ -5,13 +5,31 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="../style.css">
+  <script type="text/javascript" src="../header.js"></script>
 </head>
 <body style="min-height: 100vh;">
   <!-- component -->
-  <header class="header">
-    <div class="container">
-      header
-    </div>
-  </header>
+    <header class="header header-container">
+        <div class="header-logo"></div>
+        <div class="header-nav-container">
+          <nav class="header-nav" id="dropDownMenu">
+            <a href="#" class="header-nav-link">BANANA</a>
+            <a href="#" class="header-nav-link">LAMPONE</a>
+            <a href="#" class="header-nav-link">FRUTTO DE LA PASSION</a>
+            <a href="#" class="header-nav-link">KIWI</a>
+          </nav>
+
+        <div class="header-menu" id="buttonMenu" onclick="toggleMenu('dropDownMenu')">
+
+          <div class="header-menu header-menu-text">
+          MENU
+          </div>
+
+          <div class="header-menu header-menu-icon">
+            <img src="../assets/header-menu-icon.svg">
+          </div>
+        </div>   
+      </div>
+    </header>
 </body>
 </html>
diff --git a/header.js b/header.js
@@ -0,0 +1,5 @@
+function toggleMenu(id) {
+  var menu = document.getElementById(id);
+  // document.getElementById('buttonMenu').classList.toggle('close');
+  menu.classList.toggle('visible');
+}
diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map
diff --git a/styles/layouts/flexbox.scss b/styles/layouts/flexbox.scss
diff --git a/styles/modules/header.scss b/styles/modules/header.scss
@@ -1,4 +1,127 @@
-.header {
-  padding: $base-spacer;
+// Variables
+$header-primary:  #343059;
+$header-secondary: #FFC74D;
+
+// Typography
+$header-font: Roboto;
+
+html {
+  box-sizing: border-box;
+}
+
+.header.header-container {
+  height: $base-spacer*4;
   background-color: $primary-color;
-}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 100vw;
+  background-color: $header-primary;
+  justify-content: space-between;
+
+
+    .header-logo {
+      // background-color: blue;
+      background-image: url(../../assets/header-logo.svg);
+      background-repeat: no-repeat;
+      background-size: cover;
+      margin-left: $base-spacer;
+      min-width: $base-spacer*10;
+      min-height: $base-spacer*3;
+      height: inherit;
+
+    }
+
+    .header-nav-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .header-nav {
+        // background-color: green;
+        display: none;
+
+        &.visible {
+          display: flex;
+          flex-direction: column;
+          position: absolute;
+          top: $base-spacer*4;
+          right: 0;
+          align-items: flex-end;
+          padding: $base-spacer $base-spacer*2;
+          border-left: 1px solid lighten($header-primary, $amount: 15);
+          border-right: 1px solid lighten($header-primary, $amount: 15);
+          border-bottom: 1px solid lighten($header-primary, $amount: 15);
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+          background-color: lighten($header-primary, $amount: 20);
+
+
+
+
+          .header-nav-link {
+            color: $header-secondary;
+            font-family: $header-font;
+            padding: $base-spacer*0.5;
+            margin-bottom: $base-spacer*0.3;
+            text-decoration: none;
+            text-align: right;
+            width: 100%;
+
+
+            &:hover {
+              background-color: lighten($header-primary, $amount: 10);
+              color: lighten($header-secondary, $amount:30);
+            }
+          }
+        }
+      }
+
+      .header-menu {
+        display: flex;
+        flex-direction: row;
+        margin-right: $base-spacer;
+        height: $base-spacer*3.6;
+        // background-color: black;
+
+        .header-menu-text {
+          // background-color: pink;
+          font-family: $header-font;
+          font-style: normal;
+          font-weight: 900;
+          font-size: $base-spacer*1.5;
+          line-height: 100%;
+          letter-spacing: 0.045em;
+          color: $header-secondary;
+          align-items: center;
+        }
+
+
+        .header-menu-icon {
+          // background-color: red;
+
+          img {
+            height: $base-spacer*1.8;
+            margin: auto 0;
+          }
+         }
+      }
+    }
+
+  }  
+
+ @include mobile {
+  #dropDownMenu {
+          width: 100vw;
+          height: (100vh-($base-spacer*4));
+          justify-content: center;
+          padding: 0px;
+
+          .header-nav-link {
+            text-align: center;
+            padding-right: 0px;
+            max-width: 100vw;
+          }
+             }
+
+          }
diff --git a/styles/variables.scss b/styles/variables.scss
@@ -3,6 +3,7 @@ $base-text-color: rgb(46, 46, 46);
 $primary-color: rgb(117, 33, 213);
 $secondary-color: rgb(235, 136, 14);
 
+
 // brackepoints
 $mobile: 768px;
 $tablet: 1024px;