dslak
/
iolovolio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add bio and scroll

feature/homepage
Dslak 5 years ago
parent
223c0c73ab
commit
dc3ce1a1fa
5 changed files with 157 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      components/content/content-recount-index.html
  2. 79
      components/homeTemplate/homeTemplate.html
  3. 8
      components/homeTemplate/homeTemplate.js
  4. 103
      components/homeTemplate/homeTemplate.scss
  5. 6
      src/scss/forms.scss

4
components/content/content-recount-index.html
View File

@ -1,5 +1,7 @@
<?php
@include('components/breadcrumb/breadcrumb.php');
if(!$isHome) {
@include('components/breadcrumb/breadcrumb.php');
}
?>
<div class="component-content">

79
components/homeTemplate/homeTemplate.html
View File

@ -3,6 +3,7 @@
<div class="container logo-container">
<img class="logo" src="/images/logo.png">
</div>
<button class="scroll icon-angle-down"></button>
</div>
<div class="products">
@ -13,43 +14,61 @@
</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)){
?>
<?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 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
}
<?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 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>

8
components/homeTemplate/homeTemplate.js
View File

@ -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')
})
}
})

103
components/homeTemplate/homeTemplate.scss
View File

@ -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;
}
}
}
}
}
}

6
src/scss/forms.scss
View File

@ -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;

Write Preview
Loading…
Cancel
Save