Organize content into sections

diff --git a/index.html b/index.html
index 699d0f1a0ad1a9393a3b36a6c3759c0e3b6eda39..c366cecb0c419ac10640114c8fa04619dcd2ffaf 100644 (file)
--- a/index.html
+++ b/index.html
@@ -112,26 +112,38 @@
   </header>
 
   <main>
-    <p>A block skeleton line loader:</p>
-    <div class="skeleton-line"></div>
-
-    <p>An inline skeleton square, circle, and line loader:</p>
-    <div class="skeleton-inline-container">
-      <span class="skeleton-inline-square"></span>
-      <span class="skeleton-inline-circle"></span>
-      <span class="skeleton-inline-line"></span>
-    </div>
-
-    <h1>
-      <span class="inline-spinner"></span>Some h1 text next to an inline-spinner<span class="inline-spinner"></span>
-    </h1>
-
-    <p>
-      <span class="inline-spinner"></span>Some p text next to an inline-spinner<span class="inline-spinner"></span>
-    </p>
-
-    <h1>An &lt;hr&gt; divider with a subtle gradient animation:</h1>
-    <hr class="gradient-divider">
+    <section>
+      <h1>Skeleton loaders</h1>
+
+      <p>A block skeleton line loader:</p>
+      <div class="skeleton-line"></div>
+
+      <p>An inline skeleton square, circle, and line loader:</p>
+      <div class="skeleton-inline-container">
+        <span class="skeleton-inline-square"></span>
+        <span class="skeleton-inline-circle"></span>
+        <span class="skeleton-inline-line"></span>
+      </div>
+    </section>
+
+    <section>
+      <h1>Spinners</h1>
+
+      <h1>
+        <span class="inline-spinner"></span>Some h1 text next to an inline-spinner<span class="inline-spinner"></span>
+      </h1>
+
+      <p>
+        <span class="inline-spinner"></span>Some p text next to an inline-spinner<span class="inline-spinner"></span>
+      </p>
+    </section>
+
+    <section>
+      <h1>Dividers</h1>
+
+      <p>Small divider with a subtle gradient animation:</p>
+      <hr class="gradient-divider">
+    </section>
   </main>
 </body>