-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathminimalistic.html
130 lines (101 loc) · 3.32 KB
/
minimalistic.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[your_title_here]</title>
<!--
Notes on CSS media types used:
1) projection -> slideshow mode (display one slide at-a-time; hide all others)
2) screen -> outline mode (display all slides-at-once on screen)
3) print -> print (and print preview)
Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
Questions, comments?
- send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
-->
<!-- styles -->
<style media="screen,projection">
html,
body,
.presentation { margin: 0; padding: 0; }
.slide { display: none;
position: absolute;
top: 0; left: 0;
margin: 0;
border: none;
padding: 2% 4% 0% 4%; /* css note: order is => top right bottom left */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%; height: 100%; /* css note: lets use border-box; no need to add padding+border to get to 100% */
overflow-x: hidden; overflow-y: auto;
z-index: 2;
}
.slide.current { display: block; } /* only display current slide in projection mode */
.slide .stepcurrent { color: black; }
.slide .step { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
.slide {
background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
}
</style>
<style media="screen">
.slide { border-top: 1px solid #888; }
.slide:first-child { border: none; }
</style>
<style media="print">
.slide { page-break-inside: avoid; }
.slide h1 { page-break-after: avoid; }
.slide ul { page-break-inside: avoid; }
</style>
<!-- add js lib (jquery) -->
<script src="../s6/js/jquery-2.1.1.min.js"></script>
<!-- S6 JS -->
<script src="../s6/js/jquery.slideshow.js"></script>
<script src="../s6/js/jquery.slideshow.counter.js"></script>
<script src="../s6/js/jquery.slideshow.controls.js"></script>
<script>
$(document).ready( function() {
Slideshow.init();
// Example 2: Start Off in Outline Mode
// Slideshow.init( { mode: 'outline' } );
// Example 3: Use Custom Transition
// Slideshow.transition = transitionScrollUp;
// Slideshow.init();
// Example 4: Start Off in Autoplay Mode with Custom Transition
// Slideshow.transition = transitionScrollUp;
// Slideshow.init( { mode: 'autoplay' } );
} );
</script>
</head>
<body>
<div class="presentation">
<!-- add slides here; example -->
<div class='cover'>
<h1>Your Slide Title Here</h1>
<ul>
<li>Item One Here</li>
<li>Item Two Here</li>
</ul>
</div>
<div>
<h1>Steps Demos</h1>
<!-- mark list with class step to mark all items at once -->
<ul class='step'>
<li>Item 1.1 Here</li>
<li>Item 1.2 Here</li>
</ul>
<!-- or mark individual list items -->
<ul>
<li class='step'>Item 2.1 Here</li>
<li class='step'>Item 2.2 Here</li>
</ul>
<!-- or mark paragraphs, div blocks or whatever -->
<p class='step'>Another Step</p>
</div>
<div>
<h1>Another Slide Title Here</h1>
<p>yada yada yada</p>
</div>
</div> <!-- presentation -->
</body>
</html>