Skip to content
Snippets Groups Projects
Commit 1b47cc0d authored by HauErn Lien's avatar HauErn Lien
Browse files

Update file random.html

parent 9a84fa5b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 217 additions and 2 deletions
wiki/pages/random.html
+ 217
− 2
View file @ 1b47cc0d
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
</html> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
<title>Home | Tsinghua - IGEM 2024</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Baskerville&display=swap');
body {
font-family: Calibri, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://static.igem.wiki/teams/5187/art/bg.png');
background-attachment: fixed;
background-size: cover;
background-position: 90% center;
background-repeat: no-repeat;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 1200px;
margin: 100px auto 0;
min-height: calc(100vh - 210px);
}
#first-block {
margin: 0 0 50vh 0;
width: 80%;
padding: 40px;
background-color: transparent;
box-shadow: none;
text-align: center;
}
#first-block h2, #first-block p {
font-family: Baskerville, 'Baskerville Old Face', serif;
color: #fa8072;
opacity: 0;
transition: opacity 1s ease-in-out;
font-style: italic;
}
#first-block h2 {
font-size: 3rem;
}
#first-block p {
font-size: 1.8rem;
transition-delay: 1s;
}
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader-gif {
width: 150px;
height: 150px;
}
.card-container {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 50px;
}
.card {
width: 100%;
margin-bottom: 30px;
background-color: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.card-content {
display: flex;
align-items: flex-start;
}
.card-image {
width: 200px;
height: 200px;
object-fit: cover;
margin-right: 30px;
}
.card-text {
flex: 1;
padding: 30px 30px 30px 0;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}
.card-description {
font-size: 1.1rem;
color: #666;
max-height: 100px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.card.expanded .card-description {
max-height: 1000px;
}
</style>
</head>
<body>
<div class="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
</div>
{% include 'menu.html' %}
<div class="content-wrapper">
<div id="first-block">
<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 class="card-container">
<div class="card">
<div class="card-content">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="Person 1" class="card-image">
<div class="card-text">
<h3 class="card-title">Overcoming Challenges</h3>
<p class="card-description">Living with IBD presents unique challenges, but with proper care and support, patients can lead fulfilling lives. This story explores the journey of resilience and hope. Through innovative treatments and a strong support network, many individuals have found ways to manage their symptoms and improve their quality of life. From dietary adjustments to stress management techniques, discover the strategies that have helped others navigate the complexities of IBD.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="Person 2" class="card-image">
<div class="card-text">
<h3 class="card-title">Embracing New Normals</h3>
<p class="card-description">Adapting to life with IBD requires patience and understanding. Discover how individuals have found ways to thrive despite their condition. From career adjustments to lifestyle changes, learn about the creative solutions that have helped people with IBD redefine their "normal." This section includes personal stories of triumph, practical tips for daily living, and insights into maintaining relationships while managing IBD.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="Person 3" class="card-image">
<div class="card-text">
<h3 class="card-title">The Power of Community</h3>
<p class="card-description">Connect with others who understand your journey. Learn about support groups and resources available for IBD patients and their families. Discover the benefits of joining an IBD community, from sharing experiences to accessing valuable information. This section highlights various support networks, online forums, and local groups that provide emotional support, practical advice, and a sense of belonging to those affected by IBD.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="Person 4" class="card-image">
<div class="card-text">
<h3 class="card-title">Advances in Treatment</h3>
<p class="card-description">Stay informed about the latest developments in IBD research and treatment options. Hope is on the horizon with new therapies and management strategies. This section covers recent breakthroughs in IBD treatment, including biological therapies, personalized medicine approaches, and ongoing clinical trials. Learn about emerging technologies and how they're shaping the future of IBD care, offering new possibilities for symptom management and improved quality of life.</p>
</div>
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
<script>
window.addEventListener('load', function() {
const loaderContainer = document.querySelector('.loader-container');
setTimeout(function() {
loaderContainer.style.opacity = '0';
loaderContainer.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
loaderContainer.style.display = 'none';
// Start the fade-in effect for the first block
const firstBlockTitle = document.querySelector('#first-block h2');
const firstBlockContent = document.querySelector('#first-block p');
firstBlockTitle.style.opacity = '1';
setTimeout(() => {
firstBlockContent.style.opacity = '1';
}, 1000);
}, 500);
}, 2000);
});
// Add click event listeners to the cards
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', function() {
this.classList.toggle('expanded');
});
});
</script>
</body>
</html>
\ No newline at end of file
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