Parallax repariert, Footer hinzugefügt
This commit is contained in:
R40fendt
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