@zplane-web/craft-licensing

Webseite 

<div class="site">
    <header class="site__header">

        <div id="header-71416-80300" class="header">
            <div class="header__inner">
                <a class="header__logo" href="#" title="zplane">
                    <img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="header__logo-img">
                </a>

                <div class="header__contents">
                    <div class="header__icon-buttons">

                        <button class="button" type="button" title="Open menu" aria-expanded="false" aria-controls="header-71416-80300-menu" data-action="open">
                            <span class="button__icon">
                                <svg class="icon icon--bars" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#bars"></use>
                                </svg> </span>
                        </button>

                        <div class="header__icon-button">

                            <a class="button" title="Partner Area" href="#">
                                <span class="button__icon">
                                    <svg class="icon icon--lock-keyhole" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#lock-keyhole"></use>
                                    </svg> </span>
                            </a>
                        </div>
                    </div>

                    <div class="header__menu" id="header-71416-80300-menu" hidden>
                        <div class="header__menu-close">

                            <button class="button" type="button" title="Close menu" data-action="close">
                                <span class="button__icon">
                                    <svg class="icon icon--xmark" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#xmark"></use>
                                    </svg> </span>
                            </button>
                        </div>

                        <ul class="header__navigation">
                            <li class="header__navigation-item" data-floating-root>

                                <span class="header__navigation-link">

                                    <button class="link" type="button" data-link-block data-link-type="internal" aria-expanded="false" aria-haspopup="true" aria-controls="header-71416-80300-navigation-menu-1"><span class="link__text u-underline">Company</span><span class="link__icon"><svg class="icon icon--caret-down-solid" viewBox="0 0 200 200" aria-hidden="true">
                                                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#caret-down-solid"></use>
                                            </svg></span></button>
                                </span>

                                <ul class="header__navigation-menu" id="header-71416-80300-navigation-menu-1" data-floating-placements="bottom" data-floating-offset="16" role="menu" hidden>
                                    <li class="header__navigation-menu-item" role="presentation">

                                        <a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Overview</span></a>
                                    </li>

                                    <li class="header__navigation-menu-item" role="presentation">

                                        <a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Pressroom</span></a>
                                    </li>
                                    <li class="header__navigation-menu-item" role="presentation">

                                        <a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Blog &amp; News</span></a>
                                    </li>
                                </ul>
                            </li>
                            <li class="header__navigation-item" data-floating-root>

                                <span class="header__navigation-link">

                                    <a class="link" data-link-block data-link-type="internal" href="#" aria-current="true"><span class="link__text u-underline">Technology</span></a>
                                </span>

                            </li>
                            <li class="header__navigation-item" data-floating-root>

                                <span class="header__navigation-link">

                                    <a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Licensing</span></a>
                                </span>

                            </li>
                            <li class="header__navigation-item" data-floating-root>

                                <span class="header__navigation-link">

                                    <a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Partner</span></a>
                                </span>

                            </li>
                            <li class="header__navigation-item" data-floating-root>

                                <span class="header__navigation-link">

                                    <a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a>
                                </span>

                            </li>
                        </ul>

                        <div class="header__navigation-highlight"></div>
                    </div>

                    <div class="header__login-button">

                        <a class="button" href="#">
                            <span class="button__icon">
                                <svg class="icon icon--lock-keyhole" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#lock-keyhole"></use>
                                </svg> </span>
                            <span class="button__text u-underline">Partner Area</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="site__stage">

        <div id="stage-71016-54489" class="stage">
            <div class="stage__inner">
                <div class="stage__content">
                    <div class="stage__headline">

                        <h1 class="headline"><span class="headline__text">Build<br />
                                <em class="headline__highlight">Awesome</em><br />
                                Audio Tools</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>With our <em class="headline__highlight">SDK’S</em></span></h1>
                    </div>

                    <div class="stage__text">
                        We are a leading provider of state-of-the-art audio processing and music analysis technology.
                    </div>

                </div>

                <div class="stage__media">
                    <div class="stage__images">
                        <img src="https://bildermangel.de/600x600/fe7c09/130f26.webp" width="600" height="600" class="stage__image">
                        <img src="https://bildermangel.de/600x600/fe7c09/130f26.webp" width="600" height="600" class="stage__image">
                        <img src="https://bildermangel.de/600x600/fe7c09/130f26.webp" width="600" height="600" class="stage__image">
                        <img src="https://bildermangel.de/600x600/fe7c09/130f26.webp" width="600" height="600" class="stage__image">
                        <img src="https://bildermangel.de/600x600/fe7c09/130f26.webp" width="600" height="600" class="stage__image">
                    </div>
                </div>
            </div>

            <div class="stage__selector">

                <div id="stage-71016-54489-selector" class="selector">
                    <div class="selector__label" id="stage-71016-54489-selector-label">
                        What should your tool do?
                    </div>

                    <ul class="selector__items" aria-labelledby="stage-71016-54489-selector-label">
                        <li class="selector__item">
                            <a class="selector__link selector__link--orange" href="#">
                                <span class="selector__link-text">Analysis</span>
                            </a>
                        </li>
                        <li class="selector__item">
                            <a class="selector__link selector__link--yellow" href="#">
                                <span class="selector__link-text">Broadcast</span>
                            </a>
                        </li>
                        <li class="selector__item">
                            <a class="selector__link selector__link--green" href="#">
                                <span class="selector__link-text">DJ-Tool</span>
                            </a>
                        </li>
                        <li class="selector__item">
                            <a class="selector__link selector__link--steel" href="#">
                                <span class="selector__link-text">Music</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <main class="site__content">

        <div id="page-36944-52113" class="page">

        </div>
    </main>

    <footer class="site__footer">

        <div id="footer-49645-28265" class="footer">
            <div class="footer__inner">
                <div class="footer__sitemap">
                    <div class="footer__section">
                        <div id="footer-49645-28265-sitemap-section-1" class="footer__section-headline">

                            <span class="headline" data-headline-size="6"><span class="headline__text">Information</span></span>
                        </div>

                        <ul class="footer__links" role="list" aria-labelledby="footer-49645-28265-sitemap-section-1">
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">About us</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Service</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Blog &amp; News</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Pressroom</span></a></li>
                        </ul>
                    </div>
                    <div class="footer__section">
                        <div id="footer-49645-28265-sitemap-section-2" class="footer__section-headline">

                            <span class="headline" data-headline-size="6"><span class="headline__text">Licensing</span></span>
                        </div>

                        <ul class="footer__links" role="list" aria-labelledby="footer-49645-28265-sitemap-section-2">
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Information</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Models</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">SDK Content</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Support</span></a></li>
                        </ul>
                    </div>
                    <div class="footer__section">
                        <div id="footer-49645-28265-sitemap-section-3" class="footer__section-headline">

                            <span class="headline" data-headline-size="6"><span class="headline__text">SDK Products</span></span>
                        </div>

                        <ul class="footer__links" role="list" aria-labelledby="footer-49645-28265-sitemap-section-3">
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">4TUNE</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ATAAK!</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">AUFTAKT</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">BARBEATQ</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">CWAVE</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ELASTIQUE</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ESPACE</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">FXPACK</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">KORT</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">METERING</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RESTORE</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RETUNE</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">TONART</span></a></li>
                            <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ZREVERB</span></a></li>
                        </ul>
                    </div>
                </div>

                <div class="footer__icon-buttons">

                    <a class="button" title="Email contact" href="#">
                        <span class="button__icon">
                            <svg class="icon icon--envelope" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#envelope"></use>
                            </svg> </span>
                    </a>

                    <a class="button" title="Facebook" href="#">
                        <span class="button__icon">
                            <svg class="icon icon--facebook" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#facebook"></use>
                            </svg> </span>
                    </a>

                    <a class="button" title="LinkedIn" href="#">
                        <span class="button__icon">
                            <svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#linkedin"></use>
                            </svg> </span>
                    </a>

                    <a class="button" title="X" href="#">
                        <span class="button__icon">
                            <svg class="icon icon--x" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#x"></use>
                            </svg> </span>
                    </a>

                    <a class="button" title="YouTube" href="#">
                        <span class="button__icon">
                            <svg class="icon icon--youtube" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.dcaca1c147.svg#youtube"></use>
                            </svg> </span>
                    </a>
                </div>

                <div class="footer__closing-line">
                    <img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="footer__logo">

                    <ul class="footer__meta-links">
                        <li class="footer__meta-link">

                            <a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Imprint</span></a>
                        </li>
                        <li class="footer__meta-link">

                            <a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Privacy Policy</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</div>
 
{% set contentTag = contentTag ?? 'main' %}

<div {{ html_attributes({
  id: id ?? false,
  class: 'site',
}, attrs ?? {}) }}>
  <header {{ html_attributes({
    class: 'site__header',
  }, headerAttrs ?? {}) }}>
    {% include '@header' with header only %}
  </header>

  {% if breadcrumb|default %}
    <nav class="site__breadcrumb" aria-current="{{ 'Current position' | t('site') }}">
      {% include '@breadcrumb' with breadcrumb only %}
    </nav>
  {% endif %}

  {% if stage|default %}
    <div class="site__stage">
      {% include '@stage' with stage only %}
    </div>
  {% endif %}

  <{{ contentTag }} {{ html_attributes({
    class: 'site__content',
  }, contentAttrs ?? {}) }}>
    {% include '@page' with page only %}
  </{{ contentTag }}>

  <footer {{ html_attributes({
    class: 'site__footer',
  }, footerAttrs ?? {}) }}>
    {% include '@footer' with footer only %}
  </footer>
</div>
 
/* No context defined. */
  • Content: 
    @use 'layers';

@property --site-header-background-opacity {
  initial-value: 0;
  syntax: '<alpha-value>';
}

@layer site {
  .site {
    background-color: var(--color-gray-050);
    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray-050));
    background-position: 0 0;
    background-repeat: 0;
    background-size: 100% 20rem;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 100vw;
    min-block-size: 100vh;
    overflow: clip;
    position: relative;
  }

  .site__header {
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    padding-block: clamp(0.8rem, 2.5vw, 3.6rem);
    padding-inline: var(--grid-padding);
    position: sticky;
    z-index: #{layers.position('header')};

    &::before {
      background-color: var(--color-white);
      box-shadow: var(--box-shadow-xxl);
      content: '';
      inset: 0;
      opacity: var(--site-header-background-opacity, 0);
      position: absolute;
      transition-property: opacity;
    }
  }

  .site__breadcrumb {
    margin-block: 0.8rem;
    padding-inline: var(--grid-padding);
  }

  .site__stage {
    inline-size: 100%;
    margin-block: 4.8rem;
    margin-inline: auto;
    max-inline-size: var(--grid-container);
    padding-inline: var(--grid-padding);
  }

  .site__content {
    inline-size: 100%;
    margin-block: 4.8rem;
    margin-inline: auto;
    max-inline-size: var(--grid-container);
    padding-inline: var(--grid-padding);
  }

  .site__footer {
    inline-size: 100%;
    margin-block-start: 6rem;
    margin-inline: auto;
    max-inline-size: var(--grid-container);
    padding-block-end: 3.6rem;
    padding-inline: var(--grid-padding);
  }
}
  • URL: /components/raw/site/site.scss
  • Filesystem Path: src/components/5-templates/site/site.scss
  • Size: 1.7 KB
  • Content: 
    import onLoad from '../../../javascripts/utils/onLoad';

onLoad<HTMLElement>('.site__header', ($header) => {
  const threshold = 100;

  document.addEventListener('scroll', () => {
    $header.style.setProperty(
      '--site-header-background-opacity',
      Math.min(1, window.scrollY / threshold).toPrecision(4),
    );
  }, { passive: true });
});
  • URL: /components/raw/site/site.ts
  • Filesystem Path: src/components/5-templates/site/site.ts
  • Size: 352 Bytes

No notes defined.