work on people

Author: clewis7

images/kushal.jpg

@@ -21,9 +21,23 @@
           <a href="sponsors.html">Sponsors</a>
         </nav>
 
-        <header class="other">
-          <h1>People</h1>
-        </header>
+        <div class="image-row">
+          <div class="image-item">
+            <img src="/images/kushal.jpg" alt="Image 1" />
+            <p class="caption">
+              <b>Kushal Kolar</b> <br />
+              PhD Candidate <br />
+              NYU Williams Lab
+            </p>
+          </div>
+
+          <div class="image-item">
+            <img src="images/logo_face.png" alt="Image 2" />
+            <p class="caption">
+              This is centered text under the second image. Same behavior here.
+            </p>
+          </div>
+        </div>
       </main>
 
       <footer class="footer">

people.html

@@ -27,7 +27,7 @@
 
         <header class="site-header">
           <h1>
-            We would like to thank the institutions who have been involved with
+            We would like to thank the institutions that have been involved with
             <br />
             fastplotlib over the past few years.
           </h1>

sponsors.html

@@ -34,17 +34,6 @@ main .title {
   margin-top: 1.2rem;
 }
 
-.other h1 {
-  font-family: "Times New Roman", Times, serif;
-  font-size: 3.5rem;
-  font-weight: 500;
-  margin: 0;
-  line-height: 1.1;
-  margin-left: 1rem;
-  margin-top: 2rem;
-  text-align: center;
-}
-
 /* Footer */
 .footer {
   background-color: #e9e9e9;
@@ -138,3 +127,38 @@ main .quad-text {
   /* color: #444; */
   text-align: left;
 }
+
+/* People page */
+.image-row {
+  display: flex;
+  justify-content: center; /* centers images as a group */
+  align-items: flex-start;
+  gap: 40px;
+  margin: 40px auto; /* <-- THIS is the key */
+  width: 100%;
+}
+
+.image-row image-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center; /* ensures text is centered */
+  width: fit-content;
+}
+
+.image-item img {
+  width: 180px; /* ← change this number */
+  height: auto;
+}
+
+.image-item .caption {
+  width: 100%; /* match the image width (since parent shrink-wraps) */
+  text-align: center;
+  margin: 10px 0 0;
+}