Add: PI and photos

Author: marcos0318

.hugo_build.lock

@@ -0,0 +1,102 @@
++++
+date = '2024-11-05T23:20:59+08:00'
+draft = true
+title = ''
+featured_image= 'images/image.jpeg'
++++
+
+# Principle Investigators
+
+<style>
+    
+        .info-card {
+            width: 300px;
+            height: 575px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            font-family: Arial, sans-serif;
+        }
+        .info-card img {
+            width: 100%;
+            height: 400px;
+            object-fit: cover;
+       
+
+            
+        }
+        .info-card .content {
+            padding: 16px;
+        }
+        .info-card .name {
+            font-size: 1.3em;
+            margin: 8px 0;
+        }
+        .info-card .title {
+            font-size: 0.9em;
+            color: #555;
+        }
+        .card-container {
+            justify-content: center;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 80px;
+            padding:50px;
+            width: 80%;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+            transform: translateX(20px); /* Adjust the value to move right */
+            
+        }
+        
+</style>
+
+
+     
+<div class="card-container">
+
+<div class="info-card">
+    <img src="images/yangqiusong.jpg" alt="Profile Photo">
+    <div class="content">
+        <div class="name">Yangqiu Song</div>
+        <div class="title">Associate Professor</div>
+        <div class="title">HKUST</div>
+    </div>
+</div>
+
+<div class="info-card">
+    <img src="images/weiwang.jpeg" alt="Profile Photo">
+    <div class="content">
+        <div class="name">Wei Wang</div>
+        <div class="title">Associate Professor</div>
+        <div class="title">HKUST</div>
+    </div>
+</div>
+
+<div class="info-card">
+    <img src="images/leichen.jpg" alt="Profile Photo">
+    <div class="content">
+        <div class="name">Lei Chen</div>
+        <div class="title">Chair Professor</div>
+        <div class="title">HKUST</div>
+    </div>
+</div>
+
+<div class="info-card">
+    <img src="images/xiaofangzhou.jpg" alt="Profile Photo">
+    <div class="content">
+        <div class="name">Xiaofang Zhou</div>
+        <div class="title">Otto Poon Professor of Engineering and Chair Professor</div>
+        <div class="title">HKUST</div>
+    </div>
+</div>
+
+
+
+
+</div>
+
+#