Parallax repariert, Footer hinzugefügt
This commit is contained in:
R40fendt
16
package-lock.json
generated
16
package-lock.json
generated
@@ -12,6 +12,7 @@
|
|||||||
"@tauri-apps/plugin-opener": "^2",
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
"embla-carousel-autoplay": "^8.6.0",
|
"embla-carousel-autoplay": "^8.6.0",
|
||||||
"embla-carousel-vue": "^8.6.0",
|
"embla-carousel-vue": "^8.6.0",
|
||||||
|
"jarallax": "^2.2.1",
|
||||||
"jquery": "^3.7.1",
|
"jquery": "^3.7.1",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"striptags": "^3.2.0",
|
"striptags": "^3.2.0",
|
||||||
@@ -1408,6 +1409,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/jarallax": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jarallax/-/jarallax-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-O4pqiWGp856cTGG5uBG9b0Uk7AIRmfFCVisRwgpICsG2xyIRnUrVbx4SIbpzUDAhkD00jdjBiqb1bZPTkHi1vQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"video-worker": "^2.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/jquery": {
|
"node_modules/jquery": {
|
||||||
"version": "3.7.1",
|
"version": "3.7.1",
|
||||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||||
@@ -2031,6 +2041,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/video-worker": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/video-worker/-/video-worker-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-bjdpCArfD/kvt3HBU2sJUEEFq+6HjIufKXL2NojWswInxalJwR5yh/cgaGismHS8PAe5hx+W0GfrFqlxJTfI/w==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "6.2.5",
|
"version": "6.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
|
||||||
|
|||||||
@@ -15,6 +15,7 @@
|
|||||||
"@tauri-apps/plugin-opener": "^2",
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
"embla-carousel-autoplay": "^8.6.0",
|
"embla-carousel-autoplay": "^8.6.0",
|
||||||
"embla-carousel-vue": "^8.6.0",
|
"embla-carousel-vue": "^8.6.0",
|
||||||
|
"jarallax": "^2.2.1",
|
||||||
"jquery": "^3.7.1",
|
"jquery": "^3.7.1",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"striptags": "^3.2.0",
|
"striptags": "^3.2.0",
|
||||||
|
|||||||
68
src/Footer.vue
Normal file
68
src/Footer.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<section class="footer3 cid-u6k7q0Blvk" once="footers" id="footer-6-u6k7q0Blvk">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="row-links">
|
||||||
|
<ul class="header-menu">
|
||||||
|
<li class="header-menu-item mbr-fonts-style display-5">
|
||||||
|
<div class="modal-container">
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="closeBtn">×</span>
|
||||||
|
<h1>Über</h1>
|
||||||
|
<p>
|
||||||
|
Ritzenbergen ist ein kleines Dorf der Gemeinde Blender und liegt dicht an der Weser.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Bei dieser Seite handelt es sich um eine private Homepage der Dorfgemeinschaft Amedorf &
|
||||||
|
Ritzenbergen.
|
||||||
|
<br><br>
|
||||||
|
© Front-End und Web Design: Mathis Kuhlenkamp <br>
|
||||||
|
© Back-End und Datenbanken: Tom Kuhlenkamp, Jonas Kuhlenkamp
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="./assets/AdminPanel/LoginFormular/loginform.html">Administrations Login</a>
|
||||||
|
</p><br><br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="text-white btn-ueber openBtn">Über</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="header-menu-item mbr-fonts-style display-5">
|
||||||
|
<div class="modal-container">
|
||||||
|
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="closeBtn">×</span>
|
||||||
|
<h1>Kontakt</h1>
|
||||||
|
<p>
|
||||||
|
Tom Kuhlenkamp <br>
|
||||||
|
tom@ritzenbergen.de
|
||||||
|
</p><br><br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="text-white btn-kontakt openBtn">Kontakt</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 mt-4">
|
||||||
|
<p class="mbr-fonts-style copyright display-7">
|
||||||
|
© 2024 Ritzenbergen. Alle Rechte vorbehalten. <br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
60
src/Jarallax.vue
Normal file
60
src/Jarallax.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="parallax-wrapper">
|
||||||
|
<div
|
||||||
|
class="jarallax"
|
||||||
|
ref="parallaxEl"
|
||||||
|
data-speed="0.5"
|
||||||
|
>
|
||||||
|
<div class="jarallax-img" style="background-image: url('https://ritzenbergen.de/Fotos/erntefest2011.jpg');">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="container content cid-u6k7q0zosO">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { jarallax } from 'jarallax';
|
||||||
|
import 'jarallax/dist/jarallax.css'; // optional, falls du Styles möchtest
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ParallaxSection',
|
||||||
|
mounted() {
|
||||||
|
jarallax(this.$refs.parallaxEl);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
jarallax(this.$refs.parallaxEl, 'destroy');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.parallax-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jarallax-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
slot{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
76
src/Main.vue
76
src/Main.vue
@@ -4,11 +4,16 @@ import striptags from "striptags";
|
|||||||
import moment, { Moment } from "moment";
|
import moment, { Moment } from "moment";
|
||||||
import Modal from "./Modal.vue";
|
import Modal from "./Modal.vue";
|
||||||
import Embla from "./Embla.vue";
|
import Embla from "./Embla.vue";
|
||||||
|
import Umgebung from "./Umgebung.vue";
|
||||||
|
import Footer from "./Footer.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Navbar,
|
Navbar,
|
||||||
Modal,
|
Modal,
|
||||||
Embla
|
Embla,
|
||||||
|
Umgebung,
|
||||||
|
Footer
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
events() {
|
events() {
|
||||||
@@ -371,73 +376,8 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="header14 cid-u6k7q0zosO mbr-parallax-background" id="call-to-action-9-u6k7q0zosO">
|
<Umgebung/>
|
||||||
<div class="container">
|
<Footer/>
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="card col-12 col-md-12 col-lg-10">
|
|
||||||
<div class="card-wrapper">
|
|
||||||
<div class="card-box align-center">
|
|
||||||
<h1 class="card-title mbr-fonts-style mb-4 display-1">
|
|
||||||
<strong>Entdecke die Umgebung</strong>
|
|
||||||
</h1>
|
|
||||||
<p class="mbr-text mbr-fonts-style mb-4 display-7">
|
|
||||||
Hier findest du nützliche Links aus der Umgebung
|
|
||||||
</p>
|
|
||||||
<section class="umgebung">
|
|
||||||
<div>
|
|
||||||
<ul>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://alt-blender.de" target="_blank">alt-blender.de - Historische Fotos und
|
|
||||||
Dokumente aus
|
|
||||||
Blender und umzu</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.verden.de/" target="_blank">Verden/Aller</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.langwedel.de/" target="_blank">Flecken Langwedel</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.feuerwehr-blender.de/" target="_blank">Freiwillige Feuerwehr
|
|
||||||
Blender</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.browiede.de/" target="_blank">Landgasthaus Browiede</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.mittelweserverband.de/" target="_blank">Mittelweserverband</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="http://angelverein-doerverden.de/" target="_blank">Angelverein Dörverden</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.theater-holtum.de/" target="_blank">Theatergruppe des gemischten
|
|
||||||
Chores "Polyhymnia"
|
|
||||||
Holtum Marsch</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.thedinghausen.de/" target="_blank">Samtgemeinde Thedinghausen</a>
|
|
||||||
</li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.tsv-blender.de/">TSV Blender</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://tsvintschede.de-zign.de/">TSV "Weserstrand" Intschede</a></li>
|
|
||||||
</b>
|
|
||||||
<b>
|
|
||||||
<li><a href="https://www.intscheder-bauernhofeis.de/">Intscheder Bauernhofeis</a></li>
|
|
||||||
</b>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
82
src/Umgebung.vue
Normal file
82
src/Umgebung.vue
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<script>
|
||||||
|
import Jarallax from './Jarallax.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Jarallax,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Jarallax>
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="card col-12 col-md-12 col-lg-10">
|
||||||
|
<div class="card-wrapper">
|
||||||
|
<div class="card-box align-center">
|
||||||
|
<h1 class="card-title mbr-fonts-style mb-4 display-1">
|
||||||
|
<strong style="color: black;">Entdecke die Umgebung</strong>
|
||||||
|
</h1>
|
||||||
|
<p class="mbr-text mbr-fonts-style mb-4 display-7">
|
||||||
|
Hier findest du nützliche Links aus der Umgebung
|
||||||
|
</p>
|
||||||
|
<section class="umgebung">
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://alt-blender.de" target="_blank">alt-blender.de - Historische Fotos und
|
||||||
|
Dokumente aus
|
||||||
|
Blender und umzu</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.verden.de/" target="_blank">Verden/Aller</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.langwedel.de/" target="_blank">Flecken Langwedel</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.feuerwehr-blender.de/" target="_blank">Freiwillige Feuerwehr
|
||||||
|
Blender</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.browiede.de/" target="_blank">Landgasthaus Browiede</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.mittelweserverband.de/" target="_blank">Mittelweserverband</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="http://angelverein-doerverden.de/" target="_blank">Angelverein Dörverden</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.theater-holtum.de/" target="_blank">Theatergruppe des gemischten
|
||||||
|
Chores "Polyhymnia"
|
||||||
|
Holtum Marsch</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.thedinghausen.de/" target="_blank">Samtgemeinde Thedinghausen</a>
|
||||||
|
</li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.tsv-blender.de/">TSV Blender</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://tsvintschede.de-zign.de/">TSV "Weserstrand" Intschede</a></li>
|
||||||
|
</b>
|
||||||
|
<b>
|
||||||
|
<li><a href="https://www.intscheder-bauernhofeis.de/">Intscheder Bauernhofeis</a></li>
|
||||||
|
</b>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Jarallax>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1041,7 +1041,7 @@
|
|||||||
.cid-u6k7q0zosO {
|
.cid-u6k7q0zosO {
|
||||||
padding-top: 5rem;
|
padding-top: 5rem;
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
background-image: url("../images/photo-1528826542659-27db5adea13c.jpeg")
|
/* background-image: url("../images/photo-1528826542659-27db5adea13c.jpeg") */
|
||||||
}
|
}
|
||||||
|
|
||||||
.cid-u6k7q0zosO .mbr-fallback-image.disabled {
|
.cid-u6k7q0zosO .mbr-fallback-image.disabled {
|
||||||
|
|||||||
Reference in New Issue
Block a user