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

add home

feature/home
Carmine De Rosa 5 years ago
parent
d3ba028f06
commit
4589eeffd6
16 changed files with 135 additions and 269 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      components/header/header.html
  2. 2
      components/header/header.scss
  3. 22
      components/home/home.html
  4. 5
      components/home/home.js
  5. 54
      components/home/home.scss
  6. BIN
      images/drop1.png
  7. BIN
      images/drop2.png
  8. 7
      pages/.htaccess
  9. 83
      pages/buy.ejs
  10. 7
      pages/home.ejs
  11. 17
      pages/index.ejs
  12. 83
      pages/iolovolio.ejs
  13. 83
      pages/learn.ejs
  14. 19
      src/scss/forms.scss
  15. 9
      src/scss/global.scss
  16. 1
      src/scss/main.scss

12
components/header/header.html
View File

@ -13,13 +13,13 @@
</div> </div>
<ul class="menu"> <ul class="menu">
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'iolovolio') { echo "active";}?>">
<a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a> <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
</li> </li>
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'buy.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
<a href="/buy" class="label">acquistare</a> <a href="/buy" class="label">acquistare</a>
</li> </li>
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
<a href="/learn" class="label">imparare</a> <a href="/learn" class="label">imparare</a>
</li> </li>
<li class="item disabled"> <li class="item disabled">
@ -28,13 +28,13 @@
</ul> </ul>
<ul class="sidebar-menu"> <ul class="sidebar-menu">
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'iolovolio') { echo "active";}?>">
<a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a> <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
</li> </li>
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'buy.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
<a href="/buy" class="label">acquistare</a> <a href="/buy" class="label">acquistare</a>
</li> </li>
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
<a href="/learn" class="label">imparare</a> <a href="/learn" class="label">imparare</a>
</li> </li>
<li class="item disabled"> <li class="item disabled">

2
components/header/header.scss
View File

@ -10,6 +10,7 @@
width: 100%; width: 100%;
background: $olive; background: $olive;
color: $white; color: $white;
z-index: 200;
.header-wrapper { .header-wrapper {
display: flex; display: flex;
@ -163,3 +164,4 @@
} }
} }
} }

22
components/home/home.html
View File

@ -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 w-100">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" 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>

5
components/home/home.js
View File

@ -0,0 +1,5 @@
$(document).ready( () => {
console.log('Load component - home')
})

54
components/home/home.scss
View File

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

BIN
images/drop1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 92 KiB

BIN
images/drop2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

7
pages/.htaccess
View File

@ -1,3 +1,8 @@
RewriteEngine On RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f 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]

83
pages/buy.ejs
View File

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

7
pages/home.ejs
View File

@ -0,0 +1,7 @@
${require('../components/home/home.html')}

17
pages/index.ejs
View File

@ -11,14 +11,23 @@
${require('../components/header/header.html')} ${require('../components/header/header.html')}
<main class="main-content">
<section class="container">
<?php
if(!$_GET['q'] || $_GET['q'] == 'home') {
@include 'home.php';
} else {
</section>
?>
<main class="main-content">
<?php
@include $_GET['q'].'.php';
?>
</main>
<?php
}
?>
</main>
${require('../components/footer/footer.html')} ${require('../components/footer/footer.html')}

83
pages/iolovolio.ejs
View File

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

83
pages/learn.ejs
View File

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

19
src/scss/forms.scss
View File

@ -67,9 +67,14 @@ input[type=password],
input[type=email], input[type=email],
input[type=tel], input[type=tel],
input[type=date] { input[type=date] {
border: none;
border-bottom: 1px solid $black;
height: 30px;
color: $dark-gray;
background: $white;
border-radius: 0;
height: auto;
display: block;
padding: 10px 20px;
border: 2px solid $white;
@include font-style( $font-sans, 'regular', $font-18);
box-shadow: unset; box-shadow: unset;
text-transform: initial !important; text-transform: initial !important;
@ -174,21 +179,17 @@ select {
.button { .button {
border: none;
color: $black;
color: $white;
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
height: auto; height: auto;
display: block; display: block;
padding: 10px 20px; padding: 10px 20px;
border: 2px solid $white;
text-align: center; text-align: center;
@include font-style( $font-sans, 'regular', $font-18); @include font-style( $font-sans, 'regular', $font-18);
text-transform: uppercase; text-transform: uppercase;
&.button-blue {
background: $blue;
color: $white;
}
&.button-small { &.button-small {
height: 18px; height: 18px;

9
src/scss/global.scss
View File

@ -2,6 +2,7 @@
body { body {
font-family: $font-sans; font-family: $font-sans;
font-weight: 400; font-weight: 400;
letter-spacing: 1px;
margin: 0; margin: 0;
color: $black; color: $black;
overflow-x: hidden; overflow-x: hidden;
@ -90,6 +91,14 @@ button {
text-transform: uppercase; text-transform: uppercase;
} }
.w-100 {
width: 100% !important;
}
.h-100 {
height: 100% !important;
}
.middle { .middle {
@include middle(); @include middle();
} }

1
src/scss/main.scss
View File

@ -13,3 +13,4 @@
@import "./components/header/header.scss"; @import "./components/header/header.scss";
@import "./components/footer/footer.scss"; @import "./components/footer/footer.scss";
@import "./components/home/home.scss";

Write Preview
Loading…
Cancel
Save