commit
25320b7f03
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Elnu's Homepage</title>
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://matomo.elnu.com/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<h1 class="title">Elnu's Homepage </h1>
|
||||
<div id="main">
|
||||
<div>
|
||||
<p><b>Hello!</b> I'm Elnu. I enjoy programming, watching anime, studying Japanese, drawing (though I suck at it).</p>
|
||||
<p>I don't have anything noteworthy to put on this page at the moment, but please check out some of my projects on the right!</p>
|
||||
<p>Feel free to contact me through Discord.</p>
|
||||
<p>Have a nice day, and good luck!</p>
|
||||
</div>
|
||||
<div>
|
||||
<a class="card" href="https://soundcloud.com/melodyfox">
|
||||
<h3>melodyfox</h3>
|
||||
<p>My SoundCloud. I post my music here.</p>
|
||||
</a>
|
||||
<a class="card" href="https://tegakituesday.com">
|
||||
<h3>Tegaki Tuesday</h3>
|
||||
<p>A weekly Japanese/English handwriting challenge.</p>
|
||||
</a>
|
||||
<small>More coming soon™! (*￣▽￣)b</small>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="socials">
|
||||
<a href="https://anilist.co/user/Elnu/" title="AniList" target="_blank"><img src="anilist.svg" alt="AniList"></a>
|
||||
<a href="https://discord.com/users/441283734214279178" title="Discord" target="_blank"><img src="discord.svg" alt="Discord"></a>
|
||||
<a href="https://github.com/ElnuDev" title="GitHub" target="_blank"><img src="github.svg" alt="GitHub"></a>
|
||||
</div>
|
||||
<footer>Copyright © 2022 Elnu's Homepage. All rights reserved.</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,113 @@
|
||||
body {
|
||||
background: #2e3440;
|
||||
text-shadow: 0 1.5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#content {
|
||||
width: min(100%, 48em);
|
||||
margin: auto;
|
||||
margin-top: 4em;
|
||||
background: #3b4252;
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
color: #e5e9f0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #eceff4;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
border-bottom: 2px solid #434c5e;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.card > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card:nth-of-type(4n + 1) {
|
||||
background: #8fbcbb;
|
||||
}
|
||||
|
||||
.card:nth-of-type(4n + 2) {
|
||||
background: #88c0d0;
|
||||
}
|
||||
|
||||
.card:nth-of-type(4n + 3) {
|
||||
background: #81a1c1;
|
||||
}
|
||||
|
||||
.card:nth-of-type(4n) {
|
||||
background: #5e81ac;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#main > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.socials img {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.socials > * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border-radius: 100%;
|
||||
background: #4c566a;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#content, .socials > *, .card {
|
||||
box-shadow: 0 4px rgba(0, 0, 0, 0.06125);
|
||||
}
|
||||
|
||||
.socials > *:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px rgba(0, 0, 0, 0.030625);
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 0.5em;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
text-align: center;
|
||||
font-size: 0.825em;
|
||||
}
|
||||
Loading…
Reference in new issue