From dc2834079b1eddecdc21df2a0e889e40f1e008e9 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Tue, 1 Oct 2024 16:29:02 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 35 +++++++++++++++++++++--------------
1 file changed, 21 insertions(+), 14 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 696af90a..2d80b6ea 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -29,7 +29,6 @@
max-width: 1200px;
margin: 100px auto 0;
min-height: calc(100vh - 210px);
- justify-content: center;
}
#first-block {
@@ -38,10 +37,7 @@
padding: 40px;
background-color: transparent;
box-shadow: none;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ text-align: center;
}
#first-block h2, #first-block p {
@@ -49,7 +45,6 @@
color: #fa8072;
opacity: 0;
transition: opacity 1s ease-in-out;
- text-align: center;
font-style: italic;
}
@@ -80,11 +75,15 @@
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
- .card img {
- width: 45%;
+ .card-image {
+ flex: 0 0 45%;
+ margin-right: 20px;
+ }
+
+ .card-image img {
+ width: 100%;
height: auto;
border-radius: 5px;
- margin-right: 20px;
}
.card-content {
@@ -102,7 +101,7 @@
.full-content {
display: none;
- padding-top: 20px;
+ margin-top: 20px;
}
.loader-container {
@@ -139,7 +138,9 @@
</div>
<div class="card">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
+ <div class="card-image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
+ </div>
<div class="card-content">
<h2>A patient's journey through IBD diagnosis and treatment</h2>
<p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer...</p>
@@ -151,7 +152,9 @@
</div>
<div class="card">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
+ <div class="card-image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
+ </div>
<div class="card-content">
<h2>An animation director's struggle with IBD</h2>
<p>My symptoms began in 2017, with stomach cramps that left me too ill to perform every couple of months...</p>
@@ -163,7 +166,9 @@
</div>
<div class="card">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
+ <div class="card-image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
+ </div>
<div class="card-content">
<h2>A fortunate IBD patient's story of remission and personal growth</h2>
<p>I consider myself a fortunate IBD patient, as I've remained in remission. Unlike many others on strict diets...</p>
@@ -176,7 +181,9 @@
</div>
<div class="card">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
+ <div class="card-image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
+ </div>
<div class="card-content">
<h2>A patient battling both IBD and tuberculosis</h2>
<p>What could be worse than having IBD? Having both IBD and tuberculosis...</p>
--
GitLab