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

<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 text-body">
      <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>
      <a
        href="https://www.dropbox.com/s/eoygp44p801ddbt/OpenVisor_Ein_Orden_fuer_eine_gute_Tat.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
      >
        <div class="button">
          <span class="ein-orden-fr-eine-gute-tat-anmeldung">
            <span>PDF Download</span>
            <br />
          </span>
        </div>
      </a>
      <img
        alt="image"
        src="/playground_assets/einordenfuereinegutetat-1100w.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 - OpenVisor',
    meta: [
      {
        property: 'og:title',
        content: 'Ein-Orden-fr-eine-gute-Tat - OpenVisor',
      },
    ],
  },
}
</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;
  text-align: center;
  font-family: Poppins;
  font-weight: 500;
  margin-bottom: 12px;
}
.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-anmeldung {
  color: rgb(12, 16, 12);
  font-size: 16px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.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;
    margin-bottom: 6px;
  }
  .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%;
  }
}
</style>