]> git.cworth.org Git - zombocom-ai/commitdiff
Move some padding from every p to a new "content" div
authorCarl Worth <cworth@cworth.org>
Wed, 7 Dec 2022 01:21:55 +0000 (17:21 -0800)
committerCarl Worth <cworth@cworth.org>
Wed, 7 Dec 2022 01:23:59 +0000 (17:23 -0800)
Trying to bring sanity to this mess styling.

index.html

index cfd8f6ade61513f5e095758a3a2343f1e5c31f16..e8d2239649f82903e3705108ef2c4fb685db9447 100644 (file)
 </head>
 
 <body>
-  <div align="center">
-    <p>
-      <br>
-    </p>
+  <div id="content">
+
+    <div id="header" align="center">
+      <p>
+        <br>
+      </p>
+
+      <p>
+        <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
+      </p>
+    </div>
 
     <p>
-      <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
+      Welcome to Zombocom. You can do anything at Zombcom, anything at
+      all. The only limit is yourself!
     </p>
-  </div>
 
-  <p>
-    Welcome to Zombocom. You can do anything at Zombcom, anything at
-    all. The only limit is yourself!
-  </p>
+    <p>
+      <form action="" id="zombo-form">
+        <div class="form-row large">
+          <label for="prompt">
+            What do you imagine?
+          </label>
+          <input id="prompt" autocomplete="off" required />
+        </div>
 
-  <p>
-    <form action="" id="zombo-form">
-      <div class="form-row large">
-        <label for="prompt">
-          What do you imagine?
-        </label>
-        <input id="prompt" autocomplete="off" required />
-      </div>
+        <div class="form-row small left">
+          <label for="code">
+            Numeric code
+          </label>
+          <input id="code" autocomplete="off" placeholder="(Chosen randomly)" />
+        </div>
 
-      <div class="form-row small left">
-        <label for="code">
-          Numeric code
-        </label>
-        <input id="code" autocomplete="off" placeholder="(Chosen randomly)" />
-      </div>
+        <div class="form-row small right">
+          <button>Safety prompt</button>
+        </div>
 
-      <div class="form-row small right">
-        <button>Safety prompt</button>
-      </div>
+        <div class="form-row large">
+          <button>Make the infinite possible</button>
+        </div>
+      </form>
+    </p>
 
-      <div class="form-row large">
-        <button>Make the infinite possible</button>
+    <div align="center">
+      <div class="animate-flicker">
+        <p>
+          <img src="/pngwheel.png" class="rotate thefade">
+        </p>
       </div>
-    </form>
-  </p>
+    </div>
 
-  <div align="center">
-   <div class="animate-flicker">
-     <p>
-       <img src="/pngwheel.png" class="rotate thefade">
-     </p>
-   </div>
-  </div>
-
-  <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
-  <button id="mute" class="fade volume">
-    <div>🔊</div>
-    <script>
+    <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
+    <button id="mute" class="fade volume">
+      <div>🔊</div>
+      <script>
 const mute = document.querySelector("#mute");
 const icon = document.querySelector("#mute > div");
 const audio = document.querySelector("audio");
@@ -79,8 +81,10 @@ mute.addEventListener("click", () => {
   }
   mute.classList.add("fade");
 });
-    </script>
+      </script>
+
+    </button>
 
-  </button>
+  </div>
 </body>
 </html>