slides

Forget PowerPoint. Make HTML slides in a fly.

View Demo

---

Features -

• Simple, Easy to Use
• Written in Vanilla Javascript
• Simple Markup
• FullScreen View
• 5+ Prebuilt Themes
• Customize Themes

Available Themes -

• Dark Theme

---

• Default Theme

---

• Red Theme

---

• Codgray Theme

---

• Badass Theme

---

• Gray Theme

---

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>


	<div class="slide">

			<h1>Heading 2</h1>

			<p>Description  2</p>

	</div>

	.
	.
	.
	.
	.
	<div class="slide">

			<h1>Heading N..</h1>

			<p>Description  N..</p>

	</div>

</div>
			
		

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;
}
			
		

Thanks

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