Ordnerstruktur verbessert
This commit is contained in:
R40fendt
60
src/components/Embla.vue
Normal file
60
src/components/Embla.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import emblaCarouselVue from "embla-carousel-vue";
|
||||
import RitzenbergenLib from "../ritzenbergenlib.ts";
|
||||
import { onMounted, ref } from "vue";
|
||||
import EmblaItem from "./EmblaItem.vue";
|
||||
|
||||
const emblaApi = ref();
|
||||
|
||||
const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true });
|
||||
|
||||
let timeout=false;
|
||||
|
||||
onMounted(() => {
|
||||
emblaApi.value = emblaInstance.value;
|
||||
setInterval(()=>{
|
||||
if(!timeout) emblaApi.value?.scrollNext();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const prev = () => {
|
||||
emblaApi.value?.scrollPrev();
|
||||
addTimeout();
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
emblaApi.value?.scrollNext();
|
||||
addTimeout();
|
||||
};
|
||||
function addTimeout(){
|
||||
timeout=true;
|
||||
setTimeout(()=>{
|
||||
timeout=false;
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
defineProps({
|
||||
src: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="embla" ref="emblaRef">
|
||||
<div class="embla__container">
|
||||
<EmblaItem v-for="el in src" :src="el" />
|
||||
</div>
|
||||
<button class="embla__button embla__button--prev" @click="prev">
|
||||
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
|
||||
<span class="sr-only visually-hidden visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="embla__button embla__button--next" @click="next">
|
||||
<span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
|
||||
<span class="sr-only visually-hidden visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
26
src/components/EmblaItem.vue
Normal file
26
src/components/EmblaItem.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: ["src"],
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="embla__slide slider-image item"
|
||||
style="margin-left: 1rem; margin-right: 1rem"
|
||||
>
|
||||
<div class="slide-content">
|
||||
<div class="item-img">
|
||||
<div class="item-wrapper">
|
||||
<a href="galerie.php#erntefest">
|
||||
<img
|
||||
:src="
|
||||
src
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style></style>
|
||||
80
src/components/Footer.vue
Normal file
80
src/components/Footer.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script>
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
aboutVisible: false,
|
||||
contactVisible: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
};
|
||||
</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">
|
||||
<Modal v-show="aboutVisible" @closemodal="aboutVisible = false">
|
||||
<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 />
|
||||
</Modal>
|
||||
|
||||
<button @click="aboutVisible=true" class="text-white btn-ueber openBtn">Über</button>
|
||||
</li>
|
||||
<li class="header-menu-item mbr-fonts-style display-5">
|
||||
<Modal
|
||||
v-show="contactVisible"
|
||||
@closemodal="contactVisible = false"
|
||||
>
|
||||
<h1>Kontakt</h1>
|
||||
<p>
|
||||
Tom Kuhlenkamp <br />
|
||||
tom@ritzenbergen.de
|
||||
</p>
|
||||
<br /><br />
|
||||
</Modal>
|
||||
<button
|
||||
class="text-white btn-kontakt openBtn"
|
||||
@click="contactVisible = true"
|
||||
>
|
||||
Kontakt
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<p class="mbr-fonts-style copyright display-7">
|
||||
© 2025 Ritzenbergen. Alle Rechte vorbehalten. <br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style></style>
|
||||
19
src/components/Modal.vue
Normal file
19
src/components/Modal.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
emits: ['closemodal'],
|
||||
props: ["content"]
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<button class="closeBtn" @click="$emit('closemodal')">x</button>
|
||||
<slot></slot>
|
||||
<span v-html="content"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
@import "../assets/modal";
|
||||
|
||||
</style>
|
||||
102
src/components/Navbar.vue
Normal file
102
src/components/Navbar.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
export default {};
|
||||
</script>
|
||||
<template>
|
||||
<section class="menu menu2 cid-u6k7q0wPq6" once="menu" id="menu-5-u6k7q0wPq6">
|
||||
<nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<span class="navbar-logo">
|
||||
<a href="/">
|
||||
<img
|
||||
class="navbar-logo-img"
|
||||
src="../assets/RitzenbergenOrtsschild.png"
|
||||
style="height: 60px; padding-left: 5px"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span class="navbar-caption-wrap">
|
||||
<a
|
||||
class="navbar-caption text-black display-4"
|
||||
href="http://ritzenbergen.de"
|
||||
>Amedorf & Ritzenbergen</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-bs-toggle="collapse"
|
||||
data-target="#navbarSupportedContent"
|
||||
data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarNavAltMarkup"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
|
||||
<!--<li class="nav-item">
|
||||
<a class="nav-link link text-black display-4" href="#news-1-u6k7q0xyDG">Termine</a>
|
||||
</li>-->
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link link text-black display-4"
|
||||
href="galerie.php"
|
||||
aria-expanded="false"
|
||||
>Galerie</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link link text-black display-4"
|
||||
href="#call-to-action-9-u6k7q0zosO"
|
||||
>Umgebung</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link link text-black display-4"
|
||||
href="#footer-6-u6k7q0Blvk"
|
||||
>Kontakt</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link link text-black display-4" href="bulitipp.php"
|
||||
>BuLi-Tipp</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-buttons mbr-section-btn">
|
||||
<a class="btn btn-primary display-4" href="#about-us-12-u6k7q0yKNv"
|
||||
>Über Ritzenbergen</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.container{
|
||||
font-family: 'Inter Tight';
|
||||
}
|
||||
|
||||
.btn-primary{
|
||||
font-weight: 600;
|
||||
}
|
||||
.link{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
</style>
|
||||
90
src/components/startseite/Bilderbuch.vue
Normal file
90
src/components/startseite/Bilderbuch.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<script lang="ts">
|
||||
import RitzenbergenLib from "../../ritzenbergenlib.ts";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
RitzenbergenLib
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section class="gallery09 cid-u6k7q0xbqP" id="gallery-9-u6k7q0xbqP">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-12 col-lg-4 main-text">
|
||||
<div class="">
|
||||
<h5 class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2">
|
||||
<strong>Bilderbuch Ritzenbergen</strong>
|
||||
</h5>
|
||||
<h6
|
||||
class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7"
|
||||
>
|
||||
Klicke auf ein Bild um in unsere Galerie zu gelangen. Die Bilder
|
||||
sind nach Jahreszahl und Kategorie geordnet.
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 side-features row">
|
||||
<div class="item features-image col-12 col-md-6 col-lg-6 active">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img">
|
||||
<a href="./galerie.php#doppelkopf"
|
||||
><img
|
||||
:src="
|
||||
RitzenbergenLib.api(
|
||||
'randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3'
|
||||
)
|
||||
"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item features-image col-12 col-md-6 col-lg-6 active">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img">
|
||||
<a href="./galerie.php#erntefest"
|
||||
><img
|
||||
:src="
|
||||
RitzenbergenLib.api(
|
||||
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3'
|
||||
)
|
||||
"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item features-image col-12 col-md-6 col-lg-6 active">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img">
|
||||
<a href="./galerie.php#fussballturnier"
|
||||
><img
|
||||
:src="
|
||||
RitzenbergenLib.api(
|
||||
'randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3'
|
||||
)
|
||||
"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item features-image col-12 col-md-6 col-lg-6 active">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img">
|
||||
<a href="./galerie.php#osterfeuer"
|
||||
><img
|
||||
:src="
|
||||
RitzenbergenLib.api(
|
||||
'randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3'
|
||||
)
|
||||
"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style></style>
|
||||
165
src/components/startseite/Events.vue
Normal file
165
src/components/startseite/Events.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<script lang="ts">
|
||||
import RitzenbergenLib from "../../ritzenbergenlib.ts";
|
||||
import striptags from "striptags";
|
||||
import moment, { Moment } from "moment";
|
||||
import Modal from "../Modal.vue";
|
||||
export default {
|
||||
data() {
|
||||
let openedModals: number[] = [];
|
||||
return {
|
||||
openedModals,
|
||||
modaltypes: ["text", "html"],
|
||||
RitzenbergenLib,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
events() {
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
eventname: "Eventname",
|
||||
datum: "2009-04-06",
|
||||
type: "text",
|
||||
content: "<h1>Test</h1>",
|
||||
link: undefined,
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
eventname: "Link",
|
||||
datum: "2009-04-06",
|
||||
type: "link",
|
||||
content: "<h1>Testlink</h1>",
|
||||
link: "#/test",
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
eventname: "Download-Link",
|
||||
datum: "2009-04-06",
|
||||
type: "dlink",
|
||||
content: "<h1>Testlink2</h1>",
|
||||
link: "/",
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
eventname: "Fotos endlich online!",
|
||||
datum: "2009-04-06",
|
||||
type: "fotos",
|
||||
content: "Fotos vom Erntefest 2011",
|
||||
link: "erntefest/2011",
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
eventname: "Eventname",
|
||||
datum: "2009-04-06",
|
||||
type: "html",
|
||||
content: "<h1>Test2</h1>",
|
||||
link: undefined,
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
vorschautext(content:string) {
|
||||
let stripped=striptags(content);
|
||||
let vorschaulen=30;
|
||||
if(stripped.length>vorschaulen){
|
||||
return stripped.substring(0,vorschaulen)+"...";
|
||||
}else{
|
||||
return stripped;
|
||||
}
|
||||
},
|
||||
format_date(date: string){
|
||||
let mymoment:Moment=moment();
|
||||
mymoment.set("year",parseInt(date.split("-")[0]));
|
||||
mymoment.set("month",parseInt(date.split("-")[2])-1);
|
||||
mymoment.set("day",parseInt(date.split("-")[1]));
|
||||
return mymoment.format("DD.MM.YYYY")
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-12 content-head">
|
||||
<div class="mbr-section-head">
|
||||
<h4
|
||||
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
|
||||
>
|
||||
<strong>Termine & Neuigkeiten</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- Events -->
|
||||
|
||||
<h5 class="align-center" v-if="events.length == 0">
|
||||
Es stehen keine Events an.
|
||||
</h5>
|
||||
|
||||
<div
|
||||
class="item features-image col-12 col-md-6 col-lg-3"
|
||||
:class="{ active: i % 4 == 0 }"
|
||||
v-for="(event, i) in events"
|
||||
>
|
||||
<Modal
|
||||
v-show="
|
||||
openedModals.includes(event.id) && modaltypes.includes(event.type)
|
||||
"
|
||||
@closemodal="openedModals.splice(openedModals.indexOf(event.id), 1)"
|
||||
:content="event.content"
|
||||
></Modal>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img mb-3">
|
||||
<img :src="RitzenbergenLib.get_img(event.foto)" />
|
||||
</div>
|
||||
<div class="item-content align-left">
|
||||
<h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
|
||||
<strong
|
||||
><a class="text-black fw-bold" :data-id="event.id">{{
|
||||
event.eventname
|
||||
}}</a></strong
|
||||
>
|
||||
</h6>
|
||||
<p class="mbr-text mbr-fonts-style mb-3 display-7">
|
||||
{{ format_date(event.datum) }}
|
||||
</p>
|
||||
<p class="mbr-text mbr-fonts-style mb-3 display-7">
|
||||
{{ vorschautext(event.content) }}
|
||||
</p>
|
||||
<div class="mbr-section-btn item-footer">
|
||||
<a
|
||||
:download="event.type == 'dlink' ? event.link : undefined"
|
||||
:href="event.link"
|
||||
><button
|
||||
class="btn item-btn btn-primary display-7"
|
||||
:data-id="event.id"
|
||||
@click="openedModals.push(event.id)"
|
||||
>
|
||||
<span v-if="event.type == 'link'">Einladung öffnen</span>
|
||||
<span v-else-if="event.type == 'dlink'"
|
||||
>Einladung runterladen</span
|
||||
>
|
||||
<span v-else-if="event.type == 'fotos'">Fotos ansehen</span>
|
||||
<span v-else>Mehr</span>
|
||||
</button></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style></style>
|
||||
69
src/components/startseite/Forms.vue
Normal file
69
src/components/startseite/Forms.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<section id="anmeldeformular">
|
||||
|
||||
<section class="form5 cid-u6k7q0BfGa">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 content-head">
|
||||
<div class="mbr-section-head mb-5">
|
||||
<h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
|
||||
<strong>Überschrift</strong>
|
||||
</h3><br>
|
||||
<h5 style="text-align: center;"><b></b> <br>
|
||||
Inhalt</h5><br>
|
||||
if public
|
||||
|
||||
|
||||
<div class="modal-container">
|
||||
<div class="modal">
|
||||
|
||||
<div class="modal-content">
|
||||
<span class="closeBtn" style="cursor: pointer;">x</span>
|
||||
<h1>Modal-Überschrift</h1>
|
||||
Ergebnisse
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br><br>
|
||||
</div>
|
||||
else
|
||||
<p style="text-align: center;">Minitext<br><br>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 mx-auto mbr-form" data-form-type="formoid">
|
||||
<form action="formularergebnisse-eintragen.php" method="POST" class="mbr-form form-with-styler"
|
||||
data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
|
||||
data-form-email="true" value="">
|
||||
<div class="dragArea row">
|
||||
<div class="col-md col-sm-12 form-group mb-3" data-for="name">
|
||||
<input type="text" maxlength="128" name="name" placeholder="Label1"
|
||||
data-form-field="name" class="form-control" value="" id="name-form02-0">
|
||||
</div>
|
||||
|
||||
<div class="col-12 form-group mb-3" data-for="textarea">
|
||||
<input type="text" name="textarea" maxlength="128" placeholder="Label2"
|
||||
data-form-field="textarea" class="form-control" id="textarea-form02-0">
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn">
|
||||
<button type="submit" class="btn btn-primary display-7 formular-submit-button">Absenden</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" value="<?php echo $id; ?>" name="id">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
60
src/components/startseite/Jarallax.vue
Normal file
60
src/components/startseite/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>
|
||||
|
||||
82
src/components/startseite/Umgebung.vue
Normal file
82
src/components/startseite/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>
|
||||
43
src/components/startseite/Willkommen.vue
Normal file
43
src/components/startseite/Willkommen.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<section
|
||||
class="header16 cid-u6k7q0xIhk mbr-fullscreen mbr-parallax-background"
|
||||
id="hero-17-u6k7q0xIhk"
|
||||
>
|
||||
<div
|
||||
class="mbr-overlay"
|
||||
style="opacity: 0.3; background-color: rgb(0, 0, 0)"
|
||||
></div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="content-wrap col-12 col-md-10">
|
||||
<h1
|
||||
class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
|
||||
>
|
||||
<strong>Willkommen auf ritzenbergen.de</strong>
|
||||
</h1>
|
||||
<p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
|
||||
Dies ist eine private Homepage über das Dorfleben in Amedorf und
|
||||
Ritzenbergen
|
||||
</p>
|
||||
<div class="mbr-section-btn">
|
||||
<a
|
||||
class="btn btn-white-outline display-7"
|
||||
href="#gallery-9-u6k7q0xbqP"
|
||||
>Erkunden</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
27
src/components/startseite/WillkommenText.vue
Normal file
27
src/components/startseite/WillkommenText.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 col-lg-10">
|
||||
<h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
|
||||
<strong>Willkommen in Ritzenbergen</strong>
|
||||
</h3>
|
||||
<p class="mbr-text mbr-fonts-style display-7">Ritzenbergen, ehemalig "Rikinburg" wurde nur ein einziges Mal im
|
||||
Jahr 935 in der historischen Überlieferung erwähnt. In diesem Jahr wurde sie vom Edelherren Willarius der
|
||||
Bremer Kirche geschenkt. Eine Identifikation dieser Burg mit einem auf einer Karte des Amtes Thedinghausen
|
||||
von 1765 eingetragenen Hügel von etwa 150 m Durchmesser oberhalb eines alten Weserarms in Ritzenbergen ist
|
||||
aber bisher nicht gesichert.</p>
|
||||
<p class="mbr-text mbr-fonts-style display-7">Die Gemeinde Amedorf/Ritzenbergen wurde zusammen mit der
|
||||
Gemeinde Holtum-Marsch im Jahr 1968 in die Gemeinde Blender eingegliedert.</p>
|
||||
<p class="mbr-text mbr-fonts-style display-7">In der Galerie findest du viele Fotos aus den letzten Jahren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user