From 74814ff7cbd939f5285bcccf0e67022849bfcdf2 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Tue, 24 Sep 2024 12:03:57 +0000
Subject: [PATCH] Update file team.html
---
wiki/pages/team.html | 208 +++++++++++++++++++------------------------
1 file changed, 94 insertions(+), 114 deletions(-)
diff --git a/wiki/pages/team.html b/wiki/pages/team.html
index 54e28680..524a55ff 100644
--- a/wiki/pages/team.html
+++ b/wiki/pages/team.html
@@ -1,92 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tsinghua - IGEM 2024</title>
<link rel="icon" type="image/png" href="https://static.igem.wiki/teams/5187/art/icon1.png" sizes="364x370">
<style>
- .team-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 3px; /* Reduced from the previous value to bring frames closer */
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.team-member {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
-}
-
-.image-container, .image-placeholder {
- width: 300px; /* Kept original size */
- height: 300px; /* Kept original size */
- overflow: hidden;
- margin-bottom: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 20px;
-}
-
-.image-container img {
- max-width: 100%;
- max-height: 100%;
- object-fit: cover;
-}
-
-.image-placeholder {
- background-color: #000;
-}
-
-.text-area {
- width: 350px; /* Kept original size */
- min-height: 100px; /* Kept original size */
- border: 1px solid #ccc;
- padding: 10px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border-radius: 20px;
-}
-
-.text-area .name {
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 10px;
-}
-
-.text-area .bio {
- font-size: 14px;
- text-align: center;
-}
-
-@media (max-width: 768px) {
.team-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 10px;
+ max-width: 1200px;
+ margin: 0 auto;
+ justify-content: center;
+ }
+
+ .team-member {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .image-container, .image-placeholder {
+ width: 280px;
+ height: 280px;
+ overflow: hidden;
+ margin-bottom: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 20px;
+ }
+
+ .image-container img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .image-placeholder {
+ background-color: #000;
+ }
+
+ .text-area {
+ width: 280px;
+ height: 40px;
+ background-color: #fa8072;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 20px;
+ }
+
+ .text-area .name {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ @media (max-width: 940px) {
+ .team-grid {
grid-template-columns: repeat(2, 1fr);
- gap: 15px; /* Slightly reduced gap for tablet view */
+ }
}
-}
-@media (max-width: 480px) {
- .team-grid {
+ @media (max-width: 620px) {
+ .team-grid {
grid-template-columns: 1fr;
- gap: 10px; /* Further reduced gap for mobile view */
+ }
}
-}
-
</style>
</head>
+<body>
+
{% extends "layout.html" %}
{% block title %}
Meet Our Team Members
{% endblock %}
-
{% block page_content %}
<div style="text-align: center;">
@@ -94,148 +88,134 @@ Meet Our Team Members
</div>
<div class="team-grid">
-
<div class="team-member">
- <div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/chr.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center" alt="chr">
+ <div class="image-container">
+ <img src="https://static.igem.wiki/teams/5187/teammembers/chr.jpg" alt="chr">
+ </div>
+ <div class="text-area">
+ <div class="name">HaoRan Chang</div>
</div>
- <div class="text-area">
- <div class="name">HaoRan Chang</div>
- <div class="bio">brabrabra......</div>
- </div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/cjh.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center;" alt="cjh">
+ <img src="https://static.igem.wiki/teams/5187/teammembers/cjh.jpg" alt="cjh">
</div>
<div class="text-area">
<div class="name">JiaHui Chen</div>
- <div class="bio">brabrabra......</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/lzf.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center" alt="lzf">
- </div>
+ <img src="https://static.igem.wiki/teams/5187/teammembers/lzf.jpg" alt="lzf">
+ </div>
<div class="text-area">
<div class="name">ZheFu Li</div>
- <div class="bio">brabrabra......</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/xwh.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center" alt="xwh">
- </div>
+ <img src="https://static.igem.wiki/teams/5187/teammembers/xwh.jpg" alt="xwh">
+ </div>
<div class="text-area">
- <div class="name">WeiHan Xiao</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">WeiHan Xiao</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/wym.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center" alt="wym">
+ <img src="https://static.igem.wiki/teams/5187/teammembers/wym.jpg" alt="wym">
</div>
<div class="text-area">
- <div class="name">YiMing Wang</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">YiMing Wang</div>
</div>
</div>
<div class="team-member">
<div class="image-placeholder"></div>
<div class="text-area">
- <div class="name">YuHang Shen</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">YuHang Shen</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/lhe.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: 50% 40%;" alt="lhe">
- </div>
+ <img src="https://static.igem.wiki/teams/5187/teammembers/lhe.jpg" alt="lhe">
+ </div>
<div class="text-area">
- <div class="name">GaoEn Lian</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">GaoEn Lian</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/cht.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center" alt="cht">
+ <img src="https://static.igem.wiki/teams/5187/teammembers/cht.jpg" alt="cht">
</div>
<div class="text-area">
<div class="name">HouTeng Chan</div>
- <div class="bio">brabrabra......</div>
</div>
</div>
<div class="team-member">
<div class="image-placeholder"></div>
<div class="text-area">
- <div class="name">YuHan Xie</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">YuHan Xie</div>
</div>
</div>
<div class="team-member">
<div class="image-placeholder"></div>
<div class="text-area">
- <div class="name">WeiHan Xiao</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">WeiHan Xiao</div>
</div>
</div>
<div class="team-member">
<div class="image-placeholder"></div>
<div class="text-area">
- <div class="name">YunBing Wu</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">YunBing Wu</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/xialin-xl.jpg" style="height: 300px; width: 300px; border-radius: 30px; object-fit: cover; object-position: center center" alt="xl">
-</div>
+ <img src="https://static.igem.wiki/teams/5187/teammembers/xialin-xl.jpg" alt="xl">
+ </div>
<div class="text-area">
- <div class="name">Chalen Wakim</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">Chalen Wakim</div>
</div>
</div>
<div class="team-member">
<div class="image-placeholder"></div>
<div class="text-area">
- <div class="name">ZhouYuan Ji</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">ZhouYuan Ji</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/fcq.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: 50% 40%;" alt="fcq">
+ <img src="https://static.igem.wiki/teams/5187/teammembers/fcq.jpg" alt="fcq">
</div>
<div class="text-area">
- <div class="name">ChangQi Fan</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">ChangQi Fan</div>
</div>
</div>
<div class="team-member">
<div class="image-container">
- <img src="https://static.igem.wiki/teams/5187/teammembers/lzy.jpg" style= "height: 300px; width: 300px;border-radius: 30px; object-position: top center" alt="lzy">
+ <img src="https://static.igem.wiki/teams/5187/teammembers/lzy.jpg" alt="lzy">
</div>
<div class="text-area">
- <div class="name">ZiYue Li</div>
- <div class="bio">brabrabra......</div>
+ <div class="name">ZiYue Li</div>
</div>
</div>
</div>
-
{% endblock %}
+</body>
+</html>
+
--
GitLab