diff --git a/components/footer/footer.scss b/components/footer/footer.scss index b67fa37..096f68d 100644 --- a/components/footer/footer.scss +++ b/components/footer/footer.scss @@ -4,7 +4,7 @@ .component-footer { position: relative; display: flex; - height: 250px; + height: $footer-height; background: $olive-dark; padding: 40px 0; diff --git a/components/header/header.html b/components/header/header.html index 494bccc..e3a8e14 100644 --- a/components/header/header.html +++ b/components/header/header.html @@ -1,8 +1,10 @@ -
+
- + + +
diff --git a/components/header/header.scss b/components/header/header.scss index b8b0337..72def0d 100644 --- a/components/header/header.scss +++ b/components/header/header.scss @@ -107,6 +107,15 @@ } } } + + &.is-home { + background: transparent; + .header-wrapper { + .logo { + display: none; + } + } + } } diff --git a/components/homeTemplate/homeTemplate.html b/components/homeTemplate/homeTemplate.html new file mode 100644 index 0000000..36742a9 --- /dev/null +++ b/components/homeTemplate/homeTemplate.html @@ -0,0 +1,55 @@ +
+ + +
+
+
+
+ +
+
+
+ + +
+ +
+ + + + + acquista + +
+
+ +
+ +
+ Ottembrino + Lorem ipsum dolor sit amet +
+
+ +
+ +
+ Non filtrato + Lorem ipsum dolor sit amet +
+
+
+
+
+
+
+
diff --git a/components/homeTemplate/homeTemplate.js b/components/homeTemplate/homeTemplate.js new file mode 100644 index 0000000..824ffc2 --- /dev/null +++ b/components/homeTemplate/homeTemplate.js @@ -0,0 +1,15 @@ + + +$(document).ready( () => { + console.log('Load component - homeTemplate') + + const component = $('.component-homeTemplate') + + if(component.length) { + const slider = component.find('.slider') + + slider.slick({ + //setting-name: setting-value + }) + } +}) diff --git a/components/homeTemplate/homeTemplate.scss b/components/homeTemplate/homeTemplate.scss new file mode 100644 index 0000000..b4d9662 --- /dev/null +++ b/components/homeTemplate/homeTemplate.scss @@ -0,0 +1,111 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-homeTemplate { + background: $white; + + .banner { + position: relative; + background: $light-gray; + height: 100vh; + + .logo-container { + position: relative; + height: 100vh; + + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50%; + height: 80%; + object-fit: contain; + } + } + } + + .products { + background: linear-gradient(0deg, $white 0%, $white 15%, $light-gray 15%, $light-gray 75%, $white 75%, $white 100%); + + .main-image { + width: 100%; + margin: auto auto 5% auto; + border: 1px solid $light-gray; + padding: 10px; + background: $white; + } + + .slider { + display: block; + width: calc(100% - 80px); + height: 100%; + margin: auto; + + .slide { + position: relative; + display: flex !important; + padding: 0 5%; + + .image { + width: 55%; + float: left; + padding: 0 10px; + } + + .description { + position: relative; + width: 45%; + padding: 50% 20px 10% 20px; + float: left; + + .title { + display: block; + @include font-style($font-serif, 'regular-italic', $font-24); + color: $brown; + } + + .subtitle { + display: block; + display: -webkit-box; + @include font-style($font-serif, 'regular-italic', $font-18); + color: $olive-dark; + overflow: hidden; + max-width: 100%; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + } + + } + + .link { + position: absolute; + display: block; + bottom: 20%; + left: 0; + width: 100%; + text-align: center; + + .icon { + display: block; + color: $brown; + font-size: $font-30; + } + + .label { + display: block; + @include font-style($font-serif, 'regular-italic', $font-22); + color: $olive-dark; + } + } + } + + + .slick-arrow { + &:before { + font-size: $font-30; + } + } + } + } +} diff --git a/images/ajax-loader.gif b/images/ajax-loader.gif new file mode 100644 index 0000000..e0e6e97 Binary files /dev/null and b/images/ajax-loader.gif differ diff --git a/images/homeDescription.png b/images/homeDescription.png new file mode 100644 index 0000000..66fb9f6 Binary files /dev/null and b/images/homeDescription.png differ diff --git a/images/homeProducts.png b/images/homeProducts.png new file mode 100644 index 0000000..6d927c7 Binary files /dev/null and b/images/homeProducts.png differ diff --git a/package.json b/package.json index 11d231e..510a1f8 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "postcss-loader": "^4.1.0", "prettier": "^2.2.1", "sass-loader": "^10.1.0", + "slick-slider": "^1.8.2", "url-loader": "^4.1.1", "webpack": "^4.44.2", "webpack-cli": "^4.2.0", diff --git a/pages/iolovolio.ejs b/pages/iolovolio.ejs new file mode 100644 index 0000000..5467555 --- /dev/null +++ b/pages/iolovolio.ejs @@ -0,0 +1,2 @@ + +${require('../components/homeTemplate/homeTemplate.html')} diff --git a/src/fonts/icomoon.eot b/src/fonts/icomoon.eot index ac73c6c..bf53e7f 100644 Binary files a/src/fonts/icomoon.eot and b/src/fonts/icomoon.eot differ diff --git a/src/fonts/icomoon.svg b/src/fonts/icomoon.svg index 414e9a2..55f76b8 100644 --- a/src/fonts/icomoon.svg +++ b/src/fonts/icomoon.svg @@ -11,4 +11,7 @@ + + + \ No newline at end of file diff --git a/src/fonts/icomoon.ttf b/src/fonts/icomoon.ttf index e6b2c95..e18b0c9 100644 Binary files a/src/fonts/icomoon.ttf and b/src/fonts/icomoon.ttf differ diff --git a/src/fonts/icomoon.woff b/src/fonts/icomoon.woff index e7cd8a6..e2f12df 100644 Binary files a/src/fonts/icomoon.woff and b/src/fonts/icomoon.woff differ diff --git a/src/fonts/selection.json b/src/fonts/selection.json index dbcf73f..3400374 100644 --- a/src/fonts/selection.json +++ b/src/fonts/selection.json @@ -1 +1 @@ -{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M498.102 56.824c-115.187 0-211.767 96.565-211.767 215.468h-167.207v78.016h0.363v538.852h-0.363v78.016h784.003v-7.693h1.742v-687.408h-78.016v0.218h-113.213c0-118.903-100.353-215.468-215.541-215.468zM498.102 131.139c78.030 0 141.226 63.124 141.226 141.154h-278.679c0-78.030 59.422-141.154 137.453-141.154zM197.579 350.308h88.756v55.736h74.314v-55.736h278.679v55.736h74.314v-55.736h113.213v538.852h-629.278z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["buy"]},"attrs":[{}],"properties":{"order":117,"id":3,"name":"buy","prevSize":32,"code":59648},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["minus"]},"attrs":[{}],"properties":{"order":118,"id":2,"name":"minus","prevSize":32,"code":59649},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M471.011 47.47h81.976v929.060h-81.976z","M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["plus"]},"attrs":[{},{}],"properties":{"order":119,"id":1,"name":"plus","prevSize":32,"code":59650},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M90.513 253.965l-47.292 47.292 468.778 468.778 468.778-468.778-47.292-47.292-421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-down"]},"attrs":[{}],"properties":{"order":120,"id":0,"name":"angle-down","prevSize":32,"code":59651},"setIdx":0,"setId":2,"iconIdx":3}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}} \ No newline at end of file +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M498.102 56.824c-115.187 0-211.767 96.565-211.767 215.468h-167.207v78.016h0.363v538.852h-0.363v78.016h784.003v-7.693h1.742v-687.408h-78.016v0.218h-113.213c0-118.903-100.353-215.468-215.541-215.468zM498.102 131.139c78.030 0 141.226 63.124 141.226 141.154h-278.679c0-78.030 59.422-141.154 137.453-141.154zM197.579 350.308h88.756v55.736h74.314v-55.736h278.679v55.736h74.314v-55.736h113.213v538.852h-629.278z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["buy"],"grid":0},"attrs":[{}],"properties":{"order":117,"id":0,"name":"buy","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["minus"],"grid":0},"attrs":[{}],"properties":{"order":118,"id":1,"name":"minus","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M471.011 47.47h81.976v929.060h-81.976z","M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["plus"],"grid":0},"attrs":[{},{}],"properties":{"order":119,"id":2,"name":"plus","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M90.513 253.965l-47.292 47.292 468.778 468.778 468.778-468.778-47.292-47.292-421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-down"],"grid":0},"attrs":[{}],"properties":{"order":119,"id":3,"name":"angle-down","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M933.487 770.035l47.292-47.292-468.778-468.778-468.778 468.778 47.292 47.292 421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-top"],"grid":0},"attrs":[{}],"properties":{"order":122,"id":6,"prevSize":32,"code":59652,"name":"angle-top"},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M253.965 933.487l47.292 47.292 468.778-468.778-468.778-468.778-47.292 47.292 421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-right"],"grid":0},"attrs":[{}],"properties":{"order":120,"id":4,"prevSize":32,"code":59653,"name":"angle-right"},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M770.035 90.513l-47.292-47.292-468.778 468.778 468.778 468.778 47.292-47.292-421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-left"],"grid":0},"attrs":[{}],"properties":{"order":121,"id":5,"prevSize":32,"code":59654,"name":"angle-left"},"setIdx":0,"setId":0,"iconIdx":6}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}} \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index abc34e7..06e0bd8 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,3 +1,4 @@ +import 'slick-slider/slick/slick.min' window.readyResize = (callback, orientation = false) => { if ($.isFunction(callback)) { diff --git a/src/scss/global.scss b/src/scss/global.scss index 1fa81c3..f0bce2d 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -121,10 +121,10 @@ button { .main-content { - min-height: calc(100vh - #{$header-height-mobile}); + min-height: calc(100vh - #{$header-height-mobile} - #{$footer-height}); @media (min-width: map-get($grid-breakpoints, 'md')) { - min-height: 150vh;//calc(100vh - #{$header-height}); + min-height: calc(100vh - #{$header-height} - #{$footer-height}); } diff --git a/src/scss/icons.scss b/src/scss/icons.scss index 353b0a3..e8f2281 100644 --- a/src/scss/icons.scss +++ b/src/scss/icons.scss @@ -37,3 +37,12 @@ .icon-angle-down:before { content: "\e903"; } +.icon-angle-top:before { + content: "\e904"; +} +.icon-angle-right:before { + content: "\e905"; +} +.icon-angle-left:before { + content: "\e906"; +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 02b971e..68cb55a 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -4,6 +4,8 @@ /* Libraries */ @import "./node_modules/bootstrap/scss/bootstrap-grid"; @import "./node_modules/hamburgers/_sass/hamburgers/hamburgers"; +@import "./node_modules/slick-slider/slick/slick.scss"; +@import "./node_modules/slick-slider/slick/slick-theme.scss"; /* Global setup */ @import "../scss/fonts.scss"; @@ -17,3 +19,4 @@ @import "./components/footer/footer.scss"; @import "./components/buy/buy.scss"; @import "./components/breadcrumb/breadcrumb.scss"; +@import "./components/homeTemplate/homeTemplate.scss"; diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 229f8cd..09781de 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -61,12 +61,27 @@ $hamburger-hover-opacity : 1; $hamburger-active-layer-color : $olive-dark; $hamburger-active-hover-opacity: $olive-dark; +// Slick settings +$slick-font-path: "../fonts/"; +$slick-font-family: $icon; +$slick-loader-path: "/images/"; +$slick-arrow-color: $brown; +$slick-dot-color: $brown; +$slick-dot-color-active: $slick-dot-color; +$slick-prev-character: "\e906"; +$slick-next-character: "\e905"; +$slick-dot-character: " "; +$slick-dot-size: 6px; +$slick-opacity-default: 0.75; +$slick-opacity-on-hover: 1; +$slick-opacity-not-active: 0.25; + $header-height: 200px; $header-height-mobile: 110px; $header-height-sticky: 60px; $header-height-mobile-sticky: 60px; -$footer-height: 40px; +$footer-height: 250px; /* Font-size variables */ $font-6: 0.375rem; /* 6px */ diff --git a/webpack.config.js b/webpack.config.js index 7b9fc69..e7c7183 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -140,7 +140,7 @@ module.exports = (env) => { // IMAGES { - test: /\.(jpg|jpeg|png)$/, + test: /\.(jpg|jpeg|gif|png)$/, use: ['url-loader?limit=100000'] },