surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- piso en malaga... (personal)

Browse Source
This commit is contained in:
Paolo Arena
2019-04-11 14:25:43 +02:00
parent fd20048934
commit ab64705ef3
9 changed files with 630 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
src/root/malaga/malaga.scss Normal file
View File

@@ -0,0 +1,410 @@
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #a7a7a7;
line-height: 1.5;
//font-size: 1rem;
}
.carousel_slide {
background-color: black !important;
background-size: contain !important;
background-repeat: no-repeat !important;;
background-position: top !important;
}
$grayshadow: #555;
.testo-banda {
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
//background: linear-gradient(180deg, #3144f0, transparent);
//background: rgba(0, 0, 0, .6)
}
p {
margin: 0 0 16px;
text-shadow: 2px 2px 4px $grayshadow;
}
.mycard {
visibility: hidden;
}
.landing {
}
.landing_background {
background: #000;
background-size: contain;
}
.landing > section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
//padding: 0 16px
}
.landing > section.padding {
padding: 90px 16px
}
.landing > section > div {
position: relative;
max-width: 1240px;
width: 100%
}
.landing__toolbar {
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
background: linear-gradient(180deg, #000, transparent);
padding: 0 !important
}
.landing__toolbar .q-btn {
border-radius: 0 0 5px 5px;
-ms-flex-item-align: stretch;
align-self: stretch
}
.landing__hero {
min-height: 90vh
}
.landing__header {
height: 18vh
}
.landing__arrow {
bottom: 25px;
opacity: .4
}
.landing__front {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
}
.landing__logo {
width: 150px;
height: 150px;
margin-top: 21px;
//-webkit-animation: logo-rotate 240s linear infinite;
//animation: logo-rotate 240s linear infinite
}
.landing__features .q-icon {
font-size: 64px
}
h4 {
line-height: 1.5;
text-shadow: 4px 4px 8px $grayshadow;
}
.landing__features h4, .landing__features h6 {
margin: 26px 0
}
.landing__features p {
opacity: .7;
font-size: 1rem;
line-height: 1.5;
}
.landing__footer {
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 75%, #FFF);
padding-top: 72px !important;
padding-bottom: 72px !important
}
.icon_contact:hover {
color: blue;
border-color: white;
border-width: 1px;
}
.landing__footer .doc-link {
color: #fff
}
.landing__footer .doc-link:hover {
opacity: .8
}
.landing__swirl-bg {
background-repeat: no-repeat !important;
background-position: top;
background-size: contain !important;
background-image: url(../../statics/images/landing_first_section.png) !important
}
.feat-descr {
font-size: 1.15rem;
}
.feat-descr:hover {
transition: opacity 0.5s ease-in-out;
opacity: 0.9;
}
.q-col-gutter-sm {
padding: 50px 50px;
//margin-left: -48px
}
body.mobile .landing {
//background: unset
}
body.mobile .landing:before {
content: "";
position: fixed;
top: 0;
height: 60vh;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
//background: #000 url(../../statics/images/cover.jpg) 50%;
background-size: contain;
}
/*
@-webkit-keyframes logo-rotate {
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn)
}
}
@keyframes logo-rotate {
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn)
}
}
*/
.home {
//background-color: rgb(250, 250, 250);
padding: 5px;
display: flex;
//flex-wrap: nowrap;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.btn-start {
margin: 5px;
}
.shadow {
//color: white;
text-shadow: 2px 2px 4px $grayshadow;
}
.shadow-max {
//color: white;
text-shadow: 4px 4px 8px $grayshadow;
}
.text-h1 {
font-size: 3rem;
font-weight: 300;
line-height: 3rem;
letter-spacing: -.01562em;
}
.text-h2 {
font-size: 3.75rem;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -.00833em;
}
.text-weight-bold {
font-weight: 700;
}
.miosottotit{
font-size: 2rem;
line-height: 2rem;
margin: 15px !important;
font-weight: bold;
text-shadow: 4px 4px 8px $grayshadow;
}
.subtitle1 {
font-size: 1.75rem;
line-height: 1.75rem;
text-shadow: 4px 4px 8px $grayshadow;
letter-spacing: .00937em;
&.big {
font-size: 1.5rem;
}
}
.text-subtitle2 {
font-size: 1.15rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
text-shadow: 4px 4px 8px $grayshadow;
}
.text-subtitle3 {
font-size: 1rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
text-shadow: 2px 2px 4px $grayshadow;
}
.homep-cover-img-1 {
background: #000 url(../../statics/images/cover.jpg) no-repeat 50% fixed;
//transition: background-image 1s ease-in-out;
}
.homep-cover-img-2 {
background: #000 url(../../statics/images/hand_people.jpg) no-repeat 50% fixed;
//transition: background-image 1s ease-in-out;
}
.homep-cover-img-3 {
background: #000 url(../../statics/images/cibo_sano.jpg) no-repeat 50% fixed;
//transition: background-image 1s ease-in-out;
}
.homep-cover-img.hide-filter:before {
opacity: 0
}
.landing__footer-icons {
font-size: 28px
}
.landing__footer-icons a {
margin: 0 8px 8px;
text-decoration: none;
outline: 0;
color: #fff;
transition: color .28s
}
.landing__footer-icons a:hover {
color: #e0e0e0
}
.doc-img {
max-width: 100%;
}
.mylist {
background: #3fdaff;
padding-left: 20px;
}
.clgutter {
margin-top: 20px;
padding: 10px;
}
.carousel_img_3 {
//background-image: url(../../statics/images/cibo_sano.jpg);
background-size: contain !important;
background-position: 50% center !important;
background-repeat: no-repeat !important;
}
@media (max-width: 718px) {
// PER VERSIONE MOBILE
.landing__hero {
text-align: center;
min-height: 60vh
}
.landing__header {
height: 7vh
}
.clgutter {
margin-top: 0px;
padding: 0px;
}
.landing__hero .text-h1 {
font-size: 2rem;
line-height: 2.05rem;
margin-bottom: 24px
}
.landing > section.padding {
padding: 10px 16px
//padding-bottom: 90px
}
.landing__features h4, .landing__features h6 {
margin: 20px 0
}
h4 {
line-height: 1.4;
text-shadow: 4px 4px 8px $grayshadow;
}
.landing .feature-item {
text-align: center;
margin-top: 20px;
}
.landing__hero-content {
padding-bottom: 180px
}
.landing__hero-btns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.q-col-gutter-sm {
padding: 10px 5px;
}
.subtitle1 {
font-size: 1rem;
line-height: 1rem;
text-shadow: 4px 4px 8px $grayshadow;
}
.text-subtitle2 {
font-size: 1rem;
padding: 10px 5px;
font-weight: bold;
}
.text-subtitle3 {
font-size: 0.75rem;
padding: 10px 5px;
}
.carousel_img_3 {
//background-image: url(../../statics/images/cibo_sano.jpg);
background-size: 620px 620px !important;
background-position: 50% top !important;
background-repeat: no-repeat !important;
}
}
.custom-caption {
text-align: center;
padding: 12px;
color: white;
background-color: rgba(0, 0, 0, .3);
}

87
src/root/malaga/malaga.ts Normal file
View File

@@ -0,0 +1,87 @@
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { GlobalStore, UserStore } from '@store'
import { Logo } from '../../components/logo'
import VueScrollReveal from 'vue-scroll-reveal'
import { tools } from '@src/store/Modules/tools'
Vue.use(VueScrollReveal, {
class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
duration: 1200,
scale: 0.95,
distance: '10px',
rotate: {
x: 0,
y: 0,
z: 0
}
// mobile: true
})
@Component({
components: { Logo }
})
export default class Malaga extends Vue {
public text: string = ''
public visibile: boolean = false
public cardvisible: string = 'hidden'
public displaycard: string = 'block'
public $t: any
// public firstClassSection: string = 'landing_background fade homep-cover-img animate-fade homep-cover-img-1'
public firstClassSection: string = 'fade homep-cover-img animate-fade homep-cover-img-1'
public $q
public polling
public slide2 = 0
public animare: number = 0
public getImmagini = [
{title: 'Camera matrimoniale', subtitle: '320€ al mese: da maggio fino a settembre',
img: '../../statics/images/piso/camera_matrimoniale.jpg'},
{title: 'Scrivania - matrimoniale', subtitle: '',
img: '../../statics/images/piso/matrimoniale_scrivania.jpg'},
{title: 'Finestra - matrimoniale', subtitle: '',
img: '../../statics/images/piso/matrimoniale_finestra.jpg'},
{title: 'Armadio - matrimoniale', subtitle: '',
img: '../../statics/images/piso/matrimoniale_armadio.jpg'},
{title: 'Finestra dalla camera matrimoniale', subtitle: '',
img: '../../statics/images/piso/finestra_della_camera_matrimoniale.jpg'},
{title: 'Camera singola', subtitle: '220€ al mese: da maggio fino a settembre',
img: '../../statics/images/piso/singola_1.jpg'},
{title: 'Scrivania singola', subtitle: '',
img: '../../statics/images/piso/singola_scrivania.jpg'},
{title: 'Finestra singola', subtitle: '',
img: '../../statics/images/piso/singola_finestra.jpg'},
{title: 'Armadio singola', subtitle: '',
img: '../../statics/images/piso/singola_armadio.jpg'},
{title: 'Cucina', subtitle: '',
img: '../../statics/images/piso/cucina.jpg'},
{title: 'Cucina', subtitle: '',
img: '../../statics/images/piso/cucina2.jpg'},
{title: 'Corridoio', subtitle: '',
img: '../../statics/images/piso/corridoio.jpg'},
{title: 'Televisore e Wifi', subtitle: '',
img: '../../statics/images/piso/televisore.jpg'},
{title: 'Terrazza', subtitle: '',
img: '../../statics/images/piso/terrazza.jpg'},
{title: 'Vista dalla terrazza', subtitle: '',
img: '../../statics/images/piso/fuori_dalla_terrazza.jpg'},
{title: 'Sala', subtitle: '',
img: '../../statics/images/piso/sala.jpg'},
{title: 'Divano', subtitle: '',
img: '../../statics/images/piso/divano.jpg'},
{title: 'Corridoio', subtitle: '',
img: '../../statics/images/piso/corridoio2.jpg'},
{title: 'Tavolo della sala', subtitle: '',
img: '../../statics/images/piso/tavolo_sala.jpg'},
{title: 'Bagno', subtitle: '',
img: '../../statics/images/piso/bagno.jpg'},
{title: 'Vasca con Doccia', subtitle: '',
img: '../../statics/images/piso/bagno2.jpg'}
]
public getenv(myvar) {
return process.env[myvar]
}
}

69
src/root/malaga/malaga.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<q-page class="text-white">
<div class="landing">
<section>
<div class="landing__hero">
<q-carousel
animated
infinite
arrows
thumbnails
transition-next="slide-left"
transition-prev="slide-right"
v-model="slide2"
height="100%"
width="100%"
>
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index" :img-src="rec.img" class="carousel_slide">
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
<div class="text-h5"><span class="text-h6 text-grey-2">{{index + 1}}. </span>{{rec.title}}</div>
<div class="subtitle1">{{rec.subtitle}}</div>
</div>
</q-carousel-slide>
</q-carousel>
</div>
</section>
<section class="padding bg-white text-grey-10 text-center">
<div class="landing__features row items-start q-col-gutter-sm">
<div class="col-12 text-center"><h4>{{$t('piso.descrizione')}}</h4>
<p v-html="$t('piso.descrapp_pag1')"></p>
</div>
</div>
</section>
<section class="landing__footer">
<div class="text-center">
<div class="landing__footer-icons row flex-center">
<!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
<!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
<!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-discord"> </i></a><a-->
<!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fas fa-comments"> </i></a><a-->
<!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-patreon"> </i></a>-->
</div>
<div class="q-mt-xs text-weight-thin" style="text-shadow: 4px 4px 8px #555;">
<!--Released under the-->
<!--<a href="https://github.com/quasarframework/quasar/blob/dev/LICENSE" target="_blank"-->
<!--rel="noopener noreferrer" class="doc-link">-->
<!--MIT LICENSE-->
<!--<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
<!--| <a href="https://www.iubenda.com/privacy-policy/40685560" target="_blank"-->
<!--rel="noopener noreferrer" class="doc-link">Privacy Policy<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
</div>
</div>
</section>
</div>
</q-page>
</template>
<script lang="ts" src="./malaga.ts">
</script>
<style lang="scss" scoped>
@import './malaga.scss';
</style>