@ -0,0 +1,22 @@ |
|||
<div class="component-home"> |
|||
<div class="container my-auto"> |
|||
<div class="row"> |
|||
<div class="col-12 col-sm-6 col-md-4 order-1 order-md-0"> |
|||
<img class="drop" src="/images/drop1.png"> |
|||
<span class="title"><b>io</b>lov<b>olio</b> acquistare</span> |
|||
<span class="subtitle"></span> |
|||
<button class="button button-big w-100 text-uppercase">Vai allo shop</button> |
|||
</div> |
|||
<div class="col-12 col-md-4 order-0 order-md-1"> |
|||
<img class="logo" src="/images/logo.png"> |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-4 order-2 order-md-2"> |
|||
<img class="drop" src="/images/drop2.png"> |
|||
<span class="title"><b>io</b>lov<b>olio</b> produrre</span> |
|||
<span class="subtitle">Avvisami quando l'opzione sarà attiva</span> |
|||
<input type="text" class="input input-big" placeholder="latuamail@mail.com"> |
|||
<span class="privacy">*Autorizzo il trattamento dei miei dati personali ai sensi del Dlgs 196 del 30 giugno 2003 e dell'art. 13 GDPR (Regolamento UE 2016/679)</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
@ -0,0 +1,5 @@ |
|||
/* |
|||
$(document).ready( () => { |
|||
console.log('Load component - home') |
|||
|
|||
})*/ |
@ -0,0 +1,54 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-home { |
|||
display: flex; |
|||
background: $olive; |
|||
min-height: calc(100vh - #{$footer-height}); |
|||
padding: $header-height-mobile 40px 0 40px; |
|||
|
|||
.drop { |
|||
width: 100%; |
|||
padding: 40px 70px 10px 70px; |
|||
} |
|||
|
|||
.title { |
|||
display: block; |
|||
color: $white; |
|||
font-size: $font-28; |
|||
text-align: center; |
|||
} |
|||
|
|||
.subtitle { |
|||
display: block; |
|||
min-height: 30px; |
|||
color: $white; |
|||
font-size: $font-18; |
|||
text-align: center; |
|||
} |
|||
|
|||
.privacy { |
|||
display: block; |
|||
color: $white; |
|||
font-size: $font-12; |
|||
text-align: left; |
|||
padding-bottom: 50px; |
|||
} |
|||
|
|||
.logo { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
.component-home { |
|||
padding: $header-height 40px 0 40px; |
|||
|
|||
.logo { |
|||
width: calc(100% + 100px); |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,53 @@ |
|||
<div class="component-plp"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-10"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12 pb-1"> |
|||
<input type="text" class="input-gray" placeholder="Cerca..."> |
|||
</div> |
|||
|
|||
<div class="col-12 pb-4"> |
|||
<select class="select"> |
|||
<option value="">Filtra</option> |
|||
<option value="1">Opzione 1</option> |
|||
<option value="2">Opzione 2</option> |
|||
<option value="3">Opzione 3</option> |
|||
<option value="4">Opzione 4</option> |
|||
</select> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox2.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox3.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox4.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-md-2 banner"> |
|||
banner |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - plp') |
|||
|
|||
}) |
@ -0,0 +1,12 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-plp { |
|||
padding: 40px 0; |
|||
|
|||
.banner { |
|||
background: $light-gray; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
@ -0,0 +1,8 @@ |
|||
<div class="component-productBox"> |
|||
<img class="image" src="/images/prod1.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto </span> |
|||
<span class="price">17,90 €</span> |
|||
</div> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - productBox') |
|||
|
|||
}) |
@ -0,0 +1,38 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-productBox { |
|||
position: relative; |
|||
padding-bottom: 80px; |
|||
height: 100%; |
|||
|
|||
.image { |
|||
width: 100%; |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.title { |
|||
display: inline-block; |
|||
width: calc(100% - 70px); |
|||
padding-right: 5px; |
|||
font-size: $font-16; |
|||
font-weight: 600; |
|||
line-height: $font-16; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 70px; |
|||
font-size: $font-16; |
|||
font-weight: light; |
|||
text-align: right; |
|||
white-space: no-wrap; |
|||
} |
|||
|
|||
.add-to-cart{ |
|||
position: absolute; |
|||
bottom: 20px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
@ -0,0 +1,8 @@ |
|||
<div class="component-productBox"> |
|||
<img class="image" src="/images/prod2.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto Nome prodotto Nome prodotto </span> |
|||
<span class="price">170,90 €</span> |
|||
</div> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
@ -0,0 +1,8 @@ |
|||
<div class="component-productBox"> |
|||
<img class="image" src="/images/prod3.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto</span> |
|||
<span class="price">7,90 €</span> |
|||
</div> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
@ -0,0 +1,8 @@ |
|||
<div class="component-productBox"> |
|||
<img class="image" src="/images/prod4.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto</span> |
|||
<span class="price">8,90 €</span> |
|||
</div> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 57 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 107 KiB |
@ -1,3 +1,8 @@ |
|||
RewriteEngine On |
|||
RewriteCond %{REQUEST_FILENAME} !-f |
|||
RewriteRule ^([^\.]+)$ $1.php [NC,L] |
|||
RewriteRule ^([^\.]+)$ index.php?q=$1 [NC,L] |
|||
# |
|||
# Rewritebase / |
|||
# RewriteCond %{REQUEST_FILENAME} !-f |
|||
# RewriteCond %{REQUEST_FILENAME} !-d |
|||
# RewriteRule ^(.*)$ index.php?q=$1 [L,QSA] |
|||
|
@ -0,0 +1,5 @@ |
|||
|
|||
${require('../components/home/home.html')} |
|||
|
|||
|
|||
|
@ -1,83 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="it"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>IoLovOlio</title> |
|||
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> |
|||
<meta name="description" content="."> |
|||
<link rel="stylesheet" href="/assets/css/styles.css"> |
|||
</head> |
|||
<body> |
|||
|
|||
${require('../components/header/header.html')} |
|||
|
|||
<main class="main-content"> |
|||
|
|||
<section class="container"> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
</section> |
|||
|
|||
|
|||
</main> |
|||
|
|||
${require('../components/footer/footer.html')} |
|||
|
|||
</body> |
|||
</html> |
@ -1,83 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="it"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>IoLovOlio</title> |
|||
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> |
|||
<meta name="description" content="."> |
|||
<link rel="stylesheet" href="/assets/css/styles.css"> |
|||
</head> |
|||
<body> |
|||
|
|||
${require('../components/header/header.html')} |
|||
|
|||
<main class="main-content"> |
|||
|
|||
<section class="container"> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
section<br> |
|||
</section> |
|||
|
|||
|
|||
</main> |
|||
|
|||
${require('../components/footer/footer.html')} |
|||
|
|||
</body> |
|||
</html> |