diff --git a/components/home/home.html b/components/home/home.html index 4b3b0a1..9cbb883 100644 --- a/components/home/home.html +++ b/components/home/home.html @@ -5,7 +5,7 @@ iolovolio acquistare - +
@@ -14,7 +14,7 @@ iolovolio produrre Avvisami quando l'opzione sarà attiva - + *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)
diff --git a/components/plp/plp.html b/components/plp/plp.html new file mode 100644 index 0000000..b94d89a --- /dev/null +++ b/components/plp/plp.html @@ -0,0 +1,53 @@ +
+
+
+
+
+ +
+ +
+ +
+ +
+ + +
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox2.html')} +
+
+ ${require('../productBox/productBox3.html')} +
+
+ ${require('../productBox/productBox4.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+
+ +
+
+
diff --git a/components/plp/plp.js b/components/plp/plp.js new file mode 100644 index 0000000..fa0f8b0 --- /dev/null +++ b/components/plp/plp.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - plp') + +}) \ No newline at end of file diff --git a/components/plp/plp.scss b/components/plp/plp.scss new file mode 100644 index 0000000..9a8368a --- /dev/null +++ b/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; + } + +} diff --git a/components/productBox/productBox.html b/components/productBox/productBox.html new file mode 100644 index 0000000..1c973ab --- /dev/null +++ b/components/productBox/productBox.html @@ -0,0 +1,8 @@ +
+ +
+ Nome prodotto + 17,90 € +
+ +
diff --git a/components/productBox/productBox.js b/components/productBox/productBox.js new file mode 100644 index 0000000..7ccd94d --- /dev/null +++ b/components/productBox/productBox.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - productBox') + +}) \ No newline at end of file diff --git a/components/productBox/productBox.scss b/components/productBox/productBox.scss new file mode 100644 index 0000000..809aba8 --- /dev/null +++ b/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%; + } +} + diff --git a/components/productBox/productBox2.html b/components/productBox/productBox2.html new file mode 100644 index 0000000..3c82de3 --- /dev/null +++ b/components/productBox/productBox2.html @@ -0,0 +1,8 @@ +
+ +
+ Nome prodotto Nome prodotto Nome prodotto + 170,90 € +
+ +
diff --git a/components/productBox/productBox3.html b/components/productBox/productBox3.html new file mode 100644 index 0000000..f058334 --- /dev/null +++ b/components/productBox/productBox3.html @@ -0,0 +1,8 @@ +
+ +
+ Nome prodotto + 7,90 € +
+ +
diff --git a/components/productBox/productBox4.html b/components/productBox/productBox4.html new file mode 100644 index 0000000..daea3b6 --- /dev/null +++ b/components/productBox/productBox4.html @@ -0,0 +1,8 @@ +
+ +
+ Nome prodotto + 8,90 € +
+ +
diff --git a/images/arrow-down.svg b/images/arrow-down.svg new file mode 100644 index 0000000..1820970 --- /dev/null +++ b/images/arrow-down.svg @@ -0,0 +1,34 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/images/prod1.png b/images/prod1.png new file mode 100644 index 0000000..cede433 Binary files /dev/null and b/images/prod1.png differ diff --git a/images/prod2.png b/images/prod2.png new file mode 100644 index 0000000..61cfa6a Binary files /dev/null and b/images/prod2.png differ diff --git a/images/prod3.png b/images/prod3.png new file mode 100644 index 0000000..f2826c0 Binary files /dev/null and b/images/prod3.png differ diff --git a/images/prod4.png b/images/prod4.png new file mode 100644 index 0000000..2e2a235 Binary files /dev/null and b/images/prod4.png differ diff --git a/pages/buy.ejs b/pages/buy.ejs new file mode 100644 index 0000000..ca7ccee --- /dev/null +++ b/pages/buy.ejs @@ -0,0 +1,5 @@ + + ${require('../components/plp/plp.html')} + + + diff --git a/src/scss/forms.scss b/src/scss/forms.scss index 4be96e8..5625f8f 100644 --- a/src/scss/forms.scss +++ b/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; } diff --git a/src/scss/global.scss b/src/scss/global.scss index 1ea347e..c0c2a65 100644 --- a/src/scss/global.scss +++ b/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; diff --git a/src/scss/main.scss b/src/scss/main.scss index d5ae6d8..ace1c6b 100644 --- a/src/scss/main.scss +++ b/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";