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

Update file home.html

parent d5d3b31e
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment