From fc6bb51ccb39195ada88938332bfd184d0f1f549 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Sun, 9 Feb 2025 00:10:01 -0500
Subject: [PATCH] adding and styling though bubbles add placeholder thought
 bubble to index.html style appropriately to be in right place over baxter's
 head further work will be done in javascript

---
 valentines-day-25/index.html      |  9 ++++++++-
 valentines-day-25/style/style.css | 15 +++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/valentines-day-25/index.html b/valentines-day-25/index.html
index 6e9d963..a8928fd 100644
--- a/valentines-day-25/index.html
+++ b/valentines-day-25/index.html
@@ -41,11 +41,18 @@
             </div>
 
             <div class="items">
+                <img class="baxter-thought"
+                    src="./img/baxter-thoughts/baxter-thought-one.webp"
+                    alt="a thought bubble symbolizing baxter's 
+                    reaction to a head scrath"
+                    width="100" height="100"
+                >
+
                 <div class="headpats"></div>
                 <img class="baxter" src="./img/baxter.webp"
-                     alt="a picture of my cat baxter that can be petted"
                      height="300" width="300"
                 >
+
                 <img class="trans-pride-heart"
                      src="./img/transgender-pride-flag.svg"
                      alt="the trans pride flag"
diff --git a/valentines-day-25/style/style.css b/valentines-day-25/style/style.css
index 22bfd10..888592b 100644
--- a/valentines-day-25/style/style.css
+++ b/valentines-day-25/style/style.css
@@ -197,15 +197,15 @@ section {
 }
 
 .items {
-    margin-top: 3rem;
     display: flex;
     flex-direction: column;
-    gap: 4rem;
 }
 
 .baxter {
     width: 300px;
     height: auto;
+    position: absolute;
+    top: 20%;
     z-index: 1;
 }
 
@@ -219,6 +219,16 @@ section {
     z-index: 2;
 }
 
+.baxter-thought {
+    position: relative;
+    top: -2%;
+    left: 85%;
+    width: 20%;
+    height: 20%;
+    width: 150px;
+    height: 125px;
+}
+
 .trans-pride-heart {
     width: 200px;
     aspect-ratio: 1;
@@ -229,6 +239,7 @@ section {
     linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
     clip-path: polygon(-41% 0,50% 91%, 141% 0);
     position: relative;
+    top: 40%;
     left: 15%;
     transform: rotate(-15deg);
 }
\ No newline at end of file