idk if i committed yet tbh

index.html

@@ -19,7 +19,9 @@
           <div class="h1-container">
             <h1>Ted Pier<span class="subtitle">a.k.a. MiningTcup</span></h1>
           </div>
-          <img src="lulu.webp" alt="Lulu the dog" />
+          <a href="lulu.html"
+            ><img src="images/lulu.webp" alt="Lulu the dog"
+          /></a>
         </div>
         <hr />
         <section>

lulu.html

@@ -14,11 +14,34 @@
           <div class="h1-container">
             <h1>Lulu Pier<span class="subtitle">&nbsp;a.k.a. Doggo</span></h1>
           </div>
-          <img src="lulu.webp" alt="Lulu the dog" />
+          <a href="index.html"><img alt="Ted" id="title-img" /></a>
         </div>
         <hr />
-        hello
+        <p>
+          My favorite thing to do is chase tennis balls in the back yard.
+          Sometimes I even catch them mid-air! Close runner-ups are running
+          around at the park, going on walks, and greeting my people when they
+          come home.
+        </p>
+        <img class="media" src="images/lulu2.jpg" alt="Happy Lulu" />
+        <p>
+          All that running is tiring! After a long time outside, I'll go to my
+          perch atop the couch and pant.
+        </p>
+        <img
+          class="media"
+          src="images/lulu-perch.jpg"
+          alt="Lulu perched upon the couch"
+        />
+        <p>
+          Gotta clean off after a long day's work. I'll just use this here
+          towel...
+        </p>
+        <video class="media" controls src="media/lulu-roll.mp4">
+          Lulu rolling around
+        </video>
       </div>
     </div>
+    <script src="lulu.js"></script>
   </body>
 </html>

script.js

@@ -6,7 +6,7 @@ infoContainer.addEventListener("click", loadContactInfo);
 
 function loadContactInfo() {
   infoContainer.innerHTML = atob(
-    "PGRpdj48YSB0YXJnZXQ9Il9ibGFuayIgaHJlZj0iaHR0cHM6Ly9kaXNjb3JkLmNvbS91c2Vycy84MjU0ODcxMzg5NDY1NDc3MTIiPjxpbWcgY2xhc3M9ImJ1bGxldC1pbWciIHNyYz0iZGlzY29yZC5wbmciIGFsdD0iRGlzY29yZCIgLz5taW5pbmd0Y3VwPC9hPjwvZGl2PjxkaXY+PGEgdGFyZ2V0PSJfYmxhbmsiIGhyZWY9Im1haWx0bzp0ZWRAbWluaW5ndGN1cC5tZSI+PGltZyBjbGFzcz0iYnVsbGV0LWltZyIgc3JjPSJwcm90b25tYWlsLnBuZyIgYWx0PSJFbWFpbCIvPnRlZEBtaW5pbmd0Y3VwLm1lPC9hPjwvZGl2PjxkaXY+PGEgdGFyZ2V0PSJfYmxhbmsiIGhyZWY9InRlbDorMS02NTAtNTEyLTk2MzUiPjxpbWcgY2xhc3M9ImJ1bGxldC1pbWciIHNyYz0icGhvbmUud2VicCIgYWx0PSJQaG9uZSIgLz4oNjUwKSA1MTItOTYzNTwvYT48L2Rpdj4=",
+    "PGRpdj48YSB0YXJnZXQ9Il9ibGFuayIgaHJlZj0iaHR0cHM6Ly9kaXNjb3JkLmNvbS91c2Vycy84MjU0ODcxMzg5NDY1NDc3MTIiPjxpbWcgY2xhc3M9ImJ1bGxldC1pbWciIHNyYz0iaW1hZ2VzL2Rpc2NvcmQucG5nIiBhbHQ9IkRpc2NvcmQiIC8+bWluaW5ndGN1cDwvYT48L2Rpdj48ZGl2PjxhIHRhcmdldD0iX2JsYW5rIiBocmVmPSJtYWlsdG86dGVkQG1pbmluZ3RjdXAubWUiPjxpbWcgY2xhc3M9ImJ1bGxldC1pbWciIHNyYz0iaW1hZ2VzL3Byb3Rvbm1haWwucG5nIiBhbHQ9IkVtYWlsIi8+dGVkQG1pbmluZ3RjdXAubWU8L2E+PC9kaXY+PGRpdj48YSB0YXJnZXQ9Il9ibGFuayIgaHJlZj0idGVsOisxLTY1MC01MTItOTYzNSI+PGltZyBjbGFzcz0iYnVsbGV0LWltZyIgc3JjPSJpbWFnZXMvcGhvbmUud2VicCIgYWx0PSJQaG9uZSIgLz4oNjUwKSA1MTItOTYzNTwvYT48L2Rpdj4=",
   );
   infoContainer.classList.remove("cover");
   infoContainer.removeEventListener("mousedown", loadContactInfo);

style.css

@@ -8,6 +8,13 @@
 
 #content {
     max-width: 512px;
+    padding-bottom: 25vh;
+}
+
+.media {
+  max-width: 512px;
+  display: block;
+  margin: 16px 0;
 }
 
 h3 {
@@ -52,10 +59,6 @@ p {
     max-width: 256px;
 }
 
-#content {
-    padding-bottom: 25vh;
-}
-
 .cover {
     cursor: pointer;
     background: light-dark(white, #181825);
@@ -93,6 +96,7 @@ p {
     overflow: hidden;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    background: light-dark(black, whitesmoke);
 }
 
 #title-1 > .h1-container {
@@ -106,12 +110,16 @@ p {
     margin: 0;
 }
 
-#title-1 > img {
+#title-1 > a > img {
     z-index: 0;
     display: block;
     max-height: 71px;
+    min-width: 100%;
+    object-fit: cover;
 }
 
+img {}
+
 .disabled {
     pointer-events: none;
 }