Made card more consistent; Guestbook submits; Web analytics

1 files changed, 36 insertions, 11 deletions

diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index 0827802..0aebd9c 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -4,16 +4,41 @@ import "../styles/cards.css";
 ---
 <Page title="Guestbook" description="Use this page to send me a message">
     <main>
-        <article>
-            <h1>John Doe</h1>
-            <small>January 1, 2024</small>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Nam id orci non diam bibendum euismod quis sit amet purus.
-                Fusce fermentum facilisis placerat. Mauris varius ante elit, et
-                luctus enim blandit sit amet.
-                Pellentesque ullamcorper dapibus suscipit.
-            </p>
-            <a href="http://google.com">Website</a>
-        </article>
+        <form class="card">
+            <h2>Submit Message</h2>
+            <label>
+                Name<br>
+                <input type="text" name="name" placeholder="Name" required />
+            </label>
+            <br>
+            <label>
+                Email Address<br>
+                <input type="email" name="email" placeholder="Email Address (Optional)" />
+            </label>
+            <br>
+            <label>
+                Your Website<br>
+                <input type="url" name="link" placeholder="https://example.com" required />
+            </label>
+            <br>
+            <label>
+                Message<br>
+                <textarea name="message" placeholder="Message" required></textarea>
+            </label>
+            <button type="submit">Send</button>
+        </form>
+        <div class="grid">
+            <article class="card">
+                <h1>John Doe</h1>
+                <small>January 1, 2024</small>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Nam id orci non diam bibendum euismod quis sit amet purus.
+                    Fusce fermentum facilisis placerat. Mauris varius ante elit, et
+                    luctus enim blandit sit amet.
+                    Pellentesque ullamcorper dapibus suscipit.
+                </p>
+                <a href="https://google.com">Website</a>
+            </article>
+        </div>
     </main>
 </Page>