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 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: 'OpenVisor - Ein Orden für eine gute Tat',
    meta: [
      {
        name: 'description',
        content:
          'Ein brauner Schneehase besucht zwei Hörnchen im vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine gute Tat vergeben möchte.',
      },
      {
        property: 'og:title',
        content: 'OpenVisor - Ein Orden für eine gute Tat',
      },
      {
        property: 'og:description',
        content:
          'brauner Schneehase besucht zwei Hö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?',
      },
    ],
  },
}
</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>