diff --git a/components/content/content-recount-index.html b/components/content/content-recount-index.html index 0f5c6d2..b128794 100644 --- a/components/content/content-recount-index.html +++ b/components/content/content-recount-index.html @@ -1,5 +1,7 @@
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..7b43a3d 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..755383d 100644 --- a/components/header/header.scss +++ b/components/header/header.scss @@ -21,7 +21,7 @@ top: 50%; left: 50%; height: 100%; - max-height: 70px; + max-height: 50px; margin: auto 0; transition: max-height .4s; transform: translate(-50%, -50%); @@ -107,6 +107,15 @@ } } } + + &.is-home { + background: transparent; + .header-wrapper { + .logo { + display: none; + } + } + } } @@ -117,7 +126,7 @@ .header-wrapper { min-height: $header-height; .logo { - //max-height: $header-height; + max-height: 70px; } .menu-container { .menu-label { diff --git a/components/homeTemplate/homeTemplate.html b/components/homeTemplate/homeTemplate.html new file mode 100644 index 0000000..86b0ed8 --- /dev/null +++ b/components/homeTemplate/homeTemplate.html @@ -0,0 +1,74 @@ +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ + + + + acquista + +
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+ +
+
+
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, in pulvinar augue cursus ut. Donec in felis et metus semper condimentum vel id sem. Duis vestibulum purus ut dui suscipit, sit amet sodales lacus auctor. Praesent et bibendum massa. +

+ Duis bibendum rutrum augue, et sollicitudin risus tempor at. Fusce eget varius diam. Suspendisse molestie odio est, vel egestas diam aliquet et. Quisque blandit turpis magna, id cursus nisi luctus ac. + + + Leggi di più +
+
+
+
+ + + + Leggi di più +
diff --git a/components/homeTemplate/homeTemplate.js b/components/homeTemplate/homeTemplate.js new file mode 100644 index 0000000..dbe58d8 --- /dev/null +++ b/components/homeTemplate/homeTemplate.js @@ -0,0 +1,19 @@ + + +$(document).ready( () => { + console.log('Load component - homeTemplate') + + const component = $('.component-homeTemplate') + + if(component.length) { + const slider = component.find('.slider') + const scroll = component.find('.scroll') + + slider.slick() + + scroll.on('click', () => { + const body = $('html, body'); + body.stop().animate({scrollTop: window.innerHeight}, 500, 'swing') + }) + } +}) diff --git a/components/homeTemplate/homeTemplate.scss b/components/homeTemplate/homeTemplate.scss new file mode 100644 index 0000000..c85d79a --- /dev/null +++ b/components/homeTemplate/homeTemplate.scss @@ -0,0 +1,194 @@ +@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; + } + } + + .scroll { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + color: $brown; + font-size: $font-30; + background: none; + border: none; + outline: none; + padding: 0; + } + } + + .products { + background: linear-gradient(0deg, $white 0%, $white 35%, $light-gray 35%, $light-gray 75%, $white 75%, $white 100%); + + .main-image { + width: 100%; + margin: auto auto 5% auto; + border: 1px solid $black-alpha; + 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; + width: 100%; + padding: 0 10px; + } + + .description { + position: relative; + height: 100%; + padding: 20px; + text-align: center; + + .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: 3; + -webkit-box-orient: vertical; + } + + } + + .link { + display: block; + bottom: 20%; + left: 0; + width: 100%; + text-align: center; + padding-top: 30px; + + .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; + } + } + + .slick-prev, + .slick-next { + height: 30px; + width: 30px; + } + } + } + + .bio { + background: $light-gray; + margin: 100px 0; + + .main-image { + width: 100%; + margin: auto; + border: 1px solid $black-alpha; + padding: 10px; + } + + .description { + display: block; + background: $white; + @include font-style($font-sans, 'regular', $font-18); + text-align: center; + color: $gray; + padding: 50px 12%; + margin: auto; + + .logo { + max-height: 60px; + margin: 20px auto 40px auto; + } + + .goto { + margin: 50px auto 20px auto; + width: 200px; + } + + } + } + + .goto { + margin: 50px auto 20px auto; + width: 200px; + } +} + + +@media (min-width: map-get($grid-breakpoints, 'md')) { + .component-homeTemplate { + .products { + background: linear-gradient(0deg, $white 0%, $white 15%, $light-gray 15%, $light-gray 75%, $white 75%, $white 100%); + .slider { + .slide { + .description { + padding: 120% 20px 10% 20px; + text-align: left; + + .subtitle { + -webkit-line-clamp: 4; + } + } + + .link { + position: absolute; + } + } + } + } + } +} 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/forms.scss b/src/scss/forms.scss index 976928d..1a244bd 100644 --- a/src/scss/forms.scss +++ b/src/scss/forms.scss @@ -170,6 +170,12 @@ select { color: $white; } + &.button-transparent { + background: transparent; + border: 1px solid $brown; + color: $brown; + } + &.button-big { padding: 10px 20px; font-size: $font-18; 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'] },