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

Update file home.html

parent 6b549223
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 32 deletions
wiki/pages/home.html
+ 116
− 32
View file @ 8ad843c4
......@@ -5,28 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://static.igem.wiki/teams/5187/art/icon1.png" sizes="364x370">
<title>Tsinghua - IGEM 2024</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h2 {
scroll-margin-top: 60px;
}
.row.mt-4 {
margin-right: 100px;
margin-left: 130px;
}
</style>
<style>
body, html {
scroll-behavior: smooth;
......@@ -67,14 +45,76 @@
.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;
}
.footer-text {
text-align: center;
}
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
align-items: center;
}
.follow-us-wrapper {
justify-content: center;
}
}
</style>
</head>
<body>
{% extends "layout.html" %}
{% block page_content %}
<div id="menu">
{% include 'menu.html' %}
</div>
......@@ -140,8 +180,55 @@
</div>
</div>
</div>
{% include 'footer.html' %}
<script>
<!-- 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="footer-text">
<p class="mb-0"><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><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>
</footer>
<script>
const blocks = document.querySelectorAll('.content-block');
const menu = document.getElementById('menu');
const colors = {
......@@ -217,8 +304,5 @@
window.addEventListener('resize', updateColors);
updateColors();
</script>
</body>
</html>
{% endblock %}
\ No newline at end of file
</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