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

Update file footer.html

parent 2fc38f22
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 40 additions and 79 deletions
wiki/footer.html
+ 40
− 79
View file @ e5ea0f70
......@@ -3,12 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer with WeChat QR Code, Logo, Vines and Roses</title>
<title>Footer with WeChat QR Code and Logo</title>
<style>
body {
margin: 0;
padding: 0;
}
.follow-us-wrapper {
display: flex;
justify-content: flex-end;
......@@ -61,39 +57,6 @@
display: block;
}
/* New styles for vines and roses */
.footer-wrapper {
position: relative;
padding: 20px 0;
overflow: hidden;
}
.footer-wrapper::before,
.footer-wrapper::after {
content: '';
position: absolute;
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: cover;
}
.footer-wrapper::before {
top: 0;
left: 0;
background-image: url('https://static.igem.wiki/teams/5187/art/footer-rose1.png');
transform: scaleX(-1);
}
.footer-wrapper::after {
bottom: 0;
right: 0;
background-image: url('https://static.igem.wiki/teams/5187/art/footer-rose2.png');
}
footer {
background-color: #ffe4e1;
border-radius: 50px;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
......@@ -106,54 +69,52 @@
</style>
</head>
<body>
<div class="footer-wrapper">
<footer class="pb-2 pt-2 mt-5 footer text-center">
<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>
<footer class="pb-2 pt-2 mt-5 footer text-center" style="background-color: #ffe4e1; box-shadow: 0 0 20px 10px #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>
<a href="https://b23.tv/FxdqrK7">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-bilibili.svg" alt="BiliBili">
</a>
</div>
<a href="https://b23.tv/FxdqrK7">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-bilibili.svg" alt="BiliBili">
</a>
</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 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>
<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>
</footer>
</div>
</div>
</footer>
</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