Skip to content
Snippets Groups Projects
Commit 74814ff7 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file team.html

parent 20699805
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 94 additions and 114 deletions
wiki/pages/team.html
+ 94
− 114
View file @ 74814ff7
<!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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment