<header class="standard-header" style="
    background-image: url(../../assets/bg-images/general/visual-trainings-01.jpg);
    background-color: var(--overlay-standard-color);
  ">
    <h3 class="standard-header__type">Schulung</h3>
    <h1 class="standard-header__title">Titel</h1>
    <h2 class="standard-header__subtitle">Subtitle</h2>
    <div class="standard-header__intro">
        <div class="standard-header__intro__text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin. Frankfurter
            fatback turkey pork chop prosciutto pork ground round tongue chuck doner.
            Pig venison pork chop shoulder corned beef capicola meatball.
        </div>
    </div>
</header>
<main role="main">
    <article class="page-layout--grid">
        <section class="center">
            <ul class="list-unstyled">
                <li>
                    <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                        <div class="author-bio__image avatar avatar--small">
                            <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                        </div>
                        <address class="author-bio__text">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>
                </li>
                <li>
                    <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                        <div class="author-bio__image avatar avatar--small">
                            <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                        </div>
                        <address class="author-bio__text">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>
                </li>
            </ul>
            <div class="cta-section">
                <a class="btn btn--cta btn--small" href="#" data-label="ONLINE: 20.Mai 2021">ONLINE: 20.Mai 2021</a>
                <p class="display small">1 weiterer Termin verfügbar</p>
            </div>
            <p>
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner. Pig venison pork chop shoulder corned beef capicola
                meatball.
            </p>
            <h3>Inhalte des Trainings</h3>
            <ul>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
            </ul>
            <h3>Warum Sie dieses Training nicht verpassen sollten</h3>
            <check-list>
                <ul class="checklist">
                    <li>Pastrami t-bone pork</li>
                    <li>Pastrami t-bone pork</li>
                    <li>Pastrami t-bone pork</li>
                    <li>Pastrami t-bone pork</li>
                </ul>
            </check-list>
            <h3>Methodik</h3>
            <p>
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner. Pig venison pork chop shoulder corned beef capicola
                meatball.
            </p>
            <figure>
                <img class="content__image__big" src="https://source.unsplash.com/X9fdmlGEo4Y/1600x900" alt="Bild Groß" />
                <figcaption>
                    Workshopsituation: Hier könnte man einen Bildpool erstellen. Über die
                    Jahre hat man ja einige Schulungen gehalten.
                </figcaption>
            </figure>
            <h3>Zielgruppen</h3>
            <ul>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
            </ul>
        </section>
    </article>
    <aside class="page-layout--grid">
        <section class="center">
            <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class="author-bio__head" itemprop="url" href="#">
                    <div class="author-bio__image avatar avatar--base">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address class="author">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </a>
                <address class="author-bio__social">
                    <a rel="author" class="author-bio__social-profile" href="#" title="Twitter"><span class="
                icon-svg icon-svg--small
                icon-twitter icon--brand-secondary
              "></span></a><a rel="author" class="author-bio__social-profile" href="#" title="GitHub"><span class="icon-svg icon-svg--small icon-github icon--brand-secondary"></span></a>
                </address>
                <div class="author-bio__text">
                    <p>
                        Heribert Innoq ist Senior Consultant bei INNOQ. Als Berater,
                        Entwickler und Architekt unterstützt er Kunden vor allem mit seinen
                        langjährigen Kenntnissen von Java- und JVM-basierten Systemen. Meist
                        beschäftigt er sich hier mit dem Design, der Evaluierung und
                        Implementierung von Architekturen für moderne Webanwendungen und
                        Microservices in Softwaremodernisierungsprojekten. Sein aktueller
                        Fokus gilt den Themen Team-Organisation und Softwareevolution.
                    </p>
                </div>
            </div>
        </section>
    </aside>
    <aside class="stripe stripe--gray">
        <section class="page-layout--grid">
            <div class="center">
                <h2 class="teaser-section-heading">Termine und Anmeldung</h2>
                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span></time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Training</div>
                            <h2 class="list-teaser-event__headline">
                                Design Patterns – Software pragmatisch und effizient gestalten
                            </h2>
                            <p><em>Berlin, Courtyard by Mariott</em></p>
                            <p class="display">
                                <span><strong>Trainer:</strong> Heribert Innoq</span><br /><span><strong>Preis:</strong> EUR xxx zzgl. 19% MwSt.</span>
                            </p>
                        </div>
                        <div class="list-teaser-event__footer">
                            <button class="btn btn--condensed btn--cta" data-label="Jetzt Buchen">
                                Jetzt Buchen
                            </button>
                        </div>
                    </div>
                </a><a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">10</span><span class="event-month">Jun</span></span></time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">12</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Training</div>
                            <h2 class="list-teaser-event__headline">
                                Design Patterns – Software pragmatisch und effizient gestalten
                            </h2>
                            <p><em>München, Holiday Inn Unterhaching</em></p>
                            <p class="display">
                                <span><strong>Trainer:</strong> Heribert Innoq</span><br /><span><strong>Preis:</strong> EUR xxx zzgl. 19% MwSt.</span>
                            </p>
                        </div>
                        <div class="list-teaser-event__footer">
                            <button class="btn btn--condensed btn--cta" data-label="Jetzt Buchen">
                                Jetzt Buchen
                            </button>
                        </div>
                    </div>
                </a>
                <p class="text-center">
                    <a class="btn btn--sm btn--light" href="#">Übersicht weiterer Termine</a>
                </p>
                <div class="cta-section cta-section--dark-bg">
                    <h2 class="">Kein passender Termin dabei?</h2>
                    <p class="standalone">
                        Gerne bieten wir Ihnen einen gesonderten Termin an!
                    </p>
                    <a class="btn btn--cta btn--cta--inverted" data-label="Termin anfragen" href="#">Termin anfragen</a>
                </div>
            </div>
        </section>
        <section class="breakout">
            <div class="
          case-teaser case-teaser--simple case-teaser--left-aligned
          bg-image-trainings-06
        ">
                <div class="case-teaser__wrapper">
                    <div class="case-teaser__body">
                        <div class="case-teaser__caption">Individuelle Schulungen</div>
                        <div class="case-teaser__header">
                            <h2>Auf Ihr Bedürfnis angepasst</h2>
                        </div>
                        <div class="case-teaser__text lead">
                            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>
                            <a class="btn btn--sm btn--cta" data-label="Schulung anfragen" href="#">Schulung anfragen</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </aside>
</main>
import { safe, htmlEncode } from "complate-stream";
import { cssBackground } from './components/03-organisms/header/standard-header/config'

<header class="standard-header" style={cssBackground}>
    <h3 class="standard-header__type">Schulung</h3>
    <h1 class="standard-header__title">Titel</h1>
    <h2 class="standard-header__subtitle">Subtitle</h2>
    <div class="standard-header__intro">
        <div class="standard-header__intro__text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin.
            Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
            chuck doner. Pig venison pork chop shoulder corned beef capicola
            meatball.
        </div>
    </div>
</header>
<main role="main">
    <article class="page-layout--grid">
        <section class="center">
            <ul class="list-unstyled">
                <li>
                    <a rel="author" class="author-bio author-bio--short" href="#author-bio"
                        itemscope itemtype="http://schema.org/Person">
                        <div class="author-bio__image avatar avatar--small">
                            <img itemprop="photo" class="avatar__image"
                                src={context.app.uri("assets/example-content/heribert.jpg")}
                                alt="Portrait von Heribert Innoq" />
                        </div>
                        <address class="author-bio__text">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                            <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>
                </li>
                <li>
                    <a rel="author" class="author-bio author-bio--short" href="#author-bio"
                        itemscope itemtype="http://schema.org/Person">
                        <div class="author-bio__image avatar avatar--small">
                            <img itemprop="photo" class="avatar__image"
                                src={context.app.uri("assets/example-content/heribert.jpg")}
                                alt="Portrait von Heribert Innoq" />
                        </div>
                        <address class="author-bio__text">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                            <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>
                </li>
            </ul>

            <div class="cta-section">
                <a class="btn btn--cta btn--small" href="#" data-label="ONLINE: 20.Mai 2021">ONLINE: 20.Mai 2021</a>
                <p class="display small"> 1 weiterer Termin verfügbar</p>
            </div>

            <p>
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner. Pig venison pork chop shoulder corned beef capicola
                meatball.
            </p>

            <h3>Inhalte des Trainings</h3>

            <ul>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
            </ul>

            <h3>Warum Sie dieses Training nicht verpassen sollten</h3>

            <check-list>
                <ul class="checklist">
                    <li>Pastrami t-bone pork</li>
                    <li>Pastrami t-bone pork</li>
                    <li>Pastrami t-bone pork</li>
                    <li>Pastrami t-bone pork</li>
                </ul>
            </check-list>

            <h3>Methodik</h3>

            <p>
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner. Pig venison pork chop shoulder corned beef capicola
                meatball.
            </p>

            <figure>
                <img class="content__image__big" src="https://source.unsplash.com/X9fdmlGEo4Y/1600x900" alt="Bild Groß" />
                <figcaption>
                    Workshopsituation: Hier könnte man einen Bildpool erstellen. Über die Jahre hat man ja einige Schulungen gehalten.
                </figcaption>
            </figure>

            <h3>Zielgruppen</h3>
            <ul>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
                <li>Pastrami t-bone pork</li>
            </ul>
        </section>
    </article>

    <aside class="page-layout--grid">
        <section class="center">
            <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                    <div class="author-bio__image avatar avatar--base">
                        <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
                    </div>
                    <address class="author">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </a>

                <address class="author-bio__social">
                    <a rel="author" class="author-bio__social-profile" href="#" title="Twitter">
                        <span class="icon-svg icon-svg--small icon-twitter icon--brand-secondary"></span>
                    </a>
                    <a rel= "author" class="author-bio__social-profile" href="#" title="GitHub">
                        <span class="icon-svg icon-svg--small icon-github icon--brand-secondary"></span>
                    </a>
                </address>
                <div class="author-bio__text">
                    <p>Heribert Innoq ist Senior Consultant bei INNOQ.
                        Als Berater, Entwickler und Architekt unterstützt er Kunden vor allem mit seinen langjährigen Kenntnissen von Java- und JVM-basierten Systemen.
                        Meist beschäftigt er sich hier mit dem Design, der Evaluierung und Implementierung von Architekturen für moderne Webanwendungen und Microservices
                        in Softwaremodernisierungsprojekten. Sein aktueller Fokus gilt den Themen Team-Organisation und Softwareevolution.
                    </p>
                </div>
            </div>
        </section>
    </aside>

    <aside class="stripe stripe--gray">
        <section class="page-layout--grid">
            <div class="center">
                <h2 class="teaser-section-heading">Termine und Anmeldung</h2>

                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23">
                                <span class="event-day-month">
                                    <span class="event-day">23</span>
                                    <span class="event-month">Jun</span>
                                </span>
                            </time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24">
                                <span class="event-day-month">
                                    <span class="event-day">24</span>
                                    <span class="event-month">Jun</span>
                                </span>
                                <span class="event-year">2017</span>
                            </time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Training</div>
                            <h2 class="list-teaser-event__headline">Design Patterns – Software pragmatisch und effizient gestalten</h2>
                            <p><em>Berlin, Courtyard by Mariott</em></p>
                            <p class="display">
                                <span><strong>Trainer:</strong> Heribert Innoq</span>
                                <br />
                                <span><strong>Preis:</strong> EUR xxx zzgl. 19% MwSt.</span>
                            </p>
                        </div>
                        <div class="list-teaser-event__footer">
                            <button class="btn btn--condensed btn--cta" data-label="Jetzt Buchen">Jetzt Buchen</button>
                        </div>
                    </div>
                </a>

                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23">
                                <span class="event-day-month">
                                    <span class="event-day">10</span>
                                    <span class="event-month">Jun</span>
                                </span>
                            </time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24">
                                <span class="event-day-month">
                                    <span class="event-day">12</span>
                                    <span class="event-month">Jun</span>
                                </span>
                                <span class="event-year">2017</span>
                            </time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Training</div>
                            <h2 class="list-teaser-event__headline">Design Patterns – Software pragmatisch und effizient gestalten</h2>
                            <p><em>München, Holiday Inn Unterhaching</em></p>
                                <p class="display">
                                <span><strong>Trainer:</strong> Heribert Innoq</span>
                                <br />
                                <span><strong>Preis:</strong> EUR xxx zzgl. 19% MwSt.</span>
                            </p>
                        </div>
                        <div class="list-teaser-event__footer">
                            <button class="btn btn--condensed btn--cta" data-label="Jetzt Buchen">Jetzt Buchen</button>
                        </div>
                    </div>
                </a>

                <p class="text-center">
                    <a class="btn btn--sm btn--light" href="#">Übersicht weiterer Termine</a>
                </p>

                <div class="cta-section cta-section--dark-bg">
                    <h2 class="">Kein passender Termin dabei?</h2>
                    <p class="standalone">Gerne bieten wir Ihnen einen gesonderten Termin an!</p>
                    <a class="btn btn--cta btn--cta--inverted" data-label="Termin anfragen" href="#">Termin anfragen</a>
                </div>
            </div>
        </section>
        <section class="breakout">
            <div class="case-teaser case-teaser--simple case-teaser--left-aligned bg-image-trainings-06">
                <div class="case-teaser__wrapper">
                    <div class="case-teaser__body">
                        <div class="case-teaser__caption">Individuelle Schulungen</div>
                        <div class="case-teaser__header">
                            <h2>Auf Ihr Bedürfnis angepasst</h2>
                        </div>
                        <div class="case-teaser__text lead">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><a class="btn btn--sm btn--cta" data-label="Schulung anfragen" href="#">Schulung anfragen</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </aside>
</main>
/* No context defined. */
  • Handle: @training-detail-page
  • Preview:
  • Filesystem Path: components/01-pages/training-pages/training-detail-page/training-detail-page.html

No notes defined.