22 changed files with 237 additions and 9 deletions
@ -0,0 +1,55 @@ |
|||
<div class="component-homeTemplate"> |
|||
<div class="banner"> |
|||
<div class="container logo-container"> |
|||
<img class="logo" src="/images/logo.png"> |
|||
</div> |
|||
</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"> |
|||
<img class="image" src="<?= '/images/products/'.$r['id'].'.png';?>"> |
|||
<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> |
|||
<?php |
|||
} |
|||
?> |
|||
<div class="slide"> |
|||
<img class="image" src="/images/products/2.png"> |
|||
<div class="description"> |
|||
<span class="title">Ottembrino</span> |
|||
<span class="subtitle">Lorem ipsum dolor sit amet</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="slide"> |
|||
<img class="image" src="/images/products/3.png"> |
|||
<div class="description"> |
|||
<span class="title">Non filtrato</span> |
|||
<span class="subtitle">Lorem ipsum dolor sit amet</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,15 @@ |
|||
|
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - homeTemplate') |
|||
|
|||
const component = $('.component-homeTemplate') |
|||
|
|||
if(component.length) { |
|||
const slider = component.find('.slider') |
|||
|
|||
slider.slick({ |
|||
//setting-name: setting-value
|
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,111 @@ |
|||
@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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.products { |
|||
background: linear-gradient(0deg, $white 0%, $white 15%, $light-gray 15%, $light-gray 75%, $white 75%, $white 100%); |
|||
|
|||
.main-image { |
|||
width: 100%; |
|||
margin: auto auto 5% auto; |
|||
border: 1px solid $light-gray; |
|||
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; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.description { |
|||
position: relative; |
|||
width: 45%; |
|||
padding: 50% 20px 10% 20px; |
|||
float: left; |
|||
|
|||
.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: 4; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
} |
|||
|
|||
.link { |
|||
position: absolute; |
|||
display: block; |
|||
bottom: 20%; |
|||
left: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
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