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

Update file tryhomepage.html

parent 2df51bd2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
wiki/pages/tryhomepage.html
+ 0
− 123
View file @ 49219f7c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@438&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<title>Tsinghua - IGEM 2024</title>
<style>
h1 {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Caveat", cursive;
font-optical-sizing: auto;
font-weight: 438;
font-style: normal;
}
header{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 80px;
}
header h4 {
position: absolute;
left: 10%;
bottom: 1rem;
font-size: 1.6rem;
}
/* Splash screen */
.intro{
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100vh;
transition: 1s;
background-color: #ffffff;
}
.logo-header{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%, -50%);
color: #161616;
}
.logo{
position: relative;
display: inline-block;
bottom: -20px;
opacity: 0;
}
.logo.active{
bottom: 0;
opacity: 1;
transition: ease-in-out 0.5s;
}
.logo.fade{
bottom: 150px;
opacity: 0;
transition: ease-in-out 0.5s;
}
</style>
</head>
<body>
<div class="intro">
<h1 class="logo-header">
<span class="logo"> Inhale, </span> <span class="logo">heal,</span><span class="logo">repeat.</span>
</h1>
</div>
<header>
<h4>Logo.</h4>
</header>
<script>
let intro = document.querySelector('.intro');
let logo = document.querySelector('.logo-header');
let logoSpan = document.querySelectorAll('.logo');
window.addEventListener('DOMContentLoaded', ()=>{
setTimeout(()=>{
logoSpan.forEach((span, idx)=>{
setTimeout(()=>{
span.classList.add('active');
}, (idx + 1) * 400)
});
setTimeout(()=>{
logoSpan.forEach((span, idx)=>{
setTimeout(()=>{
span.classList.remove('active');
span.classList.add('fade');
}, (idx + 1) * 50)
})
}, 2000);
setTimeout(()=>{
intro.style.top = '-100vh';
}, 2300)
})
})
</script>
</body>
</html>
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