Author: | ondras |
---|---|
Views Total: | 340 views |
Official Page: | Go to website |
Last Update: | October 23, 2020 |
License: |
Preview:

Description:
A CSS only, fully responsive, print-ready HTML5 presentation template that switches between slides with a cool rotate effect.
How to use it:
1. Load the necessary CSS files in the HTML.
<link rel="stylesheet" href="css/common.css" media="all" /> <link rel="stylesheet" href="css/screen.css" media="screen" /> <link rel="stylesheet" href="css/print.css" media="print" />
2. Add slides to the presentation as follows:
<section id="slide1"> <h2>CSS Only Presentation</h2> <a class="next" href="#slide2"></a> <span id="hint">Click to continue ↑</span> <ul> <li>CSS</li> <li>Script</li> <li>Com</li> </ul> </section> <section id="slide2"> <h2>Slide 2</h2> <a class="prev" href="#slide1"></a> <a class="next" href="#slide3"></a> Slide 2 Content </section> <section id="slide3"> <h2>Slide 3</h2> <a class="prev" href="#slide2"></a> <a class="next" href="#slide4"></a> Slide 3 Content </section> <section id="slide4"> <h2>Slide 4</h2> <a class="prev" href="#slide3"></a> <a class="next" href="#slide5"></a> Slide 4 Content </section> <section id="slide5"> <h2>Slide 5</h2> <a class="prev" href="#slide4"></a> Slide 5 Content <p><a id="reset" href="#">Reset?</a></p> </section> <section id="start"> <a href="#slide1">Click here to start the presentation…</a> </section> <aside id="time"></aside>