Applied W95 theme and minor changes
BIN
assets/blobfox-88x31.png
Normal file
After Width: | Height: | Size: 5.1 KiB |
BIN
assets/chrmevil.gif
Normal file
After Width: | Height: | Size: 8.8 KiB |
BIN
assets/fediverse.gif
Normal file
After Width: | Height: | Size: 604 B |
BIN
assets/firefoxnow.gif
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
assets/git_emblem.png
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
assets/hash_now.gif
Normal file
After Width: | Height: | Size: 2 KiB |
BIN
assets/linux.gif
Normal file
After Width: | Height: | Size: 880 B |
BIN
assets/lulu_tinyuniverses_wannachill.gif
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
assets/microsoft_stop.gif
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/scottgames.gif
Normal file
After Width: | Height: | Size: 2.8 KiB |
66
general.css
Normal file
|
@ -0,0 +1,66 @@
|
|||
:root {
|
||||
font-family: w95fa, sans-serif;
|
||||
--bg-color: #008080;
|
||||
--content-bg-color: #f0e9d0;
|
||||
--text-color: #000000;
|
||||
--window-bg-color: #b0aa9b;
|
||||
--light-shade: #ddd4c6;
|
||||
--dark-shade: #747064;
|
||||
--window-deco-color: #00007f;
|
||||
--seperator-color: #979285;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: w95fa;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.cdnfonts.com/s/45697/W95FA.woff);
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background-color: var(--window-deco-color);
|
||||
color: white;
|
||||
font-size: 14pt;
|
||||
padding: .25em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.window {
|
||||
background-color: var(--window-bg-color);
|
||||
border: 3px solid;
|
||||
border-color: var(--light-shade) var(--dark-shade) var(--dark-shade)
|
||||
var(--light-shade);
|
||||
min-height: 5em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 3px solid;
|
||||
border-color: var(--light-shade) var(--dark-shade) var(--dark-shade)
|
||||
var(--light-shade);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.window-content {
|
||||
background-color: var(--content-bg-color);
|
||||
border: 3px solid;
|
||||
border-color: var(--dark-shade) var(--light-shade) var(--light-shade) var(--dark-shade);
|
||||
min-height: 5em;
|
||||
margin: 1em .5em;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--light-shade);
|
||||
}
|
||||
|
||||
.vruler{
|
||||
border-left: 3px solid var(--seperator-color);
|
||||
height: 30px;
|
||||
margin: 0 5px 0 5px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*BODY*/
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
}
|
79
index.html
|
@ -1,8 +1,77 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Liliesh's Homepage</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<head>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="general.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="window">
|
||||
<div class="title-bar">Welcome!</div>
|
||||
<div class="actionbar">
|
||||
<a class="action-button" href="https://liliesh.pinkhaj.world/blog">Blog</a>
|
||||
<div class="vruler"></div>
|
||||
<a class="action-button" href="./links.html">Links</a>
|
||||
</div>
|
||||
<div class="window-content">
|
||||
<h2>About Liliesh</h2>
|
||||
<h5>silly neighborhood goofball</h5>
|
||||
<div class="UwU">
|
||||
<h3>About Me</h3>
|
||||
<ul>
|
||||
<li><b>Name:</b> Maya</li>
|
||||
<li><b>Age:</b> 23</li>
|
||||
<li><b>Pronouns:</b> she/her</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
<h3>Interests</h3>
|
||||
<ul>
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>Reading & Fanfics</b></td>
|
||||
<td>>> currently a lot of webcomics (e.g Sabrina Online, Nine to Nine)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Gaming</b></td>
|
||||
<td>>> mostly sandbox and story based</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Sysadministration</b></td>
|
||||
<td>>> mostly setting up services in my homelab and checking out new software</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Software development</b></td>
|
||||
<td>>> doing silly stuff or developing solutions that I need</td>
|
||||
</tr>
|
||||
</table>
|
||||
</ul>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="socials">
|
||||
<a class="social button" href="https://wetdry.world/@techfoxxo"><img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Fediverse_logo_proposal.svg/2048px-Fediverse_logo_proposal.svg.png"></a>
|
||||
<a class="social button" href="https://matrix.to/#/@liliesh:catgirl.cloud"><img id="matrix-logo"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Matrix_icon.svg/419px-Matrix_icon.svg.png"></a>
|
||||
<a class="social button" href="https://git.pinkhaj.world/liliesh"><img
|
||||
src="assets/git_emblem.png"></a>
|
||||
</div>
|
||||
<div class="socials">
|
||||
<img class="specials" src="assets/blobfox-88x31.png"></a>
|
||||
<img class="specials" src="assets/chrmevil.gif"></a>
|
||||
<img class="specials" src="assets/fediverse.gif"></a>
|
||||
<img class="specials" src="assets/firefoxnow.gif"></a>
|
||||
<img class="specials" src="assets/hash_now.gif"></a>
|
||||
<img class="specials" src="assets/linux.gif"></a>
|
||||
<img class="specials" src="assets/lulu_tinyuniverses_wannachill.gif"></a>
|
||||
<img class="specials" src="assets/microsoft_stop.gif"></a>
|
||||
<img class="specials" src="assets/scottgames.gif"></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
</footer>
|
||||
|
||||
</html>
|
72
main.css
Normal file
|
@ -0,0 +1,72 @@
|
|||
/*UwU*/
|
||||
.UwU {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: auto auto 0 auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: auto auto 0 auto;
|
||||
}
|
||||
|
||||
li p {
|
||||
margin: 0.2em 0 0.2em 0;
|
||||
}
|
||||
|
||||
/*FOOTER*/
|
||||
h2,
|
||||
h5 {
|
||||
text-align: center;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a img {
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
.social {
|
||||
margin: 5px;
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#matrix-logo {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.actionbar {
|
||||
margin: 1em;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 2px 10px 2px 10px;
|
||||
border: 3px solid transparent;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
border: 3px solid;
|
||||
border-color: var(--light-shade) var(--dark-shade) var(--dark-shade)
|
||||
var(--light-shade);
|
||||
}
|
||||
|
||||
/*SPECIALS*/
|
||||
.specials {
|
||||
margin: 0.2em;
|
||||
}
|