From bd15ae4023f6f17ab3a61de79ad28e7a733ceb78 Mon Sep 17 00:00:00 2001 From: Carmine De Rosa Date: Wed, 19 Aug 2020 12:25:24 +0200 Subject: [PATCH] add pdp --- components/header/header.html | 4 +- components/pdp/pdp.html | 41 +++++++++++++++++++ components/pdp/pdp.js | 5 +++ components/pdp/pdp.scss | 54 ++++++++++++++++++++++++++ components/plp/plp.html | 2 +- components/productBox/productBox.html | 12 +++--- components/productBox/productBox.scss | 2 + components/productBox/productBox2.html | 12 +++--- components/productBox/productBox3.html | 12 +++--- components/productBox/productBox4.html | 12 +++--- pages/product.ejs | 4 ++ src/scss/global.scss | 2 +- src/scss/main.scss | 1 + 13 files changed, 139 insertions(+), 24 deletions(-) create mode 100644 components/pdp/pdp.html create mode 100644 components/pdp/pdp.js create mode 100644 components/pdp/pdp.scss create mode 100644 pages/product.ejs diff --git a/components/header/header.html b/components/header/header.html index 3dc6e1f..9eb2d82 100644 --- a/components/header/header.html +++ b/components/header/header.html @@ -16,7 +16,7 @@
  • "> iolovolio ...
    • -
  • "> +
  • "> acquistare
  • "> @@ -31,7 +31,7 @@
  • "> iolovolio ...
    • -
  • "> +
  • "> acquistare
  • "> diff --git a/components/pdp/pdp.html b/components/pdp/pdp.html new file mode 100644 index 0000000..d711769 --- /dev/null +++ b/components/pdp/pdp.html @@ -0,0 +1,41 @@ +
    +
    +
    +
    +
    + +
    + +
    + +
    + +
    +
    +

    + Nome prodotto +

    + + Dettagli + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +
    +
    + 17,90 € + +
    +

    Prodotti correlati +
    +
    + + +
    +
    + +
    +
    +
    diff --git a/components/pdp/pdp.js b/components/pdp/pdp.js new file mode 100644 index 0000000..5dc5ec4 --- /dev/null +++ b/components/pdp/pdp.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - pdp') + +}) \ No newline at end of file diff --git a/components/pdp/pdp.scss b/components/pdp/pdp.scss new file mode 100644 index 0000000..603f6e0 --- /dev/null +++ b/components/pdp/pdp.scss @@ -0,0 +1,54 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-pdp { + padding: 40px 0; + + .banner { + background: $light-gray; + text-align: center; + } + + .image { + width: 100%; + } + + .title { + display: block; + font-size: $font-30; + font-weight: normal; + padding: 0 0 30px 0; + margin: 0; + } + + .subtitle { + display: block; + font-size: $font-12; + text-transform: uppercase; + padding-bottom: 7px; + margin-bottom: 30px; + border-bottom: 1px solid $gray; + } + + .text { + display: block; + font-size: $font-12; + padding-bottom: 5px; + } + + .price { + display: block; + font-size: $font-26; + font-weight: normal; + text-align: right; + padding: 0 0 20px 0; + margin: 0; + } + + .related { + background: $light-gray; + text-align: center; + margin-top: 40px; + height: calc(100% - 130px); + } +} diff --git a/components/plp/plp.html b/components/plp/plp.html index b94d89a..fd64f78 100644 --- a/components/plp/plp.html +++ b/components/plp/plp.html @@ -46,7 +46,7 @@ diff --git a/components/productBox/productBox.html b/components/productBox/productBox.html index 1c973ab..443d55e 100644 --- a/components/productBox/productBox.html +++ b/components/productBox/productBox.html @@ -1,8 +1,10 @@
    - -
    - Nome prodotto - 17,90 € -
    + + +
    + Nome prodotto + 17,90 € +
    +
    diff --git a/components/productBox/productBox.scss b/components/productBox/productBox.scss index 809aba8..282a7ae 100644 --- a/components/productBox/productBox.scss +++ b/components/productBox/productBox.scss @@ -18,6 +18,7 @@ font-size: $font-16; font-weight: 600; line-height: $font-16; + color: $black; } .price { @@ -27,6 +28,7 @@ font-weight: light; text-align: right; white-space: no-wrap; + color: $black; } .add-to-cart{ diff --git a/components/productBox/productBox2.html b/components/productBox/productBox2.html index 3c82de3..58a0d79 100644 --- a/components/productBox/productBox2.html +++ b/components/productBox/productBox2.html @@ -1,8 +1,10 @@
    - -
    - Nome prodotto Nome prodotto Nome prodotto - 170,90 € -
    + + +
    + Nome prodotto Nome prodotto Nome prodotto + 170,90 € +
    +
    diff --git a/components/productBox/productBox3.html b/components/productBox/productBox3.html index f058334..32210e0 100644 --- a/components/productBox/productBox3.html +++ b/components/productBox/productBox3.html @@ -1,8 +1,10 @@
    - -
    - Nome prodotto - 7,90 € -
    + + +
    + Nome prodotto + 7,90 € +
    +
    diff --git a/components/productBox/productBox4.html b/components/productBox/productBox4.html index daea3b6..0f08f59 100644 --- a/components/productBox/productBox4.html +++ b/components/productBox/productBox4.html @@ -1,8 +1,10 @@
    - -
    - Nome prodotto - 8,90 € -
    + + +
    + Nome prodotto + 8,90 € +
    +
    diff --git a/pages/product.ejs b/pages/product.ejs new file mode 100644 index 0000000..3f9b49c --- /dev/null +++ b/pages/product.ejs @@ -0,0 +1,4 @@ +${require('../components/pdp/pdp.html')} + + + diff --git a/src/scss/global.scss b/src/scss/global.scss index c0c2a65..6755fb2 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -4,7 +4,7 @@ body { font-weight: 400; letter-spacing: 1px; margin: 0; - color: $black; + color: $dark-gray; overflow-x: hidden; } diff --git a/src/scss/main.scss b/src/scss/main.scss index ace1c6b..caa6592 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -16,3 +16,4 @@ @import "./components/home/home.scss"; @import "./components/plp/plp.scss"; @import "./components/productBox/productBox.scss"; +@import "./components/pdp/pdp.scss";