Forget PowerPoint. Make HTML slides in a fly.

View Demo

Features -

Available Themes -

Use cases

Presentation for a programming language.
Or Quick Slideshow during Meetups.
Well, you can use it anywhere you like without much of a headache.

How to Use ?

Just give a `div` (not necessarily a `div`, it can be a `span` or some other container) an id of `slides`.
Inside that there must be various other containers with a class of `slide`, which are the actual slides.
These Actual Slides with a class of `slide` can contain different HTML5 tags.

<div id="slides">
<div class="slide">
<h1>Heading 1</h1>
<p>Description 1</p>
<div class="slide">
<h1>Heading 2</h1>
<p>Description 2</p>
. . . . . <div class="slide">
<h1>Heading N..</h1>
<p>Description N..</p>

Using a Theme

Download themes from here & then simply hot-link the url of the `theme.css` file.

<!-- include this in `index.html` file to make the slides work. this is the minimal requirement -->

<!-- theme which you can customize for personal use or use the existing ones -->
<link rel="stylesheet" href="/path/to/theme.css">

<!-- original stylesheet consisting of the basic styles applied -->
<link rel="stylesheet" href="/path/to/style.css">

<!-- include javascript file to make the slides work -->
<script   src="/path/to/app.js"></script>

Creating a Theme

Simple copy the below snippet & include it above the main CSS file. All the variables are self-explanatory. Just change the values & viola new theme is created. Ain't that simple ?

/* My favourite red theme */

:root {
	--bg-color: #BA2030;
	--default-font: 'Inconsolata', Helvetica;
	--default-color: #acd;
	--header-footer-font: 'Quattrocento', Courier, monospace;
	--header-footer-color: #acd;
	--h1-color: yellowgreen;
	--para-color: #112242;
	--code-color: #00ff00;
	--code-bg-color: black;
	--code-border-color: #111111;
	--anchor-color: orange;
	--list-item-color: #11dd88;
	--fullscreen-color: #BA2030;


This is a stupid side project, just made for fun !! Anywayz thanks !!