Skip to content

Instantly share code, notes, and snippets.

@cmoulliard

cmoulliard/-

Created November 18, 2013 13:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cmoulliard/7527677 to your computer and use it in GitHub Desktop.
Save cmoulliard/7527677 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="Asciidoctor 0.1.4" name="generator">
<meta content="Presenter Name" name="author">
<title>Title of Presentation</title>
<link href="deck.js/core/deck.core.css" rel="stylesheet">
<link href="deck.js/extensions/goto/deck.goto.css" rel="stylesheet">
<link href="deck.js/extensions/menu/deck.menu.css" rel="stylesheet">
<link href="deck.js/extensions/navigation/deck.navigation.css" rel="stylesheet">
<link href="deck.js/extensions/status/deck.status.css" rel="stylesheet">
<link href="deck.js/extensions/hash/deck.hash.css" rel="stylesheet">
<link href="deck.js/themes/style/.css" rel="stylesheet">
<link href="deck.js/themes/transition/fade.css" id="transition-theme-link" rel="stylesheet">
<script src="deck.js/modernizr.custom.js"></script>
</head>
<body class="deck-container article">
<section class="slide" id="title-slide">
<h1>Title of Presentation</h1>
<span id="author">Presenter Name</span>
<br>
</section>
<section class="slide" id="_title_of_slide_one">
<h2>Title of Slide One</h2>
<div class="paragraph"><p>This is the first slide after the title slide.</p></div>
</section>
<section class="slide canvas-image" id="_slide_two_s_title_will_not_be_displayed" style="background-image: url(images/jobs.jpg)">
<div class="paragraph canvas-caption"><p class="center-up">This text is displayed on top of the example.jpg image.</p></div>
</section>
<section class="slide" id="_title_of_slide_three">
<h2>Title of Slide Three</h2>
<div class="paragraph"><p>This is the 3th slide after the title slide.</p></div>
</section>
<section class="slide" id="_title_of_slide_4">
<h2>Title of Slide 4</h2>
<div class="paragraph"><p>This is the 4th slide after the title slide.</p></div>
</section>
<section class="slide" id="_title_of_slide_5">
<h2>Title of Slide 5</h2>
<div class="paragraph"><p>This is the 5th slide after the title slide.</p></div>
</section>
<a class="deck-prev-link" href="#" title="Previous">&#8592;</a>
<a class="deck-next-link" href="#" title="Next">&#8594;</a>
<a class="deck-permalink" href="." title="Permalink to this slide">#</a>
<script src="deck.js/jquery-1.7.2.min.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/extensions/hash/deck.hash.js"></script>
<script src="deck.js/extensions/menu/deck.menu.js"></script>
<script src="deck.js/extensions/goto/deck.goto.js"></script>
<script src="deck.js/extensions/status/deck.status.js"></script>
<script src="deck.js/extensions/navigation/deck.navigation.js"></script>
<script src="deck.js/extensions/scale/deck.scale.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
<style>
.slide.canvas-image {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-moz-box-align: start;
-webkit-box-align: start;
-ms-box-align: start;
box-align: start;
-moz-box-pack: start;
-webkit-box-pack: start;
-ms-box-pack: start;
box-pack: start;}
.bottom-left {
left: 1%;
bottom: 20%; }
.top-left {
left: 1%;
top: 20%; }
.bottom-right {
right: 1%;
bottom: 20%; }
.top-right {
right: 1%;
top: 20%; }
.center-up {
right: 50%;
top: 1%;
}
.center-down {
right: 50%;
bottom: 1%;
}
.canvas-image .canvas-caption p {
text-align: center;
padding-top: 0;
padding: 0;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
display: inline;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
font-weight: bold;
font-size: 58px;
-webkit-box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
padding: 1rem;
color: white; }
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment