24 changed files with 356 additions and 14 deletions
@ -0,0 +1,74 @@ |
|||
<div class="component-homeTemplate"> |
|||
<div class="banner"> |
|||
<div class="container logo-container"> |
|||
<img class="logo" src="/images/logo.png"> |
|||
</div> |
|||
<button class="scroll icon-angle-down"></button> |
|||
</div> |
|||
|
|||
<div class="products"> |
|||
<div class="container"> |
|||
<div class="row py-4"> |
|||
<div class="col-5 d-none d-md-flex"> |
|||
<img class="main-image" src="/images/homeProducts.png"> |
|||
</div> |
|||
<div class="col-12 col-md-7"> |
|||
<div class="slider"> |
|||
<?php |
|||
$q = mysqli_query($conn, "SELECT * FROM products"); |
|||
while($r = mysqli_fetch_array($q)){ |
|||
?> |
|||
<div class="slide"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-7"> |
|||
<img class="image" src="<?= '/images/products/'.$r['id'].'.png';?>"> |
|||
</div> |
|||
<div class="col-12 col-md-5"> |
|||
<div class="description"> |
|||
<span class="title"><?= $r['name'];?></span> |
|||
<span class="subtitle"><?= $r['description'];?></span> |
|||
<a class="link" href="/acquistare/<?= $r['id'];?>/<?= $r['name'];?>"> |
|||
<span class="icon icon-buy"></span> |
|||
<span class="label">acquista</span> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<?php |
|||
} |
|||
?> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="bio"> |
|||
<div class="container"> |
|||
<div class="row no-gutters py-4"> |
|||
<div class="col-12 col-md-5 d-flex"> |
|||
<img class="main-image" src="/images/homeDescription.png"> |
|||
</div> |
|||
<div class="col-12 col-sm-8 col-md-7 mx-auto d-flex"> |
|||
<div class="description"> |
|||
<img class="logo" src="/images/logoHeader.png"> |
|||
<span class="d-block text-left"> |
|||
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. |
|||
<br><br> |
|||
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. |
|||
</span> |
|||
|
|||
<a class="goto button button-transparent" href="/conoscere">Leggi di più</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<?php |
|||
@include('components/content/content-recount-index.php'); |
|||
?> |
|||
|
|||
<a class="goto button button-transparent" href="/raccontare">Leggi di più</a> |
|||
</div> |
|||
@ -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') |
|||
}) |
|||
} |
|||
}) |
|||
@ -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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
@ -0,0 +1,2 @@ |
|||
|
|||
${require('../components/homeTemplate/homeTemplate.html')} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
Binary file not shown.
@ -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}} |
|||
{"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}} |
|||
Loading…
Reference in new issue