From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 6 Feb 2022 00:58:31 +0000 (-0800)
Subject: Organize content into sections
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=65e30a76fe8a151da53568ca3a9a0b5a09591329;p=css-loaders

Organize content into sections
---

diff --git a/index.html b/index.html
index 699d0f1..c366cec 100644
--- 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>