<header class="gradient-header">
    <div class="gradient-header__body">
        <h3 class="gradient-header__type">INNOQ Story</h3>
        <h3 class="gradient-header__author">Mika Majoran</h3>
        <h1 class="gradient-header__title">Ich bin eine Headline</h1>
        <img class="gradient-header__img" src="../../assets/bg-images/edition-02/edition02-canyon-01.jpg" alt="Bild mit Umrandung" />
    </div>
</header>

<main role="main" class="story-page">
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>
                Mein beruflicher Werdegang gleicht einer Serpentine – erst bei INNOQ habe ich verstanden, dass das ein
                Vorteil sein kann.
            </p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <info-note class="info-note">
        <div class="info-note__content">
            <h3 class="info-note__title">Mika Majoran</h3>
            <p class="info-note__text"><span class="info-note__highlight">Bei INNOQ seit</span> 2018.</p>
            <p class="info-note__text">
                <span class="info-note__highlight">Tätig als</span> Product Owner in der Produktentwicklung.
            </p>
            <p class="info-note__text">
                Bei INNOQ seit 2018. Mika wohnt mit seiner Lebensgefährtin und Hündin Luna in der Nähe von Hamburg. Er
                arbeitet vor allem von Zuhause, gelegentlich auch im Hamburger Büro.
            </p>
        </div>
    </info-note>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>Ich möchte mich nicht nur fachlich, sondern auch als Mensch weiterentwickeln.</p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <figure>
        <img src="../../assets/bg-images/edition-02/edition02-canyon-01.jpg" alt="Bild Groß" />
    </figure>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <section class="two-column-image-divider-asymmetric">
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch">
            <img src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--hoch">
            <img src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <h3>Ich bin eine Headline</h3>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <section class="two-column-image-divider-asymmetric">
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer">
            <img src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer">
            <img src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <figure>
        <img src="../../assets/bg-images/edition-02/edition02-canyon-01.jpg" alt="Bild Groß" />
    </figure>

    <h3>Ich bin eine Headline</h3>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <span class="zigzag"></span>
</main>

<section class="stripe stripe--gray">
    <div class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Stories</h2>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <div class="container-md text-align-center">
            <a class="link-teaser" href="#">Mehr INNOQ Stories lesen</a>
        </div>
    </div>
</section>
<header class="gradient-header">
    <div class="gradient-header__body">
        <h3 class="gradient-header__type">INNOQ Story</h3>
        <h3 class="gradient-header__author">Mika Majoran</h3>
        <h1 class="gradient-header__title">{{headline}}</h1>
        <img
            class="gradient-header__img"
            src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}"
            alt="Bild mit Umrandung"
        />
    </div>
</header>

<main role="main" class="story-page">
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>
                Mein beruflicher Werdegang gleicht einer Serpentine – erst bei INNOQ habe ich verstanden, dass das ein
                Vorteil sein kann.
            </p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <info-note class="info-note">
        <div class="info-note__content">
            <h3 class="info-note__title">Mika Majoran</h3>
            <p class="info-note__text"><span class="info-note__highlight">Bei INNOQ seit</span> 2018.</p>
            <p class="info-note__text">
                <span class="info-note__highlight">Tätig als</span> Product Owner in der Produktentwicklung.
            </p>
            <p class="info-note__text">
                Bei INNOQ seit 2018. Mika wohnt mit seiner Lebensgefährtin und Hündin Luna in der Nähe von Hamburg. Er
                arbeitet vor allem von Zuhause, gelegentlich auch im Hamburger Büro.
            </p>
        </div>
    </info-note>

    <p>{{text}}</p>
    <p>{{text}}</p>
    <p>{{text}}</p>

    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>Ich möchte mich nicht nur fachlich, sondern auch als Mensch weiterentwickeln.</p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <figure>
        <img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
    </figure>

    <p>{{text}}</p>

    <section class="two-column-image-divider-asymmetric">
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch">
            <img src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--hoch">
            <img src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <h3>{{headline}}</h3>
    <p>{{text}}</p>

    <section class="two-column-image-divider-asymmetric">
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer">
            <img src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
        <figure class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer">
            <img src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <p>{{text}}</p>

    <figure>
        <img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
    </figure>

    <h3>{{headline}}</h3>
    <p>{{text}}</p>
    <p>{{text}}</p>

    <span class="zigzag"></span>
</main>

<section class="stripe stripe--gray">
    <div class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Stories</h2>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <div class="container-md text-align-center">
            <a class="link-teaser" href="#">Mehr INNOQ Stories lesen</a>
        </div>
    </div>
</section>
{
  "text": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
  "headline": "Ich bin eine Headline"
}
  • Content:
    .story-page {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 $spacer-sm $spacer-base $spacer-sm;
    
      > * {
        margin-bottom: 0;
      }
    
      > * + * {
        margin-top: $spacer-base;
      }
    
      super-quote,
      long-quote {
        @extend %container-vertical-spacing-lg;
    
        max-width: 45rem;
        justify-self: center;
      }
    
      figure {
        @extend %container-vertical-spacing-lg;
    
        img {
          @extend %box-shadow-primary-25-right-bottom;
        }
      }
    
      .zigzag {
        width: 40%;
        margin: $spacer-xl auto 0 auto;
      }
    }
    
    @supports (display: grid) {
      @media screen and (min-width: $grid-breakpoint-xl) {
        .story-page {
          display: grid;
          padding-bottom: $spacer-xxl;
          grid-template-columns: 1fr 11rem 5rem 2rem 50rem 2rem 5rem 11rem 1fr; //magic numbers
          grid-template-rows: auto;
    
          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          p,
          ul,
          ol,
          table,
          super-quote,
          long-quote,
          .zigzag {
            grid-column: 5 / 6;
          }
    
          .info-note {
            align-self: start;
            grid-column: 7 / 9;
            grid-row: 2/ 100;
          }
    
          figure,
          .two-column-image-divider-asymmetric {
            grid-column: 3/ 8;
          }
        }
      }
    }
    
  • URL: /components/raw/story-page/_story-page.scss
  • Filesystem Path: components/01-pages/story-page/_story-page.scss
  • Size: 1.3 KB

No notes defined.