changed php links for me

backplaces/css/style_index.css

@@ -1,7 +1,11 @@
 body {
   background-color: rgb(53, 67, 196);
-  min-height: 100vH;
+  min-height: 100vh;
   font-family: 'Redaction-Regular', serif;
+  padding: 0.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .container {
@@ -39,33 +43,52 @@ body {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  padding: 20px;
+  align-items: center;
 }
 
-.photos, img {
+.img-container {
-  height: 250px;
+  flex: 0 0 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin: 10px;
-  margin-top: 10px;
+  text-decoration: none;
-  flex: auto;
 }
 
-.img-container {
+.img-container:nth-child(2) {
-  position: relative;
+  order: 3;
-  margin: 10px;
 }
 
-.img-container img {
+.img {
-  display: block;
+  height: 250px;
+  width: auto;
 }
 
-.img-container .caption {
+.caption {
-  position: absolute;
+  display: flex;
-  left: 0;
+  align-items: center;
-  width: 100%;
+  justify-content: center;
-  text-align: center;
+  padding-top: 1rem;
+  font-size: 2rem;
+  font-family: 'Redaction-Regular';
   color: #FCF6F1ff;
-  font-size: 1.5rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.img-container:hover .caption {
+  opacity: 1;
+}
+
+
+.caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1rem;
+  font-size: 2rem;
   font-family: 'Redaction-Regular';
+  color: #FCF6F1ff;
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -74,8 +97,25 @@ body {
   opacity: 1;
 }
 
+/* Ensures the second image is vertically aligned */
 .img2 {
-  margin-top: 250px;
+  margin-top: 10px;
+}
+
+.caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1rem;
+  font-size: 2rem;
+  font-family: 'Redaction-Regular';
+  color: #FCF6F1ff;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.img-container:hover .caption {
+  opacity: 1;
 }
 
 .letterBox {

backplaces/index.html

@@ -25,18 +25,18 @@
     <div class="subtitle">a play by ada</div>
 
     <div class="photos">
-      <div class="img-container">
+      <a href="sunrise/sunrise.html" class="img-container">
-        <a href="sunrise/sunrise.html"><img src="./photos/sunrise.webp" class="img1"></a>
+        <img src="./photos/sunrise.webp" class="img" alt="Sunrise">
         <div class="caption">act one</div>
-      </div>
+      </a>
-      <div class="img-container">
+      <a href="hermit/hermit.html" class="img-container">
-        <a href="hermit/hermit.html"><img src="./photos/hand.webp" class="img2"></a>
+        <img src="./photos/hand.webp" class="img" alt="Hand">
         <div class="caption">act two</div>
-      </div>
+      </a>
-      <div class="img-container">
+      <a href="pie/pie.html" class="img-container">
-        <a href="pie/pie.html"><img src="./photos/pie.webp" class="img3"></a>
+        <img src="./photos/pie.webp" class="img" alt="Pie">
         <div class="caption">act three</div>
-      </div>
+      </a>
     </div>
 
 

backplaces/sunrise/sunrise.js

@@ -34,7 +34,7 @@ getdata();
 //write
 
 async function writeData(post_number){
-    var url = 'write.php?post='+ post_number;
+    var url = './write.php?post='+ post_number;
     let response = await fetch(url);
     console.log(response);
     console.log(response.text());
@@ -62,7 +62,7 @@ async function writePost(){
     var post = document.getElementById('username2').value;
     var name = document.getElementById('user-message2').value;
     console.log(post,name);
-    var url = 'writepost.php?post='+ post + '&name=' + name;
+    var url = './writepost.php?post='+ post + '&name=' + name;
     let response = await fetch(url);
     console.log(response);
     console.log(response.text());