Presentation with reveal.js

Basic presentation using slides with reveal.js

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/master/css/reveal.css">
<script src="https://cdn.rawgit.com/hakimel/reveal.js/master/js/reveal.js"></script>
<div class="reveal">
  <div class="slides">
    <section>
      <h1>Slides</h1>
      <p>using reveal.js</p>
    </section>
    <section>
      <section data-background-color="#FFCDB2">
        <h2>Simplicity is prerequisite for reliability</h2>
        <p>Edsger Dijkstra</p>
      </section>
      <section data-background-color="#84DCC6" data-background-transition="zoom">
        <h2>If you can't explain it simply, you don't understand it well enough</h2>
        <p>Albert Einstein</p>
      </section>
    </section>
    <section>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/7Pq-S557XQU" allowfullscreen></iframe>
      <p>CGP Grey</p>
    </section>
  </div>
</div>

CSS

.reveal * {
  color: #555;
}

.reveal h1 {
  font-size: 8rem;
}

.reveal h2 {
  font-size: 4rem;
}

.reveal p {
  font-size: 3rem;
  margin: 2rem 0;
}

JavaScript

Reveal.initialize();