summaryrefslogtreecommitdiffstats
path: root/docs/submodules/joid
Bad object name: 556619df6b2e61f3aefcfdf837f2a99d18b3b7d9
='#n59'>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 140 141 142 143 144 
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>reveal.js - Slide Backgrounds</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="../../css/reveal.css">
		<link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
		<style type="text/css" media="screen">
			.slides section.has-dark-background,
			.slides section.has-dark-background h2 {
				color: #fff;
			}
			.slides section.has-light-background,
			.slides section.has-light-background h2 {
				color: #222;
			}
		</style>
	</head>

	<body>

		<div class="reveal">

			<div class="slides">

				<section data-background="#00ffff">
					<h2>data-background: #00ffff</h2>
				</section>

				<section data-background="#bb00bb">
					<h2>data-background: #bb00bb</h2>
				</section>

				<section data-background-color="lightblue">
					<h2>data-background: lightblue</h2>
				</section>

				<section>
					<section data-background="#ff0000">
						<h2>data-background: #ff0000</h2>
					</section>
					<section data-background="rgba(0, 0, 0, 0.2)">
						<h2>data-background: rgba(0, 0, 0, 0.2)</h2>
					</section>
					<section data-background="salmon">
						<h2>data-background: salmon</h2>
					</section>
				</section>

				<section data-background="rgba(0, 100, 100, 0.2)">
					<section>
						<h2>Background applied to stack</h2>
					</section>
					<section>
						<h2>Background applied to stack</h2>
					</section>
					<section data-background="rgb(66, 66, 66)">
						<h2>Background applied to slide inside of stack</h2>
					</section>
				</section>

				<section data-background-transition="slide" data-background="assets/image1.png">
					<h2>Background image</h2>
				</section>

				<section>
					<section data-background-transition="slide" data-background="assets/image1.png">
						<h2>Background image</h2>
					</section>
					<section data-background-transition="slide" data-background="assets/image1.png">
						<h2>Background image</h2>
					</section>
				</section>

				<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111">
					<h2>Background image</h2>
					<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
				</section>

				<section data-background="#888888">
					<h2>Same background twice (1/2)</h2>
				</section>
				<section data-background="#888888">
					<h2>Same background twice (2/2)</h2>
				</section>

				<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
					<h2>Video background</h2>
				</section>

				<section data-background-iframe="https://slides.com">
					<h2>Iframe background</h2>
				</section>

				<section>
					<section data-background="#417203">
						<h2>Same background twice vertical (1/2)</h2>
					</section>
					<section data-background="#417203">
						<h2>Same background twice vertical (2/2)</h2>
					</section>
				</section>

				<section data-background="#934f4d">
					<h2>Same background from horizontal to vertical (1/3)</h2>
				</section>
				<section>
					<section data-background="#934f4d">
						<h2>Same background from horizontal to vertical (2/3)</h2>
					</section>
					<section data-background="#934f4d">
						<h2>Same background from horizontal to vertical (3/3)</h2>
					</section>
				</section>

			</div>

		</div>

		<script src="../../lib/js/head.min.js"></script>
		<script src="../../js/reveal.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				center: true,
				// rtl: true,

				transition: 'linear',
				// transitionSpeed: 'slow',
				// backgroundTransition: 'slide'
			});

		</script>

	</body>
</html>