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",
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-vue": "^8.6.0",
|
||||
"jarallax": "^2.2.1",
|
||||
"jquery": "^3.7.1",
|
||||
"moment": "^2.30.1",
|
||||
"striptags": "^3.2.0",
|
||||
@@ -1408,6 +1409,15 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||
@@ -2031,6 +2041,12 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "6.2.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-vue": "^8.6.0",
|
||||
"jarallax": "^2.2.1",
|
||||
"jquery": "^3.7.1",
|
||||
"moment": "^2.30.1",
|
||||
"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 Modal from "./Modal.vue";
|
||||
import Embla from "./Embla.vue";
|
||||
import Umgebung from "./Umgebung.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navbar,
|
||||
Modal,
|
||||
Embla
|
||||
Embla,
|
||||
Umgebung,
|
||||
Footer
|
||||
},
|
||||
computed: {
|
||||
events() {
|
||||
@@ -371,73 +376,8 @@ export default {
|
||||
|
||||
|
||||
|
||||
<section class="header14 cid-u6k7q0zosO mbr-parallax-background" id="call-to-action-9-u6k7q0zosO">
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<Umgebung/>
|
||||
<Footer/>
|
||||
</section>
|
||||
|
||||
</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 {
|
||||
padding-top: 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 {
|
||||
|
||||
Reference in New Issue
Block a user