add plp

components/home/home.html

@@ -5,7 +5,7 @@
         <img class="drop" src="/images/drop1.png">
         <span class="title"><b>io</b>lov<b>olio</b> acquistare</span>
         <span class="subtitle"></span>
-        <button class="button w-100">Vai allo shop</button>
+        <button class="button button-big w-100 text-uppercase">Vai allo shop</button>
       </div>
       <div class="col-12 col-md-4 order-0 order-md-1">
         <img class="logo" src="/images/logo.png">
@@ -14,7 +14,7 @@
         <img class="drop" src="/images/drop2.png">
         <span class="title"><b>io</b>lov<b>olio</b> produrre</span>
         <span class="subtitle">Avvisami quando l'opzione sarà attiva</span>
-        <input type="text" class="input" placeholder="latuamail@mail.com">
+        <input type="text" class="input input-big" placeholder="latuamail@mail.com">
         <span class="privacy">*Autorizzo il trattamento dei miei dati personali ai sensi del Dlgs 196 del 30 giugno 2003 e dell'art. 13 GDPR (Regolamento UE 2016/679)</span>
       </div>
     </div>

components/plp/plp.html

@@ -0,0 +1,53 @@
+<div class="component-plp">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10">
+        <div class="row">
+
+          <div class="col-12 pb-1">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-12 pb-4">
+            <select class="select">
+              <option value="">Filtra</option>
+              <option value="1">Opzione 1</option>
+              <option value="2">Opzione 2</option>
+              <option value="3">Opzione 3</option>
+              <option value="4">Opzione 4</option>
+            </select>
+          </div>
+
+
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox2.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox3.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox4.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        banner
+      </div>
+    </div>
+  </div>
+</div>

components/plp/plp.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - plp')
+
+})

components/plp/plp.scss

@@ -0,0 +1,12 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-plp {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+}

components/productBox/productBox.html

@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod1.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto </span>
+    <span class="price">17,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

components/productBox/productBox.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - productBox')
+
+})

components/productBox/productBox.scss

@@ -0,0 +1,38 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-productBox {
+  position: relative;
+  padding-bottom: 80px;
+  height: 100%;
+
+  .image {
+    width: 100%;
+    padding-bottom: 10px;
+  }
+
+  .title {
+    display: inline-block;
+    width: calc(100% - 70px);
+    padding-right: 5px;
+    font-size: $font-16;
+    font-weight: 600;
+    line-height: $font-16;
+  }
+
+  .price {
+    display: inline-block;
+    width: 70px;
+    font-size: $font-16;
+    font-weight: light;
+    text-align: right;
+    white-space: no-wrap;
+  }
+
+  .add-to-cart{
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+  }
+}
+

components/productBox/productBox2.html

@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod2.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
+    <span class="price">170,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

components/productBox/productBox3.html

@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod3.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto</span>
+    <span class="price">7,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

components/productBox/productBox4.html

@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod4.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto</span>
+    <span class="price">8,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

images/arrow-down.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg2244"
+   version="1.1"
+   viewBox="0 0 90 90"
+   height="90mm"
+   width="90mm">
+  <defs
+     id="defs2238" />
+  <metadata
+     id="metadata2241">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1">
+    <path
+       id="path2932"
+       d="M 7.9511719 20.333984 A 3.5 3.5 0 0 0 5.6542969 21.199219 A 3.5 3.5 0 0 0 5.3242188 26.138672 L 42.365234 68.470703 A 3.50035 3.50035 0 0 0 47.634766 68.470703 L 84.675781 26.138672 A 3.5 3.5 0 0 0 84.345703 21.199219 A 3.5 3.5 0 0 0 79.408203 21.529297 L 45 60.849609 L 10.591797 21.529297 A 3.5 3.5 0 0 0 7.9511719 20.333984 z "
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;opacity:1" />
+  </g>
+</svg>

pages/buy.ejs

@@ -0,0 +1,5 @@
+
+ ${require('../components/plp/plp.html')}
+
+
+

src/scss/forms.scss

@@ -72,7 +72,7 @@ input[type=date] {
   border-radius: 0;
   height: auto;
   display: block;
-  padding: 10px 20px;
+  padding: 10px 10px;
   border: 2px solid $white;
   @include font-style( $font-sans, 'regular', $font-18);
   box-shadow: unset;
@@ -121,8 +121,13 @@ input[type=date] {
     background: transparent;
   }
 
+  &.input-gray {
+    border: 2px solid $light-gray;
+    background: $light-gray;
+  }
+
   &:disabled {
-    border-bottom: 1px solid $gray;
+    border-bottom: 2px solid $gray;
     & + .label-text,
     & + label {
       color: $gray;
@@ -130,48 +135,18 @@ input[type=date] {
   }
 }
 
-fieldset,
-.fieldset {
-  position: relative;
-  padding-bottom: 35px;
-  .label-text {
-    color: $gray;
-
-    &.required {
-      &:after {
-        content: '*';
-      }
-    }
-  }
-
-  &.has-error {
-    .label-text {
-      color: $red;
-      text-transform: uppercase;
-      font-size: $font-10;
-    }
-    .error-message {
-      color: $red;
-      display: block !important;
-      text-transform: uppercase;
-      font-size: $font-10;
-    }
-    input {
-      border-bottom: 1px solid $red;
-    }
-  }
-}
-
 select {
   appearance: none;
   background-image: url(/images/arrow-down.svg);
   background-size: auto 40%;
   background-repeat: no-repeat;
   background-position: right 3px center;
+  border-bottom: 1px solid $gray;
 
   &:disabled {
-    background-image: url(/images/arrow-down-gray.svg);
+    background-image: url(/images/arrow-down.svg);
   }
+
   &:focus {
     //background-image: url(/images/arrow-up.svg);
   }
@@ -184,12 +159,15 @@ select {
   border-radius: 0;
   height: auto;
   display: block;
-  padding: 10px 20px;
+  padding: 7px 15px;
   border: 2px solid $white;
   text-align: center;
-  @include font-style( $font-sans, 'regular', $font-18);
-  text-transform: uppercase;
+  @include font-style( $font-sans, 'regular', $font-14);
 
+  &.button-big {
+    padding: 10px 20px;
+    font-size: $font-18;
+  }
 
   &.button-small {
     height: 18px;
@@ -197,6 +175,12 @@ select {
     padding: 5px;
   }
 
+  &.button-black {
+    background: $dark-gray;
+    color: $white;
+    border: 2px solid $dark-gray;
+  }
+
   &:disabled {
     opacity: 0.5;
   }

src/scss/global.scss

@@ -17,6 +17,8 @@ ul {
 
 a,
 input,
+select,
+option,
 button {
   text-decoration: none;
   outline: none;
@@ -115,7 +117,7 @@ button {
 .main-content {
 
   min-height: calc(100vh - #{$footer-height});
-  padding: $header-height-mobile 40px 0 40px;
+  padding: $header-height-mobile 10px 0 10px;
 
   @media (min-width: map-get($grid-breakpoints, 'md')) {
     padding: $header-height 40px 0 40px;

src/scss/main.scss

@@ -14,3 +14,5 @@
 @import "./components/header/header.scss";
 @import "./components/footer/footer.scss";
 @import "./components/home/home.scss";
+@import "./components/plp/plp.scss";
+@import "./components/productBox/productBox.scss";