Why Reveal.js ?

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Vertical Slides..

How to do it ?

<section>
	<section>
		<h2>Vertical 1 </h2>
		<p>This is vertical 1</p>
	</section>
	<section>
		<h2>Vertical 2</h2>
		<p>This is vertical 2</p>
	</section>
</section>

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Speaker View

• There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

  To use it, press the S key.

Slide Backgrounds

Set data-background="#000000" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

<section data-background="image.png">

Tiled Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

Video Backgrounds

<section data-background-video="image/KLTimelapse.mp4">

... and GIFs!

<section data-background="http://i.giphy.com/90F8aUepslB84.gif">

Themes

reveal.js comes with a few themes built in: 

Black (default) - White - League - Sky - Beige - Simple 
Serif - Blood - Night - Moon - Solarized

Deploy the slides

• git clone git@github.com:hakimel/reveal.js.git
• git remote rm origin  
• git remote add origin <path to your new repository in github>
• git add .
• git commit -m "Initial commit"
• git push origin master
• git branch create hg-pages
• git push origin gh-pages

 

View the slides

the url is built from the followng pattern:

[github_username].github.io/[repo_name]  

Question time

Question 1

How to make a vertical slides in reveal.js?

Question 2

how to add a picture to the slide in reveal.js?

Question 3

what is the branch name on the github that the slides need to reside?