Add files via upload
This commit is contained in:
parent
414aba044d
commit
a880bbd62e
8 changed files with 205 additions and 0 deletions
BIN
cat.gif
Normal file
BIN
cat.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 562 KiB |
BIN
clouds.gif
Normal file
BIN
clouds.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.4 MiB |
76
index.html
Normal file
76
index.html
Normal file
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>~/startpage</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="left-container">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body onLoad='getDate()' style="text-align: center">
|
||||||
|
|
||||||
|
<h1 id="Date"></h1>
|
||||||
|
|
||||||
|
<div class="gif">
|
||||||
|
<img class='vapor' src="clouds.gif" width="450px" height="400px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-container">
|
||||||
|
<div class="head">
|
||||||
|
<p>> cd ~/<span class="blinking">_</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bookmarks">
|
||||||
|
<div class="category">
|
||||||
|
<div class="links">
|
||||||
|
<li class="title">daily</li>
|
||||||
|
<li><a href="https://gmail.com">gmail</a></li>
|
||||||
|
<li><a href="https://mail.protonmail.com">protonmail</a></li>
|
||||||
|
<li><a href="https://linkedin.com">youtube</a></li>
|
||||||
|
<li><a href="https://reddit.com/">reddit</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category">
|
||||||
|
<div class="links">
|
||||||
|
<li class="title">dev</li>
|
||||||
|
<li><a href="https://github.com/">github</a></li>
|
||||||
|
<li><a href="https://stackoverflow.com/">stackoverflow</a></li>
|
||||||
|
<li><a href="https://distrowatch.com/">distrowatch</a></li>
|
||||||
|
<li><a href="https://devdocs.io/">devdocs</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category">
|
||||||
|
<div class="links">
|
||||||
|
<li class="title"><a style="color: #EADBB2" href="https://reddit.com">reddit</a></li>
|
||||||
|
<li><a href="https://reddit.com/r/programming/">r/programming</a></li>
|
||||||
|
<li><a href="https://reddit.com/r/archlinux/">r/archlinux</a></li>
|
||||||
|
<li><a href="https://reddit.com/r/unixporn/">r/unixporn</a></li>
|
||||||
|
<li><a href="https://reddit.com/r/linuxmasterrace/">r/linuxmr</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category">
|
||||||
|
<div class="links">
|
||||||
|
<li class="title">fun</li>
|
||||||
|
<li><a href="https://monkeytype.com/">monkeytype</a></li>
|
||||||
|
<li><a href="https://twitter.com/">twitter</a></li>
|
||||||
|
<li><a href="https://twitch.tv/">twitch</a></li>
|
||||||
|
<li><a href="https://netflix.com/">netflix</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
BIN
plane.gif
Normal file
BIN
plane.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 3 MiB |
BIN
rest.webp
Normal file
BIN
rest.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 169 KiB |
129
style.css
Normal file
129
style.css
Normal file
|
@ -0,0 +1,129 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
|
||||||
|
:root {
|
||||||
|
--color-bg: #1E1E2E;
|
||||||
|
--color-fg: #D9E0EE;
|
||||||
|
--color-link: #8F9191;
|
||||||
|
--color-link-visited: #F5C2E7;
|
||||||
|
--color-link-hover: #FF79C6 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-fg);
|
||||||
|
font-family: "Ubuntu";
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vapor {
|
||||||
|
border-radius: 12px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #FF79C6;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 460px 600px 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
". left right .";
|
||||||
|
column-gap: 80px;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-container {
|
||||||
|
grid-area: left;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-container {
|
||||||
|
grid-area: right;
|
||||||
|
height: 50%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gif img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 40px;
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 16px;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: var(--color-link-visited);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--color-link-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blinking {
|
||||||
|
animation: opacity 1s ease-in-out infinite;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#Date {
|
||||||
|
|
||||||
|
font-family: 'Bebas Neue';
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
BIN
vapor.gif
Normal file
BIN
vapor.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 MiB |
BIN
vaporwave.gif
Normal file
BIN
vaporwave.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.6 MiB |
Loading…
Add table
Add a link
Reference in a new issue