nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-23 17:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

- homepage illustrations part 2

Browse Source
This commit is contained in:
Peter Papp
2021-04-05 10:15:33 +02:00
parent 9ea78d103e
commit 2f4df83b31
11 changed files with 387 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Oasis/Homepage/Components/Cloud.vue
+25
View File
@@ -0,0 +1,25 @@
<template>
<img :src="source" alt="oasis cloud">
</template>
<script>
export default {
name: 'Clouds',
props: [
'type'
],
computed: {
source() {
return this.type === 'colored'
? '/oasis/oasis-cloud-colored.svg'
: '/oasis/oasis-cloud-white.svg'
}
}
}
</script>
<style lang="scss" scoped>
img {
position: absolute;
}
</style>
resources/js/Oasis/Homepage/Components/Clouds.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<div class="clouds">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Clouds',
}
</script>
<style lang="scss" scoped>
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
resources/js/Oasis/Homepage/Components/OasisAboutUs.vue
+50 -8
View File
@@ -1,5 +1,11 @@
<template>
<div id="o-nas" class="oasis-about-us">
<Clouds class="clouds">
<Cloud type="colored" class="cloud" />
<Cloud type="colored" class="cloud" />
<Cloud type="colored" class="cloud" />
<Cloud type="colored" class="cloud" />
</Clouds>
<div class="container">
<div class="content-wrapper">
<div class="title-wrapper">
@@ -27,12 +33,16 @@
</template>
<script>
import Clouds from '@/Oasis/Homepage/Components/Clouds'
import Cloud from '@/Oasis/Homepage/Components/Cloud'
import {CheckIcon} from 'vue-feather-icons'
export default {
name: 'OasisAboutUs',
components: {
CheckIcon,
Clouds,
Cloud,
},
data() {
return {
@@ -52,22 +62,54 @@
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
.content-wrapper {
margin-bottom: -860px;
padding-left: 22%;
}
.clouds .cloud {
.hero {
width: 100%;
margin-bottom: -10px;
&:nth-child(1) {
opacity: 0.45;
left: 14%;
top: 13%;
}
&:nth-child(2) {
opacity: 0.1;
left: 2%;
top: 49%;
@include transform(scale(0.5));
}
&:nth-child(3) {
opacity: 0.15;
right: -2%;
top: 10%;
@include transform(scale(0.55));
}
&:nth-child(4) {
opacity: 0.10;
right: 16%;
top: 23%;
@include transform(scale(-0.6, 0.6));
}
}
.oasis-about-us {
padding-top: 150px;
padding-top: 255px;
position: relative;
.sub-title-sm {
max-width: 890px;
}
.content-wrapper {
margin-bottom: -910px;
padding-top: 50px;
padding-left: 22%;
}
.hero {
width: 100%;
margin-bottom: -10px;
}
}
.info-list {
resources/js/Oasis/Homepage/Components/OasisContact.vue
+1 -1
View File
@@ -136,7 +136,7 @@
.oasis-contact {
background: $theme-bg-dark;
padding-top: 90px;
padding-bottom: 90px;
padding-bottom: 160px;
.title-wrapper {
margin-bottom: 65px;
resources/js/Oasis/Homepage/Components/OasisFeatures.vue
+4 -2
View File
@@ -100,7 +100,7 @@
.oasis-features {
background: $theme-bg-dark;
padding-top: 85px;
padding-top: 90px;
position: relative;
.title-wrapper {
@@ -110,7 +110,9 @@
.main-title-sm {
color: white;
max-width: 690px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
.sub-title-sm {
resources/js/Oasis/Homepage/Components/OasisHeader.vue
+48 -3
View File
@@ -1,5 +1,13 @@
<template>
<div class="oasis-header">
<Clouds class="clouds">
<Cloud type="white" class="cloud" />
<Cloud type="white" class="cloud" />
<Cloud type="white" class="cloud" />
<Cloud type="white" class="cloud" />
<Cloud type="white" class="cloud" />
</Clouds>
<header class="header container">
<h1 class="main-title">
Jednoduchý a Bezpečný Cloud vo Vrecku
@@ -28,12 +36,15 @@
</template>
<script>
import Clouds from '@/Oasis/Homepage/Components/Clouds'
import Cloud from '@/Oasis/Homepage/Components/Cloud'
import { mapGetters } from 'vuex'
export default {
name: 'Header',
components: {
Clouds,
Cloud,
},
computed: {
...mapGetters([
@@ -53,18 +64,52 @@
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
.clouds .cloud {
&:nth-child(1) {
@include transform(scale(-0.4, 0.4));
top: 12%;
left: 16%;
}
&:nth-child(2) {
@include transform(scale(-0.8, 0.8));
top: 17%;
left: -11%;
}
&:nth-child(3) {
@include transform(scale(1));
top: 32%;
left: 8%;
}
&:nth-child(4) {
@include transform(scale(0.55));
top: 9%;
right: 21%;
}
&:nth-child(5) {
@include transform(scale(-1.35, 1.35));
top: 20%;
right: -2%;
}
}
.oasis-header {
position: relative;
margin-top: -110px;
padding-top: 250px;
background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
.main-title {
max-width: 820px;
margin: 0 auto;
margin: 0 auto 20px;
}
.sub-title {
margin-bottom: 50px;
margin-bottom: 47px;
}
}
resources/js/Oasis/Homepage/Components/OasisPricing.vue
+66 -4
View File
@@ -1,6 +1,13 @@
<template>
<div id="cenik" class="oasis-pricing text-center">
<Clouds class="clouds">
<Cloud type="colored" class="cloud" />
<Cloud type="colored" class="cloud" />
<Cloud type="colored" class="cloud" />
<Cloud type="colored" class="cloud" />
</Clouds>
<div class="title-wrapper container">
<h3 class="main-title-sm">
Kolik stoji OasisDrive?
@@ -42,6 +49,8 @@
import {
FolderIcon,
} from 'vue-feather-icons'
import Clouds from '@/Oasis/Homepage/Components/Clouds'
import Cloud from '@/Oasis/Homepage/Components/Cloud'
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -49,6 +58,8 @@
name: 'OasisPricing',
components: {
FolderIcon,
Clouds,
Cloud,
},
computed: {
...mapGetters([
@@ -116,8 +127,59 @@
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
.clouds .cloud {
&:nth-child(1) {
opacity: 0.2;
left: 4%;
top: 15%;
@include transform(scale(1.1))
}
&:nth-child(2) {
opacity: 0.15;
left: 18%;
top: 41%;
@include transform(scale(-0.7, 0.7))
}
&:nth-child(3) {
opacity: 0.30;
right: 9%;
top: 6%;
@include transform(scale(-1.55, 1.55))
}
&:nth-child(4) {
opacity: 0.25;
right: 16%;
top: 32%;
@include transform(scale(1))
}
}
.oasis-pricing {
margin-top: 290px;
position: relative;
.main-title-sm,
.sub-title-sm {
margin-left: auto;
margin-right: auto;
}
.title-wrapper {
padding-top: 220px;
margin-bottom: 110px;
}
.theme-button {
@include font-size(18);
}
}
.trees {
margin-bottom: -90px;
margin-bottom: -95px;
margin-left: 250px;
}
@@ -137,7 +199,7 @@
&:nth-child(2) {
z-index: 2;
padding: 55px 40px 20px;
padding: 65px 40px 20px;
background: $theme-bg-light;
margin-top: -40px;
margin-bottom: -40px;
@@ -148,11 +210,11 @@
.pricing-description {
color: $text-dark-secondary;
margin-bottom: 70px;
margin-bottom: 80px;
}
.pricing-data {
margin-top: 30px;
margin-top: 10px;
}
.pricing-vat {