From 90fbe1b9924e6c85b34c0fce312af9342a436f99 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Thu, 26 Sep 2024 14:43:38 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 80 +++++++++++++++++++++++---------------------
1 file changed, 41 insertions(+), 39 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index a75a3d72..a14d834f 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -8,6 +8,8 @@
<style>
body, html {
scroll-behavior: smooth;
+ margin: 0;
+ padding: 0;
}
#menu {
position: fixed;
@@ -24,9 +26,11 @@
.content-block {
min-height: 100vh;
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.5s;
+ padding: 20px;
}
.content {
display: flex;
@@ -34,9 +38,11 @@
justify-content: space-between;
width: 80%;
max-width: 1200px;
+ flex-wrap: wrap;
}
.text, .image {
- flex: 1;
+ flex: 1 1 45%;
+ margin: 10px;
}
img {
max-width: 100%;
@@ -52,6 +58,7 @@
}
.footer-content {
display: flex;
+ flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 1200px;
@@ -99,32 +106,12 @@
.subfoot {
text-decoration: underline;
}
-
- .wechat-container {
- position: relative;
- display: inline-block;
- }
- .wechat-qr {
- display: none;
- position: absolute;
- bottom: 100%;
- left: 50%;
- transform: translateX(-50%);
- padding: 10px;
- background-color: white;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
- }
- .wechat-container:hover .wechat-qr {
- display: block;
- }
.contact-info .contact-item span {
- font-size: 13px;
+ font-size: 13px;
}
-
- .content-block-text-only {
+ .content-block-text-only .content {
+ display: block;
text-align: center;
- padding: 50px;
}
.content-block-text-only h2 {
margin-bottom: 20px;
@@ -132,16 +119,28 @@
.top-text {
text-align: center;
padding: 20px 0;
+ width: 80%;
+ max-width: 800px;
}
- .image-only {
+ .image-only .content {
display: flex;
justify-content: center;
align-items: center;
- width: 800px;
- height: 800px;
}
-
+ .image-only img {
+ width: 80%;
+ max-width: 800px;
+ }
+ @media (max-width: 768px) {
+ .text, .image {
+ flex-basis: 100%;
+ }
+ .content {
+ flex-direction: column;
+ }
+ }
</style>
+
</head>
<body>
<div id="menu">
@@ -154,24 +153,27 @@
</div>
<div class="content-wrapper">
+ <!-- Content Blocks Start -->
+ <!-- Example of a Text-Only Content Block -->
<div class="content-block content-block-text-only" id="block1">
<div class="content">
- <h2>Do you regret of not giving your fullest?</h2>
+ <h2>Do you regret not giving your fullest?</h2>
<p>Everyone gets sick from time to time, often returning to their normal routines within days. But what if you're an IBD patient? Can life ever truly feel normal again? While IBD may not be fatal, it can gradually consume every facet of your existence. With constant hospital visits, unpredictable cramps, and the toll of immune attacks, you find yourself living—but not truly alive.</p>
</div>
</div>
- <div class="content-block" id="block2">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
- </div>
- <div class="text">
- <p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer. I underwent several small intestine resections, ultimately becoming a short bowel patient. Throughout my journey, I lost many friends to this disease and feared I would be next. I waited patiently for the first doctor to investigate IBD, hoping for the arrival of monoclonal antibodies, believing that perhaps a panacea was just around the corner.</p>
- <p>To survive, I needed to earn a living, but many of us face rejection in the workforce. With a lifelong illness to manage, who will cover the costs? I find myself signing disclaimer agreements before employment, limited to freelance work. The uncertainty weighs heavily on me; I never know when an acute phase might strike. Meanwhile, my friends in rural areas have had to stop their medication due to financial constraints, and I fear I may face the same fate.</p>
- </div>
+ <!-- Content Block with Image and Text -->
+ <div class="content-block" id="block2">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
+ </div>
+ <div class="text">
+ <p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer. I underwent several small intestine resections, ultimately becoming a short bowel patient...</p>
+ <!-- Additional paragraphs as needed -->
</div>
</div>
+ </div>
<div class="content-block" id="block3">
<div class="content">
@@ -226,7 +228,7 @@
<div class="content-block image-only" id="block7">
<div class="content">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic6.png" alt="Centered Image" ">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic6.png" alt="Centered Image">
</div>
</div>
--
GitLab