IOER Presentation Template

<!-- first page, leave blank; edit title & author (etc.) in _config.yml --> Notes: - introduction

## Slide 2 This is the second slide. And it's just another file inside the _posts-directory. It is identified as slide 2, because the files sort after their names. Due to the blog platform origin, the date-part (0001-01-01) is mandatory, but it makes it easy to add slides in-between later (i.e. 0002-02-01).

## Fragments It's also possible to do fragments. - <!-- .element: class="fragment" --> Like - <!-- .element: class="fragment" --> This

## Vertical Slides Or -- Even -- Vertical -- Slides

# <span style="color:white">Backgrounds </span> <!-- .slide: data-background="#70A401" --> <p style="color:white"> Or use different backgrounds.</p> --- <p style="color:silver"> Or use an image as a background.</p> <!-- .slide: data-background="assets/batur.png" -->

# A hidden treasure This slide has a hidden treasure. Press "s" to see the speaker notes (unfortunately this only works in Chromium-based browsers so far) Note: This text is a speaker note! :) --- Give slides an ID with `<slide-id⁠>grand-finale</slide-id⁠>` [See the last slide.](#/grand-finale) -- ..or hide slides with `<slidevisibility⁠>hidden</slidevisibility⁠>`. -- <span data-id="text-animation"> You can also auto-animate transitions with `<auto-animate/⁠>`. </span> <!-- .slide: data-auto-animate --> -- <span data-id="text-animation"> You can also auto-animate transitions with `<auto-animate/⁠>`. # <span class="highlight">cool</span> </span> <!-- .slide: data-auto-animate -->

# Code function linkify( selector ) { if( supports3DTransforms ) { var nodes = document.querySelectorAll( selector ); for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className ) { node.className += ' roll'; } } } }

# Image and text  Here is an image with the context

# Animations <video controls> <source data-src="assets/cluster.webm" type="video/webm" /> <source data-src="assets/cluster.mp4" type="video/mp4" /> </video> --- ## autoplaying <!-- .slide: data-background-video="assets/flickr.webm" data-background-video-loop data-background-video-muted-->

# IFrames <!-- .slide: data-background-iframe="https://colouring.dresden.ioer.de/" data-background-interactive-->

Thank You <p class="small">Press <kbd class="hoverElement" data-customTooltip="Your ESCAPE-key, not this button.">ESC</kbd> to see slide overview.</p> <!-- .slide: id="grand-finale" --> <!-- .slide: data-background="#232323" -->