reveal.js

create full-feature, pretty presentations

First...

download reveal.js from github

						git clone https://github.com/hakimel/reveal.js.git
						cd reveal.js
						npm install
						npm start
					

Now...

Auto

Animate

highlight and reveal

individual elements on a slide

Code from the previous slide

			       <h1 class="fragment highlight-blue"> Auto </h1>
			       <h1 class="fragment highlight-blue"> Animate </h1>
			       
			       <span class="fragment fade-in">
			        <span class="fragment highlight-blue">
			          <span class="fragment fade-out">
			           # text goes here
			          </span>
			         </span>
			        </span>
			       
			     
			     

Stack kittens

			       <div class="r-stack">
			       
			          <img class="fragment" src="https://placekitten.com/450/300" width="450" height="300"> 
			          <img class="fragment" src="https://placekitten.com/300/450" width="300" height="450"> 
			          <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">  
						  </div>
						

Transition Styles

select from different transitions, like:
None - Fade - Slide - Convex - Concave - Zoom

this slide overrides the presentation transition and ZOOM!

				     </section data-transition="zoom">
				    

Slide Backgrounds

set data-background to to a CSS color

			       <section>
			          <section data-background="#FF3D5A"> 
			            <h2> Slide Backgrounds</h2>
			          </section>  
						    </section>
						

Slide Backgrounds

set data-background to to a CSS color

			       <section>
			          <section data-background="#7585ff"> 
			            <h2> Slide Backgrounds</h2>
			          </section>  
						    </section>
						

Slide Backgrounds

set data-background to to a CSS color

			       <section>
			          <section data-background="#e5ffe8"> 
			            <h2> Slide Backgrounds</h2>
			          </section>  
						    </section>
						

HTML color codes

					  
						  <div style="background-color: #8480ff">
						    text as the color #8480ff
						  </div>
						  
						  <div style="background-color: #fd75ff">
						    text as the color #fd75ff
						  </div>
	
						  <div style="color:#8480ff">
						    background using #8480ff
						  </div>
				  
						  <div style="border: 2px solid #8480ff">
						    border color as #8480ff
						  </div>
						  
						  <div style="border: 2px solid #8480ff">
						    border color as #8480ff
						  </div>
					
					

Image Backgrounds

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

Image Backgrounds

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

Image Backgrounds

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

Tiled Backgrounds

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

add GIFs!

Block Quote

					  <q cite="https://skillcrush.com/blog/advice-from-women-in-tech/">
					    It’s very important to get more women into computing. Computing is too important to be left to men
					    - Karen Sparck Jones
					   </q>
					

It’s very important to get more women into computing. Computing is too important to be left to men. - Karen Sparck Jones

“One thing I always tell young girls: Never let anybody tell you you can’t do it. Growing up, they’d look at me like, Really? I never gave up. Even when I was having teachers tell me, just take a break from math, you can take this class next year. I said, ‘No, I’m going to take it now.’ I kept pushing for it.” - Michelle Haupt

					  <blockquote cite="=https://skillcrush.com/blog/advice-from-women-in-tech/">
					    # quote goes here
					   </blockquote>
					 

PRECODE

code with syntax highlightinghighlight.js.

			       <pre><code data-trim data-noescape>
			          (def lazy-fib(concat[0 1]
			          ((fn rfib [a b]
			          (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
			       </code></pre>
				  

		      (def lazy-fib(concat[0 1]
		      ((fn rfib [a b]
		      (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))