Fix HTML and CSS order.

site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte

@@ -51,6 +51,29 @@
 	}
 </script>
 
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}>
+		<track kind="captions">
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
 <style>
 	div {
 		position: relative;
@@ -102,27 +125,4 @@
 	video {
 		width: 100%;
 	}
-</style>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
-		on:mousedown={handleMousedown}>
-		<track kind="captions">
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
+</style>

site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte

@@ -51,6 +51,32 @@
 	}
 </script>
 
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused>
+		<track kind="captions">
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
 <style>
 	div {
 		position: relative;
@@ -102,30 +128,4 @@
 	video {
 		width: 100%;
 	}
-</style>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
-		on:mousedown={handleMousedown}
-		bind:currentTime={time}
-		bind:duration
-		bind:paused>
-		<track kind="captions">
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
+</style>