forked from hakimel/reveal.js
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
139 lines (120 loc) · 4.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Presentation Title"> <!-- TODO: Fill in title -->
<meta name="author" content="Full Name"> <!-- TODO: Fill in name -->
<title>Presentation Title</title> <!-- TODO: Fill in title -->
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/government-digital-service.css" id="theme">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="intro"
data-background-image="images/cabinet-office-logo.png"
data-background-repeat="no-repeat"
data-background-size="auto auto"
data-background-position="1.8em 3.2em">
<p><strong>Full Name</strong></p> <!-- TODO: Fill in name -->
<p>Job Title</p> <!-- TODO: Fill in job title -->
<p>Government Digital Service</p>
<p>@twitterhandle</p> <!-- TODO: Fill in twitter handle -->
<aside class="notes">
This is a title slide.
</aside>
</section>
<section class="heading" data-background-color="#0076c0">
<h1>This is a main heading</h1>
<aside class="notes">
This slide format is for headings or section breaks.
</aside>
</section>
<section class="heading"
data-background-image="images/image_heading_slide_background.jpg">
<h1 style="color: #fff">This is an image heading slide</h1>
<aside class="notes">
This slide format is for headings or section breaks with an image.
</aside>
</section>
<section>
<p>
This is a text slide
</p>
<aside class="notes">
This should be what most of your slides look like
</aside>
</section>
<section class="no-footer"
data-background-image="images/image_slide_background.jpg">
<aside class="notes">
Pictures should be full bleed, with no footer.
</aside>
</section>
<section data-background-image="images/screenshot_slide_background.png">
<aside class="notes">
Screenshots should look like this.
</aside>
</section>
<section data-background-image="images/annotated_screenshot.png"
data-background-repeat="no-repeat"
data-background-size="45% auto"
data-background-position="right 5% top">
<p style="width: 50%;">
This is how to annotate a screenshot
</p>
<aside class="notes">
Annotated screenshots should look like this.
</aside>
</section>
<section class="outro"
data-background-image="images/cabinet-office-logo.png"
data-background-repeat="no-repeat"
data-background-size="auto auto"
data-background-position="1.8em 3.2em">
<p><strong>Thanks!</strong></p>
<p>Full Name</p> <!-- TODO: Fill in name -->
<p>@twitterhandle</p> <!-- TODO: Fill in twitter handle -->
</section>
<footer>
<span style="float: right;">
<abbr title="Government Digital Service">GDS</abbr>
</span>
</footer>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
width: '100%',
height: '100%',
margin: 0,
controls: false,
progress: false,
history: true,
center: true,
showNotes: window.location.search.match(/print-pdf/gi) ? 'separate-page' : false,
transition: 'none', // none/fade/slide/convex/concave/zoom
backgroundTransition: 'none',
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true },
]
});
</script>
</body>
</html>