OpenVisor-Website/src/views/ein-orden-fr-eine-gute-tat.vue

150 lines
3.9 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="ein-orden-fr-eine-gute-tat-container">
<app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="ein-orden-fr-eine-gute-tat-heading site-title">
<span>Ein Orden für eine gute Tat</span>
<br />
</h1>
<span class="ein-orden-fr-eine-gute-tat-caption">
<span>Eine moralische Kurzgeschichte für Kinder</span>
<br />
</span>
<div class="ein-orden-fr-eine-gute-tat-beschreibung round-borders">
<span class="ein-orden-fr-eine-gute-tat-text04">
<span class="ein-orden-fr-eine-gute-tat-text05">
Ein brauner Schneehase besucht ein ein Rothörnchen und ein Grauhörnchen
im vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine
gute Tat vergeben möchte. Doch welches Hörnchen schafft es, diesen zu
bekommen?
</span>
<br class="ein-orden-fr-eine-gute-tat-text06" />
<br class="ein-orden-fr-eine-gute-tat-text07" />
<span class="ein-orden-fr-eine-gute-tat-text08">
Diese Kurzgeschichte für Kinder und Eltern stellt spielerisch eine
moralische Frage dar, dessen Antwort das Elternteil oder das Kind selbst
finden muss. Es soll das Kind unterhalten und zugleich mit einer
einfachen aber doch spannenden Fragestellung bilden.
</span>
<br />
<br />
<span> · 28 Seiten</span>
<br />
<span> · 14 Illustrationen</span>
<br />
</span>
<img
alt="image"
src="/playground_assets/buch-vorderseite-schrift-1400w.png"
class="ein-orden-fr-eine-gute-tat-image"
/>
</div>
<app-kontakt rootClassName="kontakt-root-class-name4"></app-kontakt>
</div>
</template>
<script>
import AppNavigation from '../components/navigation'
import AppKontakt from '../components/kontakt'
export default {
name: 'EinOrdenFrEineGuteTat',
components: {
AppNavigation,
AppKontakt,
},
metaInfo: {
title: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
meta: [
{
property: 'og:title',
content: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
},
],
},
}
</script>
<style scoped>
.ein-orden-fr-eine-gute-tat-container {
width: 100%;
display: flex;
overflow: auto;
min-height: 100vh;
overflow-x: hidden;
align-items: center;
flex-direction: column;
background-size: cover;
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
}
.ein-orden-fr-eine-gute-tat-heading {
color: rgb(255, 255, 255);
font-size: 64px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
}
.ein-orden-fr-eine-gute-tat-caption {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: Poppins;
line-height: 30px;
}
.ein-orden-fr-eine-gute-tat-beschreibung {
width: 90%;
max-width: 1080px;
}
.ein-orden-fr-eine-gute-tat-text04 {
color: rgb(255, 255, 255);
}
.ein-orden-fr-eine-gute-tat-text05 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-text06 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-text07 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-text08 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-image {
width: 100%;
height: 100%;
margin-top: var(--dl-space-space-twounits);
object-fit: cover;
}
@media(max-width: 991px) {
.ein-orden-fr-eine-gute-tat-heading {
text-align: center;
}
.ein-orden-fr-eine-gute-tat-caption {
text-align: left;
}
.ein-orden-fr-eine-gute-tat-beschreibung {
width: 90%;
}
}
@media(max-width: 767px) {
.ein-orden-fr-eine-gute-tat-heading {
width: 70%;
font-size: 40px;
}
.ein-orden-fr-eine-gute-tat-caption {
color: rgb(255, 255, 255);
font-size: 16px;
font-family: Poppins;
line-height: 24px;
}
.ein-orden-fr-eine-gute-tat-text04 {
width: auto;
}
}
@media(max-width: 479px) {
.ein-orden-fr-eine-gute-tat-heading {
max-width: 70%;
text-align: center;
}
}
</style>