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/homeTemplate/homeTemplate.html b/components/homeTemplate/homeTemplate.html index 36742a9..86b0ed8 100644 --- a/components/homeTemplate/homeTemplate.html +++ b/components/homeTemplate/homeTemplate.html @@ -3,6 +3,7 @@
+
@@ -13,43 +14,61 @@
- - +
- -
- - - - - acquista - +
+
+ +
+
+
+ + + + + acquista + +
+
- -
- -
- Ottembrino - Lorem ipsum dolor sit amet -
-
- -
- -
- Non filtrato - Lorem ipsum dolor sit amet -
-
+ + +
+
+
+
+ +
+
+
+ + + 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 index 824ffc2..dbe58d8 100644 --- a/components/homeTemplate/homeTemplate.js +++ b/components/homeTemplate/homeTemplate.js @@ -7,9 +7,13 @@ $(document).ready( () => { if(component.length) { const slider = component.find('.slider') + const scroll = component.find('.scroll') - slider.slick({ - //setting-name: setting-value + 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 index b4d9662..c85d79a 100644 --- a/components/homeTemplate/homeTemplate.scss +++ b/components/homeTemplate/homeTemplate.scss @@ -23,15 +23,28 @@ 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 15%, $light-gray 15%, $light-gray 75%, $white 75%, $white 100%); + 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 $light-gray; + border: 1px solid $black-alpha; padding: 10px; background: $white; } @@ -44,20 +57,21 @@ .slide { position: relative; - display: flex !important; + //display: flex !important; padding: 0 5%; .image { - width: 55%; - float: left; + //width: 55%; + //float: left; + width: 100%; padding: 0 10px; } .description { position: relative; - width: 45%; - padding: 50% 20px 10% 20px; - float: left; + height: 100%; + padding: 20px; + text-align: center; .title { display: block; @@ -72,19 +86,19 @@ color: $olive-dark; overflow: hidden; max-width: 100%; - -webkit-line-clamp: 4; + -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } .link { - position: absolute; display: block; bottom: 20%; left: 0; width: 100%; text-align: center; + padding-top: 30px; .icon { display: block; @@ -106,6 +120,75 @@ 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/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;