slim landing page
This commit is contained in:
T-A-H-prog
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
|
||||
<div class="parent">
|
||||
<div class="div2">Ordnung: Gänsevögel </div>
|
||||
<div class="div3"><img class="mainImg" :src=mainDuck></div>
|
||||
<div class="div4" style="text-align: center;"> <h2 >Books</h2></div>
|
||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||
<div class="div6">Unterfamilie: Anatinae</div>
|
||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||
<div class="parent">
|
||||
<div class="div2">Ordnung: Gänsevögel</div>
|
||||
<div class="div3"><img class="mainImg" :src="mainDuck" /></div>
|
||||
<div class="div4" style="text-align: center"><h2>Books</h2></div>
|
||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||
<div class="div6">Unterfamilie: Anatinae</div>
|
||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||
<div class="div9"></div>
|
||||
<div class="div10"></div>
|
||||
<div class="div11"></div>
|
||||
@@ -25,160 +24,151 @@
|
||||
<div class="div24"></div>
|
||||
<div class="div25"></div>
|
||||
<div class="div26"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="js">
|
||||
|
||||
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
||||
|
||||
|
||||
import mainDuck from "./../assets/ducks/stockEnteMain.jpg";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
gap: 9px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
|
||||
.div2 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-column: span 4 / span 4;
|
||||
grid-row: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 2;
|
||||
grid-column: span 4 / span 4;
|
||||
grid-row: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-column: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 1;
|
||||
grid-column: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div5 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 3;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.div6 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 2;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.div8 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 3;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.div9 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 4;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.div10 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 4;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.div11 {
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div12 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div13 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div14 {
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div15 {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div16 {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div17 {
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div18 {
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div19 {
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div20 {
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div21 {
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div22 {
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div23 {
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div24 {
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div25 {
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div26 {
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.mainImg {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeSection from "../components/sections/WelcomeSection.vue";
|
||||
// import HeroSection from "../components/sections/HeroSection.vue";
|
||||
import WelcomeSection from "../components/big/WelcomeSection.vue";
|
||||
|
||||
// import ImageSection from "../components/sections/ImageSection.vue";
|
||||
import TextSection from "../components/sections/TextSection.vue";
|
||||
import TextSection from "../components/big/TextSection.vue";
|
||||
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
import ScrollSmoother from "gsap/ScrollSmoother";
|
||||
import MonitorModel from "../components/sections/MonitorModel.vue";
|
||||
import IntroductionSection from "../components/sections/IntroductionSection.vue";
|
||||
import MonitorModel from "../components/big/MonitorModel.vue";
|
||||
import IntroductionSection from "../components/big/IntroductionSection.vue";
|
||||
// import NewTextSection from "../components/sections/NewTextSection.vue";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
35
src/views/HomeSlime.vue
Normal file
35
src/views/HomeSlime.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import Main from "../components/slim/Main.vue";
|
||||
import AboutMe from "../components/slim/AboutMe.vue";
|
||||
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
import ScrollSmoother from "gsap/ScrollSmoother";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
|
||||
ScrollSmoother.create({
|
||||
wrapper: "#smooth-wrapper",
|
||||
content: "#smooth-content",
|
||||
smooth: 0.2,
|
||||
effects: true,
|
||||
});
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="smooth-wrapper">
|
||||
<div id="smooth-content">
|
||||
<Main id="welcome" />
|
||||
<AboutMe id="me" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped></style>
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
|
||||
<div class="parent">
|
||||
<div class="div2">Ordnung: Gänsevögel </div>
|
||||
<div class="div3"><img class="mainImg" :src=mainDuck></div>
|
||||
<div class="div4" style="text-align: center;"> <h2 >Stockente</h2></div>
|
||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||
<div class="div6">Unterfamilie: Anatinae</div>
|
||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||
<div class="parent">
|
||||
<div class="div2">Ordnung: Gänsevögel</div>
|
||||
<div class="div3"><img class="mainImg" :src="mainDuck" /></div>
|
||||
<div class="div4" style="text-align: center"><h2>Stockente</h2></div>
|
||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||
<div class="div6">Unterfamilie: Anatinae</div>
|
||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||
<div class="div9"></div>
|
||||
<div class="div10"></div>
|
||||
<div class="div11"></div>
|
||||
@@ -25,160 +24,151 @@
|
||||
<div class="div24"></div>
|
||||
<div class="div25"></div>
|
||||
<div class="div26"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="js">
|
||||
|
||||
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
||||
|
||||
|
||||
import mainDuck from "./../assets/ducks/stockEnteMain.jpg";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
gap: 9px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
|
||||
.div2 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-column: span 4 / span 4;
|
||||
grid-row: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 2;
|
||||
grid-column: span 4 / span 4;
|
||||
grid-row: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-column: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 1;
|
||||
grid-column: span 4 / span 4;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div5 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 3;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.div6 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 2;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.div8 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 3;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.div9 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 4;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.div10 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 4;
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.div11 {
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div12 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div13 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div14 {
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div15 {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div16 {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div17 {
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div18 {
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div19 {
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div20 {
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div21 {
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div22 {
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div23 {
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.div24 {
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div25 {
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 6;
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.div26 {
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 7;
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.mainImg {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user