<layout src="main"/>


<video src="https://localhost/videos/video1.mp4" autoplay loop muted></video>



<section class="hero" data-scroll-step="1">
    <!--<picture>
        &lt;!&ndash;<source srcset="/assets/images/hero.avif" type="image/avif">
        <source srcset="assets/images/hero.webp" type="image/webp">&ndash;&gt;
        <img src="/assets/images/hero_small.jpg" alt="" aria-hidden="true" />
    </picture>-->

    <component name="alert" type="info" message="Hilfe!"></component>

    <component
        name="image"
        src="/assets/images/hero.jpg"
        srcset="/assets/images/hero.webp 768w"
        alt="Ein Beispielbild">
    </component>


    <component name="card" title="Wichtige Information" image="/assets/images/hero_small.jpg" message="ERROR!">
        Hier steht der Inhalt der Karte
    </component>


    <h1 class="zoomed">Willkommen!</h1>

    <h2>Überschrift</h2>
    <p>Das ist deine Seite.
    Hier steht noch viel mehr Text.
    Das ist direkt noch eine neue Zeile.</p>
    <button>Test</button>
    <button class="secondary">Secondary</button>
    <button class="outline">Outline</button>
</section>

<form action="/newsletter/register" method="post">
    <input type="text" name="name" placeholder="Name"/>
    <input type="email" name="email" placeholder="Email"/>
    <input type="checkbox" name="consent" />
    <input type="submit" />
</form>


<section class="fade">
    <div>
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
    <p>Textinhalt...</p>
</section>

<section class="fade" data-scroll-step="2">
    <div>
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
    <p>Textinhalt...</p>
</section>

<blockquote class="zoomed">
    Das ist ein Zitat.
</blockquote>

<section>
    <div class="fade">
        <h2>Ich parallaxe</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium amet, asperiores delectus, dolores dolorum in ipsam libero, magnam neque nobis nostrum perferendis perspiciatis quae recusandae reprehenderit similique temporibus ut!</p>
    </div>
</section>

<section data-scroll-step="3">
    <div class="fade">
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
</section>

<div data-sticky-container>
    <div data-sticky-step>Kapitel 1</div>
    <div data-sticky-step>Kapitel 2</div>
    <div data-sticky-step>Kapitel 3</div>
</div>


<section class="hero">
    <div class="fade">
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
</section>

<div class="loop-container">
    <div data-scroll-loop data-scroll-speed="0.25">
        <img src="" />
        <img src="" aria-hidden="true" />
        Some Scoll Loop
    </div>
</div>

<div data-scroll-loop data-scroll-type="rotate" data-scroll-speed="0.5">
    🔄
</div>

<section class="hero" data-parallax data-parallax-speed="0.5">
    <div class="fade">
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
</section>

<div data-scroll-loop data-scroll-speed="0.25">
    Hallo Welt
</div>

<div data-scroll-loop data-scroll-type="scale" data-loop-pause="true">
    Pausierbar?
</div>

<section class="hero">
    <div class="fade">
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
</section>


<div data-sticky-fade data-scroll-dir="up">
    Ich werde sichtbar, wenn ich in den Viewport scrolle.
</div>


<section class="hero">
    <div class="fade">
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
</section>


<section class="hero">
    <div class="fade">
        <h2>Über mich</h2>
        <p>Textinhalt...</p>
    </div>
</section>


<button command="show-modal" commandfor="my-dialog">Sesam, öffne dich!</button>

<dialog id="my-dialog" closedby="any">
    Ich bin eine Dialogbox.
</dialog>>
