diff --git a/components/breadcrumb/breadcrumb.html b/components/breadcrumb/breadcrumb.html deleted file mode 100644 index 06bb696..0000000 --- a/components/breadcrumb/breadcrumb.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
- breadcrumb -
-
diff --git a/components/breadcrumb/breadcrumb.js b/components/breadcrumb/breadcrumb.js deleted file mode 100644 index f6df84b..0000000 --- a/components/breadcrumb/breadcrumb.js +++ /dev/null @@ -1,5 +0,0 @@ - -$(document).ready( () => { - console.log('Load component - breadcrumb') - -}) \ No newline at end of file diff --git a/components/breadcrumb/breadcrumb.scss b/components/breadcrumb/breadcrumb.scss deleted file mode 100644 index 55907a5..0000000 --- a/components/breadcrumb/breadcrumb.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../../src/scss/variables.scss"; -@import "../../src/scss/mixins.scss"; - -.component-breadcrumb { - width: 100%; - background: $brown; - height: 100px; -} diff --git a/components/content/content-learn.html b/components/content/content-learn.html new file mode 100644 index 0000000..96ff4d4 --- /dev/null +++ b/components/content/content-learn.html @@ -0,0 +1,55 @@ +
+
+ +
+
+

Due cucchiai di salute

+
+
+ +
+
+

+ Non un semplice condimento ma un vero alimento: così va considerato l'olio extravergine d'oliva. + Più precisamente va considerato un alimento funzionale, cioè uno di quei pochi che preservano e migliorano la salute dell'uomo. +

+
+
+ +
+
+ +
+
+ +
+
+

+ La sua produzione non richiede altro che la spremitura delle olive: niente chimica, nessun intervento esterno se non quello meccanico, e ciò permette di conservare quel tesoro di sostanze nutrienti che è naturalmente presente nelle olive. Uno straordinario mix di molecole, particolarmente attive nell'olio "giovane", che da un lato protegge le cellule dall'ossidazione, contribuendo a prevenire alcuni tumori; dall'altro aiuta il cuore e la circolazione e tiene sotto controllo il colesterolo "cattivo", una delle prime cause di insorgenza di infarti e ictus. +

+
+
+ +
+
+
+ Per beneficiarne sono sufficienti 20 grammi di olio extravergine a crudo, cioè due cucchiai al giorno, magari abbinati a pesce azzurro e verdure. +
+
+
+ +
+
+

+ Ma quali sono i maggiori principi nutritivi contenuti nell'olio extravergine?

+ E in che modo ciascuno di essi agisce sulla salute?

+ . Acido oleico È il principale componente dell'olio extravergine d'oliva: ne costituisce circa il 72%. Si tratta di un acido grasso monoinsaturo omega-9 che contrasta l'ossidazione delle cellule. Inoltre ha effetti benefici sulla circolazione: contribuisce a limitare l'ipertensione e a mantenere corretti i livelli di colesterolo nel sangue. Confrontato con altri acidi grassi, quello oleico è più resistente alle alte temperature: dunque, se usato per friggere, l'olio d'oliva "libera" meno composti nocivi rispetto a oli più instabili.

+ . Acido linoleico Costituisce il 7% circa dell'olio extravergine. È un acido grasso polinsaturo omega-6, essenziale per la vita umana: il nostro corpo non è in grado di produrlo da solo né di "costruirlo" a partire da altre molecole, dunque occorre assumerlo direttamente attraverso l'alimentazione. Contribuisce a mantenere in salute le membrane cellulari e favorisce la crescita delle cellule; inoltre, sembra avere un ruolo nella coagulazione del sangue e nella risposta alle infiammazioni, oltre che nel mantenere in equilibrio il colesterolo.

+ . Polifenoli Sono un gruppo di sostanze organiche naturali, come i tannini e i flavonoidi, accomunati dall'avere effetti contro i radicali liberi. Nell'olio extravergine, particolarmente importanti sono l'idrossitirosolo e l'oleocantale, presenti in notevoli quantità nelle olive non ancora pienamente mature. Dal punto di vista gustativo, queste sostanze sono alla base delle sensazioni di amaro e piccante, mentre dal punto di vista nutrizionale sono potenti antiossidanti e antinfiammatori. Due cucchiai di olio extravergine soddisfano pienamente il fabbisogno quotidiano di un adulto.

+ . Vitamina E Questa vitamina è detta anche "tocoferolo", dal greco tocos ("nascita") e pherein ("portare avanti"): il suo scopritore, Herbert McLean Evans, notò infatti che questo micronutriente era importante per portare a termine felicemente la gravidanza. Oggi sappiamo che combatte i radicali liberi, protegge la membrana delle cellule dall'ossidazione e favorisce il ricambio cellulare, tanto da essere considerata un importante fattore di prevenzione dal cancro. Inoltre interviene nella coagulazione sanguigna e aumenta il livello del colesterolo "buono", riducendo il rischio di trombi e placche nelle arterie. Due cucchiai di olio extravergine di oliva contengono dal 35 al 50% della dose giornaliera raccomandata, che è di 8-10 mg. + +

+
+
+
+
diff --git a/components/content/content.html b/components/content/content.html new file mode 100644 index 0000000..96ff4d4 --- /dev/null +++ b/components/content/content.html @@ -0,0 +1,55 @@ +
+
+ +
+
+

Due cucchiai di salute

+
+
+ +
+
+

+ Non un semplice condimento ma un vero alimento: così va considerato l'olio extravergine d'oliva. + Più precisamente va considerato un alimento funzionale, cioè uno di quei pochi che preservano e migliorano la salute dell'uomo. +

+
+
+ +
+
+ +
+
+ +
+
+

+ La sua produzione non richiede altro che la spremitura delle olive: niente chimica, nessun intervento esterno se non quello meccanico, e ciò permette di conservare quel tesoro di sostanze nutrienti che è naturalmente presente nelle olive. Uno straordinario mix di molecole, particolarmente attive nell'olio "giovane", che da un lato protegge le cellule dall'ossidazione, contribuendo a prevenire alcuni tumori; dall'altro aiuta il cuore e la circolazione e tiene sotto controllo il colesterolo "cattivo", una delle prime cause di insorgenza di infarti e ictus. +

+
+
+ +
+
+
+ Per beneficiarne sono sufficienti 20 grammi di olio extravergine a crudo, cioè due cucchiai al giorno, magari abbinati a pesce azzurro e verdure. +
+
+
+ +
+
+

+ Ma quali sono i maggiori principi nutritivi contenuti nell'olio extravergine?

+ E in che modo ciascuno di essi agisce sulla salute?

+ . Acido oleico È il principale componente dell'olio extravergine d'oliva: ne costituisce circa il 72%. Si tratta di un acido grasso monoinsaturo omega-9 che contrasta l'ossidazione delle cellule. Inoltre ha effetti benefici sulla circolazione: contribuisce a limitare l'ipertensione e a mantenere corretti i livelli di colesterolo nel sangue. Confrontato con altri acidi grassi, quello oleico è più resistente alle alte temperature: dunque, se usato per friggere, l'olio d'oliva "libera" meno composti nocivi rispetto a oli più instabili.

+ . Acido linoleico Costituisce il 7% circa dell'olio extravergine. È un acido grasso polinsaturo omega-6, essenziale per la vita umana: il nostro corpo non è in grado di produrlo da solo né di "costruirlo" a partire da altre molecole, dunque occorre assumerlo direttamente attraverso l'alimentazione. Contribuisce a mantenere in salute le membrane cellulari e favorisce la crescita delle cellule; inoltre, sembra avere un ruolo nella coagulazione del sangue e nella risposta alle infiammazioni, oltre che nel mantenere in equilibrio il colesterolo.

+ . Polifenoli Sono un gruppo di sostanze organiche naturali, come i tannini e i flavonoidi, accomunati dall'avere effetti contro i radicali liberi. Nell'olio extravergine, particolarmente importanti sono l'idrossitirosolo e l'oleocantale, presenti in notevoli quantità nelle olive non ancora pienamente mature. Dal punto di vista gustativo, queste sostanze sono alla base delle sensazioni di amaro e piccante, mentre dal punto di vista nutrizionale sono potenti antiossidanti e antinfiammatori. Due cucchiai di olio extravergine soddisfano pienamente il fabbisogno quotidiano di un adulto.

+ . Vitamina E Questa vitamina è detta anche "tocoferolo", dal greco tocos ("nascita") e pherein ("portare avanti"): il suo scopritore, Herbert McLean Evans, notò infatti che questo micronutriente era importante per portare a termine felicemente la gravidanza. Oggi sappiamo che combatte i radicali liberi, protegge la membrana delle cellule dall'ossidazione e favorisce il ricambio cellulare, tanto da essere considerata un importante fattore di prevenzione dal cancro. Inoltre interviene nella coagulazione sanguigna e aumenta il livello del colesterolo "buono", riducendo il rischio di trombi e placche nelle arterie. Due cucchiai di olio extravergine di oliva contengono dal 35 al 50% della dose giornaliera raccomandata, che è di 8-10 mg. + +

+
+
+
+
diff --git a/components/content/content.js b/components/content/content.js new file mode 100644 index 0000000..ec5bd4e --- /dev/null +++ b/components/content/content.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - content') + +}) \ No newline at end of file diff --git a/components/content/content.scss b/components/content/content.scss new file mode 100644 index 0000000..a2fc6b5 --- /dev/null +++ b/components/content/content.scss @@ -0,0 +1,41 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-content { + padding-top: $header-height-mobile + 150px; + + .title { + @include font-style($font-serif, 'regular', $font-52); + color: $olive-dark; + padding: 30px 0; + margin: 0; + } + + .paragraph { + @include font-style($font-sans, 'regular', $font-22); + color: $gray; + padding: 30px 0; + margin: 0; + } + + .blockquote { + @include font-style($font-serif, 'regular-italic', $font-30); + color: $gray; + padding: 50px 0; + margin: 0; + text-align: center; + } + + .image { + width: 100%; + padding: 30px 0; + } +} + + + +@media (min-width: map-get($grid-breakpoints, 'md')) { + .component-content { + padding-top: $header-height + 150px; + } +} diff --git a/components/header/header.html b/components/header/header.html index 929db92..f969460 100644 --- a/components/header/header.html +++ b/components/header/header.html @@ -1,3 +1,7 @@ + +
@@ -34,7 +38,6 @@
-
diff --git a/components/header/header.js b/components/header/header.js index 9bebade..ed3d2e2 100644 --- a/components/header/header.js +++ b/components/header/header.js @@ -10,9 +10,7 @@ $(document).ready( () => { hamburger.off('.click').on('click.click', (e) => { const ham = $(e.currentTarget) - console.log('toggle') ham.toggleClass('is-active') - console.log(ham, menu) if(ham.hasClass('is-active')){ menuContainer.addClass('active') @@ -23,4 +21,16 @@ $(document).ready( () => { } }) + $(window).scroll(() => { + const sectionHeader = $('.component-sectionHeader') + const top = $(window).scrollTop() + if(top > 1) { + component.addClass('sticky') + sectionHeader.addClass('sticky') + } else { + component.removeClass('sticky') + sectionHeader.removeClass('sticky') + } + }) + }) diff --git a/components/header/header.scss b/components/header/header.scss index ce2115d..b8b0337 100644 --- a/components/header/header.scss +++ b/components/header/header.scss @@ -5,7 +5,6 @@ position: fixed; top: 0; left: 0; - min-height: $header-height-mobile; width: 100%; background: $white; color: $black; @@ -14,30 +13,34 @@ .header-wrapper { display: flex; position: relative; + transition: min-height .4s; min-height: $header-height-mobile; .logo { position: absolute; top: 50%; left: 50%; - height: 70px; + height: 100%; + max-height: 70px; + margin: auto 0; + transition: max-height .4s; transform: translate(-50%, -50%); } .hamburger { position: absolute; - top: 45px; + top: 20px; right: 20px; } .menu-container { - margin: 100px 0 20px auto; + margin: 60px 0 20px auto; .menu-label { //display: none; position: absolute; right: 35px; - top: 80px; + top: 60px; opacity: 0; transition: transform .4s, right .4s, opacity .4s; transform-origin: right; @@ -48,6 +51,7 @@ @include font-style($font-serif, 'regular', $font-18); color: $brown; transition: font-size .4s; + -webkit-backface-visibility: hidden; } } @@ -55,6 +59,7 @@ text-align: right; display: none; opacity: 0; + padding-top: 20px; transition: opacity .4s; .item { @@ -73,7 +78,7 @@ &.active { .menu-label { - opacity: 1; + opacity: 1 !important; transform: rotate(0deg); right: 20px; .label { @@ -88,6 +93,20 @@ } } } + + &.sticky { + .header-wrapper { + min-height: $header-height-mobile-sticky; + .logo { + max-height: 50px; + } + .menu-container { + .menu-label { + opacity: 0; + } + } + } + } } @@ -95,9 +114,11 @@ @media (min-width: map-get($grid-breakpoints, 'md')) { .component-header { - min-height: $header-height; .header-wrapper { min-height: $header-height; + .logo { + //max-height: $header-height; + } .menu-container { .menu-label { //display: block; @@ -105,6 +126,11 @@ } } } + &.sticky { + .header-wrapper { + min-height: $header-height-sticky; + } + } } } diff --git a/components/sectionHeader/sectionHeader.html b/components/sectionHeader/sectionHeader.html new file mode 100644 index 0000000..2a3ef52 --- /dev/null +++ b/components/sectionHeader/sectionHeader.html @@ -0,0 +1,3 @@ +
+

+

diff --git a/components/sectionHeader/sectionHeader.js b/components/sectionHeader/sectionHeader.js new file mode 100644 index 0000000..c9902fe --- /dev/null +++ b/components/sectionHeader/sectionHeader.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - sectionHeader') + +}) diff --git a/components/sectionHeader/sectionHeader.scss b/components/sectionHeader/sectionHeader.scss new file mode 100644 index 0000000..21dde09 --- /dev/null +++ b/components/sectionHeader/sectionHeader.scss @@ -0,0 +1,59 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-sectionHeader { + position: relative; + width: 100%; + background: $white; + background-image: url(/images/pattern.png); + background-size: auto 100px; + background-repeat: repeat-x; + background-position: center top; + height: 60px; + transition: height .4s; + + &:before { + position: absolute; + content: ''; + width: 500px; + height: 1px; + border-bottom: 1px solid $white; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .label { + position: absolute; + display: block; + top: 50%; + left: 50%; + height: 50px; + line-height: 40px; + transform: translate(-50%, -50%); + color: $white; + background: $brown; + padding: 0 10px; + margin: 0; + @include font-style($font-serif, 'regular', $font-46); + transition: height .4s, font-size .4s, line-height .4s; + } + + &.sticky { + height: 40px; + + .label { + height: 30px; + font-size: $font-24; + line-height: 26px; + } + + } + +} + +@media (min-width: map-get($grid-breakpoints, 'md')) { + .component-sectionHeader { + //margin-top: $header-height; + } +} diff --git a/images/learn1.png b/images/learn1.png new file mode 100644 index 0000000..10d3236 Binary files /dev/null and b/images/learn1.png differ diff --git a/images/pattern.png b/images/pattern.png new file mode 100644 index 0000000..fa66998 Binary files /dev/null and b/images/pattern.png differ diff --git a/pages/index.ejs b/pages/index.ejs index 677bcba..eb0cb38 100644 --- a/pages/index.ejs +++ b/pages/index.ejs @@ -11,20 +11,14 @@ ${require('../components/header/header.html')} +
- -
- -
- + ?> + +
+ diff --git a/pages/learn.ejs b/pages/learn.ejs new file mode 100644 index 0000000..597c5c0 --- /dev/null +++ b/pages/learn.ejs @@ -0,0 +1 @@ +${require('../components/content/content-learn.html')} diff --git a/src/scss/global.scss b/src/scss/global.scss index 6755fb2..1fa81c3 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -4,6 +4,7 @@ body { font-weight: 400; letter-spacing: 1px; margin: 0; + background: $light-gray; color: $dark-gray; overflow-x: hidden; } @@ -93,6 +94,10 @@ button { text-transform: uppercase; } +.text-italic { + font-style: italic; +} + .w-100 { width: 100% !important; } @@ -116,20 +121,12 @@ button { .main-content { - min-height: calc(100vh - #{$footer-height}); - padding: $header-height-mobile 10px 0 10px; + min-height: calc(100vh - #{$header-height-mobile}); @media (min-width: map-get($grid-breakpoints, 'md')) { - padding: $header-height 40px 0 40px; + min-height: 150vh;//calc(100vh - #{$header-height}); } - &.container-fluid { - &.full-width { - padding-left: 0; - padding-right: 0; - overflow-x: hidden; - } - } section { margin: 50px auto; diff --git a/src/scss/main.scss b/src/scss/main.scss index 938fb64..a748583 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -12,14 +12,5 @@ @import "../scss/forms.scss"; @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"; -@import "./components/pdp/pdp.scss"; -@import "./components/article/article.scss"; -@import "./components/articles/articles.scss"; -@import "./components/articleBox/articleBox.scss"; -*/ -@import "./components/breadcrumb/breadcrumb.scss"; +@import "./components/sectionHeader/sectionHeader.scss"; +@import "./components/content/content.scss"; diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 4e52fa6..65e5298 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -36,8 +36,8 @@ $icon: 'icomoon'; $black: #000; $white: #fff; -$gray: #686868; -$light-gray: #f0efec; +$gray: #808080; +$light-gray: #F5F2F0; $dark-gray: #393939; $olive: #86876f; @@ -64,6 +64,8 @@ $hamburger-active-hover-opacity: $olive-dark; $header-height: 200px; $header-height-mobile: 110px; +$header-height-sticky: 60px; +$header-height-mobile-sticky: 60px; $footer-height: 40px; /* Font-size variables */ diff --git a/webpack.config.js b/webpack.config.js index d3c008e..a3f59d9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -127,6 +127,12 @@ module.exports = (env) => { use: ['url-loader?limit=100000'] }, + // IMAGES + { + test: /\.(jpg|jpeg|png)$/, + use: ['url-loader?limit=100000'] + }, + // HTML { test: /\.html$/i,