reveal.js

# Slide 1 - Secret Note

<section
        data-transition="zoom"
        data-background-transition="slide"
        data-transition-speed="fast">
        <aside class="notes">
          Shhh, these are your private notes 📝
        </aside>
      </section>

---

# Vertical 2.1 - Image

<section
          data-background-transition="convex"
          data-background-image="https://picsum.photos/id/870/2000/1500?grayscale&blur=2">
      </section>

---

# Vertical 2.2 - Image

<section
        data-background-image="https://picsum.photos/seed/picsum/2000">
      </section>

---

# Slide 3 - Fragment (Fade)

<section
        data-background-color="aquamarine"
        data-background-transition="convex">
        <span class="fragment fade-in">
          <span class="fragment highlight-red">
            <span class="fragment fade-out">
              Fade in > Turn red > Fade out
            </span>
          </span>
        </span>
      </section>

---

# Slide 4

A paragraph with some text and a [link](https://hakim.se).

---

# Slide 5 - Video

<section
        data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
        data-background-video-loop
        data-background-video-muted>
      </section>

---

# Slide 6 - Iframe (NOT Interactive)

<section
        data-background-iframe="http://osmankayi.com">
      </section>

---

# Slide 7 - Iframe (Interactive)

<section
        data-background-iframe="http://osmankayi.com"
        data-background-interactive>
      </section>

---

# Slide 8 - Auto-Animate

<section
        data-auto-animate>
        <h1>Implicit</h1>
      </section>

<section
        data-auto-animate>
        <h1>Implicit</h1>
        <h1>Animation</h1>
      </section>