Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 8afae13d17239edd07e72fd2009094493371d4c3 / . / inst / reveal.js-4.2.1 / examples / layout-helpers.html
blob: a129811f3e8eb0569ec22b925a6489d14ecb9eba [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js - Layout Helpers</title>
8
9 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10
11 <link rel="stylesheet" href="../dist/reveal.css">
12 <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
13 <link rel="stylesheet" href="../plugin/highlight/monokai.css">
14 </head>
15
16 <body>
17
18 <div class="reveal">
19
20 <div class="slides">
21
22 <section>
23 <h2>Layout Helper Examples</h2>
24 <ul>
25 <li><a href="#/fit-text">Big Text</a></li>
26 <li><a href="#/stretch">Stretch</a></li>
27 <li><a href="#/stack">Stack</a></li>
28 <li><a href="#/hstack">HStack</a></li>
29 <li><a href="#/vstack">VStack</a></li>
30 </ul>
31 </section>
32
33 <section id="fit-text">
34 <h2>Fit Text</h2>
35 <p>Resizes text to be as large as possible within its container.</p>
36 <pre><code class="html" data-trim data-line-numbers>
37 <h2 class="r-fit-text">FIT</h2>
38 </code></pre>
39 </section>
40
41 <section>
42 <h2 class="r-fit-text">FIT</h2>
43 </section>
44
45 <section>
46 <h2 class="r-fit-text">HELLO WORLD</h2>
47 <h2 class="r-fit-text">BOTH THESE TITLES USE FIT-TEXT</h2>
48 </section>
49
50 <section id="stretch">
51 <h2>Stretch</h2>
52 <p>Makes an element as tall as possible while remaining within the slide bounds.</p>
53 <pre><code class="html" data-trim data-line-numbers>
54 <h2>Stretch Example</h2>
55 <img src="assets/image2.png" class="r-stretch">
56 <p>Image byline</p>
57 </code></pre>
58 </section>
59
60 <section>
61 <h2>Stretch Example</h2>
62 <img src="assets/image2.png" class="r-stretch">
63 <p>Image byline</p>
64 </section>
65
66 <section id="stack">
67 <h2>Stack</h2>
68 <p>Stacks multiple elements on top of each other, for use with fragments.</p>
69 <pre><code class="html" data-trim data-line-numbers>
70 <div class="r-stack">
71 &lt;img class="fragment" width="450" height="300" src="..."&gt;
72 &lt;img class="fragment" width="300" height="450" src="..."&gt;
73 &lt;img class="fragment" width="400" height="400" src="..."&gt;
74 </div>
75 </code></pre>
76 </section>
77
78 <section>
79 <h2>Stack Example</h2>
80 <div class="r-stack">
81 <p class="fragment fade-in-then-out">One</p>
82 <p class="fragment fade-in-then-out">Two</p>
83 <p class="fragment fade-in-then-out">Three</p>
84 <p class="fragment fade-in-then-out">Four</p>
85 </div>
86 <div class="r-stack">
87 <img src="https://placekitten.com/450/300" width="450" height="300" class="fragment">
88 <img src="https://placekitten.com/300/450" width="300" height="450" class="fragment">
89 <img src="https://placekitten.com/400/400" width="400" height="400" class="fragment">
90 </div>
91 </section>
92
93 <section>
94 <h2>Stack Example</h2>
95 <p>fade-in-then-out fragments</p>
96 <div class="r-stack">
97 <img src="https://placekitten.com/450/300" width="450" height="300" class="fragment fade-in-then-out">
98 <img src="https://placekitten.com/300/450" width="300" height="450" class="fragment fade-in-then-out">
99 <img src="https://placekitten.com/400/400" width="400" height="400" class="fragment fade-in-then-out">
100 </div>
101 </section>
102
103 <section id="hstack">
104 <h2>HStack</h2>
105 <p>Stacks multiple elements horizontally.</p>
106 <pre><code class="html" data-trim data-line-numbers>
107 <div class="r-hstack">
108 &lt;img width="450" height="300" src="..."&gt;
109 &lt;img width="300" height="450" src="..."&gt;
110 &lt;img width="400" height="400" src="..."&gt;
111 </div>
112 </code></pre>
113 </section>
114
115 <section data-auto-animate>
116 <h2>HStack Example</h2>
117 <div class="r-hstack">
118 <p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
119 <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
120 <p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
121 </div>
122 </section>
123
124 <section id="vstack">
125 <h2>VStack</h2>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]126 <p>Stacks multiple elements vertically.</p>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]127 <pre><code class="html" data-trim data-line-numbers>
128 <div class="r-vstack">
129 &lt;img width="450" height="300" src="..."&gt;
130 &lt;img width="300" height="450" src="..."&gt;
131 &lt;img width="400" height="400" src="..."&gt;
132 </div>
133 </code></pre>
134 </section>
135
136 <section data-auto-animate>
137 <h2>VStack Example</h2>
138 <div class="r-vstack">
139 <p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
140 <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
141 <p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
142 </div>
143 </section>
144
145 </div>
146
147 </div>
148
149 <script src="../dist/reveal.js"></script>
150 <script src="../plugin/highlight/highlight.js"></script>
151 <script>
152 Reveal.initialize({
153 center: true,
154 hash: true,
155 plugins: [ RevealHighlight ]
156 });
157 </script>
158
159 </body>
160</html>