slim landing page
This commit is contained in:
T-A-H-prog
@@ -28,7 +28,6 @@ function createTween() {
|
|||||||
scrollTrigger: {
|
scrollTrigger: {
|
||||||
trigger: ".poster",
|
trigger: ".poster",
|
||||||
pin: true,
|
pin: true,
|
||||||
markers: true,
|
|
||||||
start: "top top",
|
start: "top top",
|
||||||
end: "+=500",
|
end: "+=500",
|
||||||
},
|
},
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, onUnmounted, ref, nextTick } from "vue";
|
import { onMounted, onUnmounted, ref, nextTick } from "vue";
|
||||||
|
|
||||||
import MonitorModel from "/src/components/sections/MonitorModel.vue";
|
import MonitorModel from "../../components/big/MonitorModel.vue";
|
||||||
|
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||||
539
src/components/slim/AboutMe.vue
Normal file
539
src/components/slim/AboutMe.vue
Normal file
@@ -0,0 +1,539 @@
|
|||||||
|
<template>
|
||||||
|
<main class="page">
|
||||||
|
<div class="parent">
|
||||||
|
<!-- TOP LEFT -->
|
||||||
|
<div class="div3">
|
||||||
|
<span>Portfolio / 01</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TOP CENTER -->
|
||||||
|
<div class="div12">
|
||||||
|
<span>About me</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TOP RIGHT -->
|
||||||
|
<div class="div10">
|
||||||
|
<span>Back ↗</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MAIN -->
|
||||||
|
<section class="div2">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Hello, I'm</p>
|
||||||
|
|
||||||
|
<h1 class="hero-title">
|
||||||
|
Tom
|
||||||
|
<span class="accent">Herpel</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portrait">
|
||||||
|
<img :src="tom_img" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="intro">
|
||||||
|
Designerin, Creative Thinker und jemand, der gute Ideen gerne einfach
|
||||||
|
macht.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- RED STATEMENT -->
|
||||||
|
<section class="div4">
|
||||||
|
<p class="statement">
|
||||||
|
how <br />
|
||||||
|
am <br />
|
||||||
|
i<br />
|
||||||
|
?
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SKILLS -->
|
||||||
|
<section class="div5">
|
||||||
|
<div>
|
||||||
|
<span class="number">02 / 04</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="label">Skills</span>
|
||||||
|
|
||||||
|
<ul class="skill-list">
|
||||||
|
<li>Branding</li>
|
||||||
|
<li>Art Direction</li>
|
||||||
|
<li>Web Design</li>
|
||||||
|
<li>Typography</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- LOCATION -->
|
||||||
|
<section class="div6">
|
||||||
|
<div>
|
||||||
|
<span class="number">03 / 04</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="label">Based in</span>
|
||||||
|
|
||||||
|
<p class="small location">
|
||||||
|
Germany<br />
|
||||||
|
Europe
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer class="div8">
|
||||||
|
<span class="copyright"> © 2026 </span>
|
||||||
|
|
||||||
|
<nav class="footer-links">
|
||||||
|
<a href="#">Instagram ↗</a>
|
||||||
|
<a href="#">Mail ↗</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import tom_img from "../../assets/myself/SmartTom.jpeg";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:global(*) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html) {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(body) {
|
||||||
|
margin: 0;
|
||||||
|
background: #f3eee3;
|
||||||
|
color: #29251f;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
VARIABLES
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.page {
|
||||||
|
--cream: #f3eee3;
|
||||||
|
--beige-light: #efe8d9;
|
||||||
|
--beige: #e8dfce;
|
||||||
|
--beige-dark: #dfd3bd;
|
||||||
|
--taupe: #d9cdb7;
|
||||||
|
--sand: #cfc1a8;
|
||||||
|
|
||||||
|
--red: #c9362b;
|
||||||
|
--black: #29251f;
|
||||||
|
|
||||||
|
--gap: 22px;
|
||||||
|
--border: 1.5px solid var(--black);
|
||||||
|
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 22px;
|
||||||
|
|
||||||
|
background: var(--cream);
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
GRID
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.parent {
|
||||||
|
min-height: calc(100vh - 44px);
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
grid-template-rows: repeat(8, 1fr);
|
||||||
|
gap: var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
GRID ELEMENTS
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
grid-column: span 4 / span 4;
|
||||||
|
grid-row: span 6 / span 6;
|
||||||
|
grid-column-start: 2;
|
||||||
|
grid-row-start: 2;
|
||||||
|
|
||||||
|
background: var(--beige);
|
||||||
|
border: var(--border);
|
||||||
|
|
||||||
|
padding: 32px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-row-start: 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4 {
|
||||||
|
grid-column: span 3 / span 3;
|
||||||
|
grid-column-start: 7;
|
||||||
|
grid-row-start: 3;
|
||||||
|
|
||||||
|
background: var(--red);
|
||||||
|
color: var(--cream);
|
||||||
|
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
border: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div5 {
|
||||||
|
grid-column: span 2 / span 2;
|
||||||
|
grid-row: span 2 / span 2;
|
||||||
|
grid-column-start: 6;
|
||||||
|
grid-row-start: 4;
|
||||||
|
|
||||||
|
background: var(--beige-light);
|
||||||
|
border: var(--border);
|
||||||
|
|
||||||
|
padding: 18px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div6 {
|
||||||
|
grid-column: span 2 / span 2;
|
||||||
|
grid-row: span 2 / span 2;
|
||||||
|
grid-column-start: 8;
|
||||||
|
grid-row-start: 5;
|
||||||
|
|
||||||
|
background: var(--taupe);
|
||||||
|
border: var(--border);
|
||||||
|
|
||||||
|
padding: 18px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div8 {
|
||||||
|
grid-column: span 3 / span 3;
|
||||||
|
grid-column-start: 6;
|
||||||
|
grid-row-start: 7;
|
||||||
|
|
||||||
|
border-top: var(--border);
|
||||||
|
padding-top: 12px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div10 {
|
||||||
|
grid-column-start: 9;
|
||||||
|
grid-row-start: 1;
|
||||||
|
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div12 {
|
||||||
|
grid-column-start: 5;
|
||||||
|
grid-row-start: 1;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
TYPOGRAPHY
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: clamp(64px, 8vw, 150px);
|
||||||
|
line-height: 0.78;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.075em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title .accent {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
max-width: 460px;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: clamp(18px, 1.8vw, 28px);
|
||||||
|
line-height: 1.05;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.035em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
PORTRAIT
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.portrait {
|
||||||
|
width: 100%;
|
||||||
|
height: 42%;
|
||||||
|
|
||||||
|
margin-top: 25px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
RED STATEMENT
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.statement {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: clamp(24px, 3vw, 48px);
|
||||||
|
line-height: 0.9;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.055em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
SKILLS
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.skill-list {
|
||||||
|
margin: 18px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.15;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list li {
|
||||||
|
padding: 6px 0;
|
||||||
|
|
||||||
|
border-top: 1px solid rgba(41, 37, 31, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list li:last-child {
|
||||||
|
border-bottom: 1px solid rgba(41, 37, 31, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
FOOTER
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
HOVER
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.div2,
|
||||||
|
.div4,
|
||||||
|
.div5,
|
||||||
|
.div6 {
|
||||||
|
transition:
|
||||||
|
transform 0.25s ease,
|
||||||
|
background-color 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2:hover {
|
||||||
|
transform: translate(-4px, -4px);
|
||||||
|
background: var(--beige-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4:hover {
|
||||||
|
transform: translate(4px, -4px);
|
||||||
|
background: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div5:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
background: var(--sand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div6:hover {
|
||||||
|
transform: translateY(4px);
|
||||||
|
background: var(--beige-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
MOBILE
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.page {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parent {
|
||||||
|
min-height: auto;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: auto;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2,
|
||||||
|
.div3,
|
||||||
|
.div4,
|
||||||
|
.div5,
|
||||||
|
.div6,
|
||||||
|
.div8,
|
||||||
|
.div10,
|
||||||
|
.div12 {
|
||||||
|
grid-column: auto;
|
||||||
|
grid-row: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div10 {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div12 {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
order: 4;
|
||||||
|
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4 {
|
||||||
|
order: 5;
|
||||||
|
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div5 {
|
||||||
|
order: 6;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div6 {
|
||||||
|
order: 7;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div8 {
|
||||||
|
order: 8;
|
||||||
|
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: clamp(70px, 21vw, 130px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait {
|
||||||
|
height: 330px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
453
src/components/slim/Main.vue
Normal file
453
src/components/slim/Main.vue
Normal file
@@ -0,0 +1,453 @@
|
|||||||
|
<template>
|
||||||
|
<main class="landing-page">
|
||||||
|
<div class="parent">
|
||||||
|
<section class="div1">
|
||||||
|
<div class="eyebrow">01 / PORTFOLIO / 2026</div>
|
||||||
|
|
||||||
|
<div class="hero-title">
|
||||||
|
<h1>
|
||||||
|
Toms<br />
|
||||||
|
Website
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span>DE</span>
|
||||||
|
<span>53° 9 N, 8° 13</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<button class="div14 nav-item">
|
||||||
|
<span>01</span>
|
||||||
|
<span>About</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="div15 nav-item">
|
||||||
|
<span>02</span>
|
||||||
|
<span>Work</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="div16 nav-item">
|
||||||
|
<span>03</span>
|
||||||
|
<span>Archive</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="div17 nav-item">
|
||||||
|
<span>04</span>
|
||||||
|
<span>Info</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="div18 nav-item red">
|
||||||
|
<span>05</span>
|
||||||
|
<span>Contact</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<section class="div19 project">
|
||||||
|
<div class="project-header">
|
||||||
|
<span>Selected Work</span>
|
||||||
|
<span>01—03</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-title">
|
||||||
|
<span class="project-number">01</span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
Digital<br />
|
||||||
|
Systems
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-footer">
|
||||||
|
<span>Identity / Web</span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="div20 info">
|
||||||
|
<span class="section-number">02</span>
|
||||||
|
|
||||||
|
<div class="info-content">
|
||||||
|
<p>
|
||||||
|
Independent creative developer working between design, technology
|
||||||
|
and interaction.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="div21 small-block">
|
||||||
|
<span>03</span>
|
||||||
|
<span>Scroll</span>
|
||||||
|
<span class="arrow">↓</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="div22 location">
|
||||||
|
<span>Location</span>
|
||||||
|
|
||||||
|
<div class="location-name">
|
||||||
|
<span>DE</span>
|
||||||
|
<strong>Oldenburg</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span>53°08' N</span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.landing-page {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
background: #f3eee3;
|
||||||
|
color: #29251f;
|
||||||
|
|
||||||
|
font-family:
|
||||||
|
Helvetica Neue,
|
||||||
|
Helvetica,
|
||||||
|
Arial,
|
||||||
|
sans-serif;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parent {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
grid-template-rows: repeat(8, 1fr);
|
||||||
|
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div1,
|
||||||
|
.div14,
|
||||||
|
.div15,
|
||||||
|
.div16,
|
||||||
|
.div17,
|
||||||
|
.div18,
|
||||||
|
.div19,
|
||||||
|
.div20,
|
||||||
|
.div21,
|
||||||
|
.div22 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
border: 1px solid #29251f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow,
|
||||||
|
.nav-item,
|
||||||
|
.project-header,
|
||||||
|
.project-footer,
|
||||||
|
.section-number,
|
||||||
|
.small-block,
|
||||||
|
.location {
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
|
line-height: 1.1;
|
||||||
|
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div1 {
|
||||||
|
grid-column: span 5 / span 5;
|
||||||
|
|
||||||
|
grid-row: span 2 / span 2;
|
||||||
|
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-row-start: 3;
|
||||||
|
|
||||||
|
background: #e8dfce;
|
||||||
|
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title h1 {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: clamp(44px, 6vw, 86px);
|
||||||
|
|
||||||
|
line-height: 0.82;
|
||||||
|
|
||||||
|
letter-spacing: -0.07em;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
border: 1px solid #29251f;
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
color: #29251f;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition:
|
||||||
|
background 180ms ease,
|
||||||
|
color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: #29251f;
|
||||||
|
|
||||||
|
color: #f3eee3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.red {
|
||||||
|
background: #c9362b;
|
||||||
|
|
||||||
|
color: #f3eee3;
|
||||||
|
|
||||||
|
border-color: #c9362b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.red:hover {
|
||||||
|
background: #29251f;
|
||||||
|
|
||||||
|
border-color: #29251f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div14 {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-row-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div15 {
|
||||||
|
grid-column-start: 3;
|
||||||
|
grid-row-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div16 {
|
||||||
|
grid-column-start: 5;
|
||||||
|
grid-row-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div17 {
|
||||||
|
grid-column-start: 7;
|
||||||
|
grid-row-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div18 {
|
||||||
|
grid-column-start: 9;
|
||||||
|
grid-row-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div19 {
|
||||||
|
grid-column: span 3 / span 3;
|
||||||
|
|
||||||
|
grid-row: span 3 / span 3;
|
||||||
|
|
||||||
|
grid-row-start: 6;
|
||||||
|
|
||||||
|
background: #dfd3bd;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-header,
|
||||||
|
.project-footer {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-number {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title h2 {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: clamp(28px, 3vw, 46px);
|
||||||
|
|
||||||
|
line-height: 0.9;
|
||||||
|
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div20 {
|
||||||
|
grid-column: span 2 / span 2;
|
||||||
|
|
||||||
|
grid-row: span 3 / span 3;
|
||||||
|
|
||||||
|
grid-column-start: 4;
|
||||||
|
|
||||||
|
grid-row-start: 6;
|
||||||
|
|
||||||
|
background: #efe8d9;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content p {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-size: 17px;
|
||||||
|
|
||||||
|
line-height: 1.1;
|
||||||
|
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div21 {
|
||||||
|
grid-column-start: 8;
|
||||||
|
|
||||||
|
grid-row-start: 6;
|
||||||
|
|
||||||
|
background: #d9cdb7;
|
||||||
|
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 24px;
|
||||||
|
|
||||||
|
line-height: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div22 {
|
||||||
|
grid-row: span 3 / span 3;
|
||||||
|
|
||||||
|
grid-column-start: 9;
|
||||||
|
|
||||||
|
grid-row-start: 6;
|
||||||
|
|
||||||
|
background: #cfc1a8;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-name strong {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
line-height: 0.9;
|
||||||
|
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================= */
|
||||||
|
/* MOBILE */
|
||||||
|
/* ================================================= */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.parent {
|
||||||
|
min-height: auto;
|
||||||
|
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
grid-template-rows: auto;
|
||||||
|
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div1,
|
||||||
|
.div14,
|
||||||
|
.div15,
|
||||||
|
.div16,
|
||||||
|
.div17,
|
||||||
|
.div18,
|
||||||
|
.div19,
|
||||||
|
.div20,
|
||||||
|
.div21,
|
||||||
|
.div22 {
|
||||||
|
grid-column: 1;
|
||||||
|
|
||||||
|
grid-row: auto;
|
||||||
|
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div1 {
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title h1 {
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,11 +1,12 @@
|
|||||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||||
import HomeView from '../views/HomeView.vue'
|
import HomeBig from '../views/HomeBig.vue'
|
||||||
import DucksInfo from '../views/InfoDucks.vue'
|
import DucksInfo from '../views/InfoDucks.vue'
|
||||||
import BooksShow from '../views/BooksShow.vue'
|
import BooksShow from '../views/BooksShow.vue'
|
||||||
|
import SlimMain from '../views/HomeSlime.vue'
|
||||||
|
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
const routes: RouteRecordRaw[] = [
|
||||||
{ path: '/', component: HomeView },
|
{ path: '/', component: SlimMain },
|
||||||
{path: '/ducks', component: DucksInfo},
|
{path: '/ducks', component: DucksInfo},
|
||||||
{path: '/books', component: BooksShow}
|
{path: '/books', component: BooksShow}
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="parent">
|
||||||
<div class="parent">
|
<div class="div2">Ordnung: Gänsevögel</div>
|
||||||
<div class="div2">Ordnung: Gänsevögel </div>
|
<div class="div3"><img class="mainImg" :src="mainDuck" /></div>
|
||||||
<div class="div3"><img class="mainImg" :src=mainDuck></div>
|
<div class="div4" style="text-align: center"><h2>Books</h2></div>
|
||||||
<div class="div4" style="text-align: center;"> <h2 >Books</h2></div>
|
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
<div class="div6">Unterfamilie: Anatinae</div>
|
||||||
<div class="div6">Unterfamilie: Anatinae</div>
|
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
|
||||||
<div class="div9"></div>
|
<div class="div9"></div>
|
||||||
<div class="div10"></div>
|
<div class="div10"></div>
|
||||||
<div class="div11"></div>
|
<div class="div11"></div>
|
||||||
@@ -25,160 +24,151 @@
|
|||||||
<div class="div24"></div>
|
<div class="div24"></div>
|
||||||
<div class="div25"></div>
|
<div class="div25"></div>
|
||||||
<div class="div26"></div>
|
<div class="div26"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="js">
|
<script setup lang="js">
|
||||||
|
import mainDuck from "./../assets/ducks/stockEnteMain.jpg";
|
||||||
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.parent {
|
.parent {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(10, 1fr);
|
grid-template-columns: repeat(10, 1fr);
|
||||||
grid-template-rows: repeat(7, 1fr);
|
grid-template-rows: repeat(7, 1fr);
|
||||||
gap: 9px;
|
gap: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div2 {
|
.div2 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div3 {
|
.div3 {
|
||||||
grid-column: span 4 / span 4;
|
grid-column: span 4 / span 4;
|
||||||
grid-row: span 4 / span 4;
|
grid-row: span 4 / span 4;
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div4 {
|
.div4 {
|
||||||
grid-column: span 4 / span 4;
|
grid-column: span 4 / span 4;
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div5 {
|
.div5 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 3;
|
grid-row-start: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div6 {
|
.div6 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div8 {
|
.div8 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 3;
|
grid-row-start: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div9 {
|
.div9 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 4;
|
grid-row-start: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div10 {
|
.div10 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 4;
|
grid-row-start: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div11 {
|
.div11 {
|
||||||
grid-column-start: 3;
|
grid-column-start: 3;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div12 {
|
.div12 {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div13 {
|
.div13 {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div14 {
|
.div14 {
|
||||||
grid-column-start: 3;
|
grid-column-start: 3;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div15 {
|
.div15 {
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div16 {
|
.div16 {
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div17 {
|
.div17 {
|
||||||
grid-column-start: 5;
|
grid-column-start: 5;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div18 {
|
.div18 {
|
||||||
grid-column-start: 5;
|
grid-column-start: 5;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div19 {
|
.div19 {
|
||||||
grid-column-start: 6;
|
grid-column-start: 6;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div20 {
|
.div20 {
|
||||||
grid-column-start: 6;
|
grid-column-start: 6;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div21 {
|
.div21 {
|
||||||
grid-column-start: 7;
|
grid-column-start: 7;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div22 {
|
.div22 {
|
||||||
grid-column-start: 7;
|
grid-column-start: 7;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div23 {
|
.div23 {
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div24 {
|
.div24 {
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div25 {
|
.div25 {
|
||||||
grid-column-start: 9;
|
grid-column-start: 9;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div26 {
|
.div26 {
|
||||||
grid-column-start: 9;
|
grid-column-start: 9;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainImg {
|
.mainImg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,16 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import WelcomeSection from "../components/sections/WelcomeSection.vue";
|
import WelcomeSection from "../components/big/WelcomeSection.vue";
|
||||||
// import HeroSection from "../components/sections/HeroSection.vue";
|
|
||||||
|
|
||||||
// import ImageSection from "../components/sections/ImageSection.vue";
|
import TextSection from "../components/big/TextSection.vue";
|
||||||
import TextSection from "../components/sections/TextSection.vue";
|
|
||||||
|
|
||||||
import { onMounted, nextTick } from "vue";
|
import { onMounted, nextTick } from "vue";
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||||
import ScrollSmoother from "gsap/ScrollSmoother";
|
import ScrollSmoother from "gsap/ScrollSmoother";
|
||||||
import MonitorModel from "../components/sections/MonitorModel.vue";
|
import MonitorModel from "../components/big/MonitorModel.vue";
|
||||||
import IntroductionSection from "../components/sections/IntroductionSection.vue";
|
import IntroductionSection from "../components/big/IntroductionSection.vue";
|
||||||
// import NewTextSection from "../components/sections/NewTextSection.vue";
|
// import NewTextSection from "../components/sections/NewTextSection.vue";
|
||||||
|
|
||||||
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
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>
|
<template>
|
||||||
|
<div class="parent">
|
||||||
<div class="parent">
|
<div class="div2">Ordnung: Gänsevögel</div>
|
||||||
<div class="div2">Ordnung: Gänsevögel </div>
|
<div class="div3"><img class="mainImg" :src="mainDuck" /></div>
|
||||||
<div class="div3"><img class="mainImg" :src=mainDuck></div>
|
<div class="div4" style="text-align: center"><h2>Stockente</h2></div>
|
||||||
<div class="div4" style="text-align: center;"> <h2 >Stockente</h2></div>
|
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
<div class="div6">Unterfamilie: Anatinae</div>
|
||||||
<div class="div6">Unterfamilie: Anatinae</div>
|
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
|
||||||
<div class="div9"></div>
|
<div class="div9"></div>
|
||||||
<div class="div10"></div>
|
<div class="div10"></div>
|
||||||
<div class="div11"></div>
|
<div class="div11"></div>
|
||||||
@@ -25,160 +24,151 @@
|
|||||||
<div class="div24"></div>
|
<div class="div24"></div>
|
||||||
<div class="div25"></div>
|
<div class="div25"></div>
|
||||||
<div class="div26"></div>
|
<div class="div26"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="js">
|
<script setup lang="js">
|
||||||
|
import mainDuck from "./../assets/ducks/stockEnteMain.jpg";
|
||||||
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.parent {
|
.parent {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(10, 1fr);
|
grid-template-columns: repeat(10, 1fr);
|
||||||
grid-template-rows: repeat(7, 1fr);
|
grid-template-rows: repeat(7, 1fr);
|
||||||
gap: 9px;
|
gap: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div2 {
|
.div2 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div3 {
|
.div3 {
|
||||||
grid-column: span 4 / span 4;
|
grid-column: span 4 / span 4;
|
||||||
grid-row: span 4 / span 4;
|
grid-row: span 4 / span 4;
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div4 {
|
.div4 {
|
||||||
grid-column: span 4 / span 4;
|
grid-column: span 4 / span 4;
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div5 {
|
.div5 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 3;
|
grid-row-start: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div6 {
|
.div6 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div8 {
|
.div8 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 3;
|
grid-row-start: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div9 {
|
.div9 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 4;
|
grid-row-start: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div10 {
|
.div10 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 4;
|
grid-row-start: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div11 {
|
.div11 {
|
||||||
grid-column-start: 3;
|
grid-column-start: 3;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div12 {
|
.div12 {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div13 {
|
.div13 {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div14 {
|
.div14 {
|
||||||
grid-column-start: 3;
|
grid-column-start: 3;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div15 {
|
.div15 {
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div16 {
|
.div16 {
|
||||||
grid-column-start: 4;
|
grid-column-start: 4;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div17 {
|
.div17 {
|
||||||
grid-column-start: 5;
|
grid-column-start: 5;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div18 {
|
.div18 {
|
||||||
grid-column-start: 5;
|
grid-column-start: 5;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div19 {
|
.div19 {
|
||||||
grid-column-start: 6;
|
grid-column-start: 6;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div20 {
|
.div20 {
|
||||||
grid-column-start: 6;
|
grid-column-start: 6;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div21 {
|
.div21 {
|
||||||
grid-column-start: 7;
|
grid-column-start: 7;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div22 {
|
.div22 {
|
||||||
grid-column-start: 7;
|
grid-column-start: 7;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div23 {
|
.div23 {
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div24 {
|
.div24 {
|
||||||
grid-column-start: 8;
|
grid-column-start: 8;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div25 {
|
.div25 {
|
||||||
grid-column-start: 9;
|
grid-column-start: 9;
|
||||||
grid-row-start: 6;
|
grid-row-start: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div26 {
|
.div26 {
|
||||||
grid-column-start: 9;
|
grid-column-start: 9;
|
||||||
grid-row-start: 7;
|
grid-row-start: 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainImg {
|
.mainImg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user