21 changed files with 299 additions and 64 deletions
@ -1,5 +0,0 @@ |
|||
<div class="component-breadcrumb"> |
|||
<div class="row no-gutters"> |
|||
breadcrumb |
|||
</div> |
|||
</div> |
|||
@ -1,5 +0,0 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - breadcrumb') |
|||
|
|||
}) |
|||
@ -1,8 +0,0 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-breadcrumb { |
|||
width: 100%; |
|||
background: $brown; |
|||
height: 100px; |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
<div class="component-content"> |
|||
<div class="container"> |
|||
|
|||
<div class="row"><!-- Title block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<h3 class="title">Due cucchiai di salute</h3> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Paragraph block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<p class="paragraph text-italic"> |
|||
Non un semplice condimento ma un vero alimento: così va considerato l'olio extravergine d'oliva. |
|||
Più precisamente va considerato un <b>alimento funzionale</b>, cioè uno di quei pochi che preservano e <b>migliorano la salute</b> dell'uomo. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Image block --> |
|||
<div class="col-12 col-sm-12 col-md-10 mx-auto"> |
|||
<img class="image" src="/images/learn1.png"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Paragraph block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<p class="paragraph"> |
|||
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 <b>sostanze nutrienti</b> 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. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Blockquote block --> |
|||
<div class="col-12 col-sm-10 col-md-8 mx-auto"> |
|||
<blockquote class="blockquote"> |
|||
Per beneficiarne sono sufficienti 20 grammi di olio extravergine a crudo, cioè due cucchiai al giorno, magari abbinati a pesce azzurro e verdure. |
|||
</blockquote> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Paragraph block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<p class="paragraph"> |
|||
<b>Ma quali sono i maggiori principi nutritivi contenuti nell'olio extravergine?</b><br><br> |
|||
<b>E in che modo ciascuno di essi agisce sulla salute?</b><br><br> |
|||
<b>. Acido oleico</b> È 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.<br><br> |
|||
<b>. Acido linoleico</b> 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.<br><br> |
|||
<b>. Polifenoli</b> 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.<br><br> |
|||
<b>. Vitamina E</b> 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. |
|||
|
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,55 @@ |
|||
<div class="component-content"> |
|||
<div class="container"> |
|||
|
|||
<div class="row"><!-- Title block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<h3 class="title">Due cucchiai di salute</h3> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Paragraph block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<p class="paragraph text-italic"> |
|||
Non un semplice condimento ma un vero alimento: così va considerato l'olio extravergine d'oliva. |
|||
Più precisamente va considerato un <b>alimento funzionale</b>, cioè uno di quei pochi che preservano e <b>migliorano la salute</b> dell'uomo. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Image block --> |
|||
<div class="col-12 col-sm-12 col-md-10 mx-auto"> |
|||
<img class="image" src="/images/learn1.png"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Paragraph block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<p class="paragraph"> |
|||
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 <b>sostanze nutrienti</b> 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. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Blockquote block --> |
|||
<div class="col-12 col-sm-10 col-md-8 mx-auto"> |
|||
<blockquote class="blockquote"> |
|||
Per beneficiarne sono sufficienti 20 grammi di olio extravergine a crudo, cioè due cucchiai al giorno, magari abbinati a pesce azzurro e verdure. |
|||
</blockquote> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"><!-- Paragraph block --> |
|||
<div class="col-12 col-sm-10 col-md-6 mx-auto"> |
|||
<p class="paragraph"> |
|||
<b>Ma quali sono i maggiori principi nutritivi contenuti nell'olio extravergine?</b><br><br> |
|||
<b>E in che modo ciascuno di essi agisce sulla salute?</b><br><br> |
|||
<b>. Acido oleico</b> È 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.<br><br> |
|||
<b>. Acido linoleico</b> 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.<br><br> |
|||
<b>. Polifenoli</b> 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.<br><br> |
|||
<b>. Vitamina E</b> 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. |
|||
|
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - content') |
|||
|
|||
}) |
|||
@ -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; |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<div class="component-sectionHeader"> |
|||
<h2 class="label"><?= $section_label;?></label> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - sectionHeader') |
|||
|
|||
}) |
|||
@ -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; |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 572 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1 @@ |
|||
${require('../components/content/content-learn.html')} |
|||
Loading…
Reference in new issue