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

Update file home.html

parent aa7af72f
No related branches found
No related tags found
Hide whitespace changes
Inline Side-by-side
Showing
with 110 additions and 0 deletions
wiki/pages/home.html
+ 110
− 0
View file @ f96da5b6
......@@ -45,6 +45,69 @@
.content-block:nth-child(even) .content {
flex-direction: row-reverse;
}
/* Footer styles */
.follow-us-wrapper {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.follow-us {
width: 30px;
height: auto;
filter: grayscale(100%) brightness(0);
}
.contact-info {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.contact-column {
padding-top: 15px;
}
.contact-icon {
width: 20px;
height: 20px;
margin-right: 10px;
}
.footer-content {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.social-column, .logo-column, .contact-column {
flex: 0 0 auto;
}
.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;
}
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
align-items: center;
}
.follow-us-wrapper {
justify-content: center;
}
}
</style>
</head>
<body>
......@@ -114,7 +177,54 @@
</div>
</div>
<!-- Footer -->
<footer class="pb-2 pt-2 mt-5 footer text-center" style="background-color: #ffe4e1">
<div class="container">
<div class="footer-content">
<div class="social-column">
<div class="follow-us-wrapper">
<a href="https://www.instagram.com/igem_tsinghua2024?igsh=MTY4d3EzMGtwZjg3ZA==">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-instagram.svg" alt="Instagram">
</a>
<a href="https://www.youtube.com/@igemtsinghua2024?si=nrNZ1XaRee_rAYYn">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-youtube.svg" alt="Youtube">
</a>
<div class="wechat-container">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/wechat.png" alt="Wechat">
<div class="wechat-qr">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/wechat-code.png" alt="WeChat QR Code" width="250" height="250">
</div>
</div>
<a href="https://b23.tv/xvsnyxK">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-bilibili.svg" alt="BiliBili">
</a>
</div>
</div>
<div class="contact-column">
<div class="contact-info">
<img class="contact-icon" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/location.png" alt="Location">
<p class="mb-0"><small>Tsinghua University, Hai Dian, Beijing</small></p>
</div>
<div class="contact-info">
<img class="contact-icon" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/phone.png" alt="Phone">
<p class="mb-0"><small>+86 12345678900</small></p>
</div>
<div class="contact-info">
<img class="contact-icon" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/email.png" alt="Email">
<p class="mb-0"><small>igemtsinghua2024@gmail.com</small></p>
</div>
</div>
</div>
<hr>
<div class="row justify-content-center mt-4">
<div class="col">
<p class="mb-0 text-center"><small>© 2024 - Content on this site is licensed under a <a class="subfoot" href="https://creativecommons.org/licenses/by/4.0/" style="color: black;" rel="license">Creative Commons Attribution 4.0 International license</a>.</small></p>
<p class="text-center"><small>The repository used to create this website is available at <a href="https://gitlab.igem.org/2024/tsinghua" style="color: black;">gitlab.igem.org/2024/tsinghua</a>.</small></p>
</div>
</div>
</div>
</footer>
<script>
const blocks = document.querySelectorAll('.content-block');
......
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