<main role="main">
    <header class="standard-header" style="
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)),
        url(../../assets/visual-header-medusa.jpg);
    ">
        <h1 class="standard-header__title">Unser Schulungsangebot</h1>
        <h2 class="standard-header__subtitle">
            Weil wir Wissen gerne mit Ihnen teilen
        </h2>
        <div class="standard-header__intro">
            <div class="standard-header__intro__text">
                Sich auf das Wissen von Beratern und externen Dienstleistern zu
                verlassen ist das Eine, das Wissen im eigenen Haus zu vertiefen, um die
                Leistung Dritter beurteilen zu können das Andere. INNOQ unterstützt Sie
                natürlich auch beim „Anderen“, sodass Sie nicht immer auf unsere
                Projektbegleitung angewiesen sind.
            </div>
        </div>
    </header>
    <article class="page-layout--grid">
        <section class="center">
            <p>
                Wir bieten Schulungen zu bewährten und aktuellen Themen an. Dabei achten
                wir immer darauf, dass die Inhalte einen hohen Praxisbezug haben und
                wenden einprägsame Methoden an.
            </p>
            <p>
                Darüber hinaus können Ihre Mitarbeiter bei uns Ausbildungen zum iSAQB
                Certified Professional for Software Architecture (CPSA) – Foundation
                Level besuchen und sich anschließend zertifizieren lassen.
            </p>
        </section>
    </article>
    <article class="stripe stripe--primary">
        <section class="page-layout-md--default">
            <h3 class="section-heading--primary">
                Unser Schulungsangebot im Überblick
            </h3>
            <a class="list-teaser-training primary">
                <div class="list-teaser__body">
                    <h2 class="list-teaser-training__headline">Titel</h2>
                    <div class="list-teaser-training__caption">Untertitel</div>
                    <div class="label-big badge badge--inverted">Labeltext</div>
                </div>
                <div class="list-teaser__footer">
                    <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
                </div>
            </a><a class="list-teaser-training secondary">
                <div class="list-teaser__body">
                    <h2 class="list-teaser-training__headline">Titel</h2>
                    <div class="list-teaser-training__caption">Untertitel</div>
                    <div class="label-big badge">Labeltext</div>
                </div>
                <div class="list-teaser__footer">
                    <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
                </div>
            </a>
            <div class="blocks">
                <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                <div class="label-big badge">Interaktiv!</div>
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a><a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm"></div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="blocks">
                <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm"></div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a><a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm"></div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a>
            </div>
        </section>
    </article>
    <article class="page-layout--grid">
        <section class="center">
            <h3 class="section-heading--primary">
                Unser Schulungsangebot im Überblick
            </h3>
            <div class="blocks">
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
            </div>
            <div class="blocks">
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
            </div>
            <div class="blocks">
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
            </div>
            <div class="blocks">
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </article>
    <section class="breakout">
        <div class="case-teaser case-teaser--simple visual-trainings-03-bg-image">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div>
                        <div class="case-teaser__caption">Individuelle Schulungen</div>
                        <div>
                            <div class="case-teaser__header">
                                <h2>Auf Ihr Bedürfnis angepasst</h2>
                            </div>
                            <div class="case-teaser__text">
                                Ich erhalte Informationen dazu, das ich die Schulungsinhalte
                                individualisieren kann, den Umfang individualisieren kann, etc.
                                Ich erhalte Informationen dazu, das ich die Schulungsinhalte
                                individualisieren kann, den Umfang individualisieren kann, etc.
                                Ich erhalte Informationen dazu, das ich die Schulungsinhalte
                                individualisieren kann, den Umfang individualisieren kann, etc.
                            </div>
                            <div class="case-teaser__footer">
                                <a href="#" class="btn btn--small btn--cta" data-label="Schulung anfragen">Schulung anfragen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
import { cssBackground } from './components/02-molecules/visual-elements/header/standard-header/config'

<main role="main">
  <header class="standard-header" style={cssBackground}>
      <h1 class="standard-header__title">Unser Schulungsangebot</h1>
      <h2 class="standard-header__subtitle">Weil wir Wissen gerne mit Ihnen teilen</h2>
      <div class="standard-header__intro">
          <div class="standard-header__intro__text">
            Sich auf das Wissen von Beratern und externen Dienstleistern zu verlassen ist das Eine, das Wissen im eigenen Haus zu vertiefen, um die Leistung Dritter beurteilen zu können das Andere. INNOQ unterstützt Sie natürlich auch beim „Anderen“,
            sodass Sie nicht immer auf unsere Projektbegleitung angewiesen sind.
          </div>
      </div>
  </header>


    <article class="page-layout--grid">
        <section class="center">
            <p>Wir bieten Schulungen zu bewährten und aktuellen Themen an. Dabei achten wir immer darauf, dass die Inhalte einen hohen Praxisbezug haben und wenden einprägsame Methoden an.</p>
            <p>Darüber hinaus können Ihre Mitarbeiter bei uns Ausbildungen zum iSAQB Certified Professional for Software Architecture (CPSA) – Foundation Level besuchen und sich anschließend zertifizieren lassen.</p>
        </section>
    </article>
    <article class="stripe stripe--primary">
        <section class="page-layout-md--default">
            <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
            <a class=" list-teaser-training primary">
                <div class="list-teaser__body">
                    <h2 class="list-teaser-training__headline">Titel</h2>
                    <div class="list-teaser-training__caption">Untertitel</div>
                    <div class="label-big badge badge--inverted">Labeltext</div>
                </div>
                <div class="list-teaser__footer">
                    <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
                </div>
            </a>

            <a class="list-teaser-training secondary">
                <div class="list-teaser__body">
                    <h2 class="list-teaser-training__headline">Titel</h2>
                    <div class="list-teaser-training__caption">Untertitel</div>
                    <div class="label-big badge">Labeltext</div>
                </div>
                <div class="list-teaser__footer">
                    <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
                </div>
            </a>
            <div class="blocks">
                  <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                      <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                          <div class="case-tile-teaser__body">
                              <h2 class="case-tile-teaser__caption">Training Caption</h2>
                              <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                  Training Headline
                              </h2>
                              <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                              <div class="label-big badge">
                                  Interaktiv!
                              </div>
                              </div>
                          </div>
                          <div class="case-tile-teaser__goto">
                              <span class="link-teaser">Termine &amp; Details</span>
                          </div>
                      </div>
                  </a>
                  <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                      <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                          <div class="case-tile-teaser__body">
                              <h2 class="case-tile-teaser__caption">Training Caption</h2>
                              <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                  Training Headline
                              </h2>
                              <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                              </div>
                          </div>
                          <div class="case-tile-teaser__goto">
                              <span class="link-teaser">Termine &amp; Details</span>
                          </div>
                      </div>
                  </a>
              </div>


            <div class="blocks">
              <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                  <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                      <div class="case-tile-teaser__body">
                          <h2 class="case-tile-teaser__caption">Training Caption</h2>
                          <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                              Training Headline
                          </h2>
                          <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                          </div>
                      </div>
                      <div class="case-tile-teaser__goto">
                          <span class="link-teaser">Termine &amp; Details</span>
                      </div>
                  </div>
              </a>
              <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-training case-tile-teaser--sm">
                  <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                      <div class="case-tile-teaser__body">
                          <h2 class="case-tile-teaser__caption">Training Caption</h2>
                          <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                              Training Headline
                          </h2>
                          <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                          </div>
                      </div>
                      <div class="case-tile-teaser__goto">
                          <span class="link-teaser">Termine &amp; Details</span>
                      </div>
                  </div>
              </a>
            </div>
        </section>
    </article>
    <article class="page-layout--grid">
        <section class="center">
          <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
            <div class="blocks">
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
            </div>

            <div class="blocks">
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
            </div>

            <div class="blocks">
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
            </div>

            <div class="blocks">
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
              <div class="simple-teaser">
                  <div class="simple-teaser__body">
                      <a class="simple-teaser__link">
                          <h5>Inhouse Schulung Titel</h5>
                          <h6>Das ist ein Untertitel</h6>
                      </a>
                  </div>
                  <div class="simple-teaser__footer">
                      <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                          Jetzt anfragen!
                      </button>
                  </div>
              </div>
            </div>
        </section>
    </article>
    <section class="breakout">
      <div class="case-teaser case-teaser--simple visual-trainings-03-bg-image">
          <div class="case-teaser__wrapper">
              <div class="case-teaser__body">
                  <div>
                      <div class="case-teaser__caption">Individuelle Schulungen</div>
                      <div>
                          <div class="case-teaser__header">
                              <h2>Auf Ihr Bedürfnis angepasst</h2>
                          </div>
                          <div class="case-teaser__text">
                            Ich erhalte Informationen dazu, das ich die Schulungsinhalte individualisieren kann, den Umfang
                            individualisieren kann, etc. Ich erhalte Informationen dazu, das ich die Schulungsinhalte individualisieren
                            kann, den Umfang individualisieren kann, etc. Ich erhalte Informationen dazu, das ich die Schulungsinhalte
                            individualisieren kann, den Umfang individualisieren kann, etc.
                          </div>
                          <div class="case-teaser__footer">
                              <a href="#" class="btn btn--small btn--cta" data-label="Schulung anfragen">Schulung anfragen</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

    </section>
</main>
/* No context defined. */
  • Content:
    .visual-trainings-01-bg-image {
      background-image: linear-gradient($gradient-stencil, $gradient-stencil), asset-url('visual-trainings-01.jpg');
    }
    
    .visual-trainings-02-bg-image {
      background-image: linear-gradient($gradient-stencil, $gradient-stencil), asset-url('visual-trainings-02.jpg');
    }
    
    .visual-trainings-03-bg-image {
      background-image: asset-url('visual-trainings-03.jpg');
    }
    
    .visual-trainings-04-bg-image {
      background-image: linear-gradient($gradient-stencil, $gradient-stencil), asset-url('visual-trainings-04.jpg');
    }
    
    .visual-trainings-05-bg-image {
      background-image: linear-gradient($gradient-stencil, $gradient-stencil), asset-url('visual-trainings-05.jpg');
    }
    
    .visual-trainings-06-bg-image {
      background-image: linear-gradient($gradient-stencil, $gradient-stencil), asset-url('visual-trainings-06.jpg');
    }
    
  • URL: /components/raw/trainings-overview-page/_trainings-overview-page.scss
  • Filesystem Path: components/04-pages/training-pages/trainings-overview-page/_trainings-overview-page.scss
  • Size: 832 Bytes
  • Handle: @trainings-overview-page
  • Preview:
  • Filesystem Path: components/04-pages/training-pages/trainings-overview-page/trainings-overview-page.html

No notes defined.