z / alex
96 lines
2.5 KiB
HTML
96 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<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=IBM+Plex+Sans&display=swap" rel="stylesheet">
|
|
|
|
<meta name="og:url" content="https://thatalex.dev" />
|
|
<meta name="og:description" content="welcome to my portfolio website! well.. kinda. it's being rewritten, so it's a little bland here right now.." />
|
|
<link rel="alternate" type="application/json+oembed" href="/static/oembed.json">
|
|
|
|
<title>alex</title>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<span class="header animation">
|
|
<h1>hey hey! little bland 'round here, eh?</h1>
|
|
</span>
|
|
<span class="content animation">
|
|
<p>yeah, i know. i'm scared too.
|
|
<br />
|
|
well, i'm reworking this website, so it'll be pretty when i'm done at least?
|
|
</p>
|
|
</span>
|
|
<span class="content2 animation">
|
|
<p>uhhh, you're still here? well.. i don't know what you're doing here.</p>
|
|
</span>
|
|
<span class="content3 animation">
|
|
<p>okay seriously. what? can you like, leave?</p>
|
|
</span>
|
|
<span class="content4 animation">
|
|
<p>I ASKED CAN YOU LEAVE??????</p>
|
|
</span>
|
|
</div>
|
|
|
|
<script src="static/js/haha.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
background-color:black;
|
|
text-align:center;
|
|
transform:translateY(30vh);
|
|
}
|
|
|
|
p {
|
|
font-size:25px;
|
|
}
|
|
|
|
#container {
|
|
color:white;
|
|
}
|
|
|
|
.animation {
|
|
animation-name: fade1;
|
|
animation-fill-mode:forwards;
|
|
opacity:0;
|
|
animation-duration:3s;
|
|
}
|
|
|
|
.header {
|
|
animation-name: fade1;
|
|
}
|
|
|
|
.content {
|
|
animation-name: fade1;
|
|
animation-delay:5s;
|
|
}
|
|
|
|
.content2 {
|
|
animation-name: fade1;
|
|
animation-delay:60s;
|
|
}
|
|
|
|
.content3 {
|
|
animation-name: fade1;
|
|
animation-delay:120s;
|
|
}
|
|
|
|
.content4 {
|
|
animation-name: fade1;
|
|
animation-duration:3s;
|
|
animation-delay:180s;
|
|
}
|
|
|
|
@keyframes fade1 {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
</style> |