mirror of
https://github.com/xelframe/catmpeg.github.io.git
synced 2026-04-17 11:03:26 +03:00
new design again lol
This commit is contained in:
xelframe
parent
1816bd663a
commit
2b9e898c6c
5 changed files with 131 additions and 131 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 13 KiB |
BIN
assets/background.jpg
Normal file
BIN
assets/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
|
|
@ -9,104 +9,102 @@ body {
|
|||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* background: #2b2b2b; */
|
||||
background: url('/assets/background.jpg') center/cover no-repeat;
|
||||
font: 14px 'ConsolasBold';
|
||||
color: #fff;
|
||||
background: #222222;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
main {
|
||||
.window {
|
||||
width: 900px;
|
||||
background: #252525;
|
||||
border: 1px solid #555;
|
||||
box-shadow: inset 0 1px #666, 0 10px 30px rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
}
|
||||
|
||||
main > a {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
.titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: #313131;
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 15px 0 10px;
|
||||
}
|
||||
h3 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.down {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
opacity: 0.7;
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blocks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 10px 15px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.h1-404 {
|
||||
font-size: 6em;
|
||||
font-weight: 400;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#mybutton {
|
||||
height: 50px;
|
||||
width: 500px;
|
||||
resize: none;
|
||||
color: #ddd;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
h1 { font-size: 1.5rem; }
|
||||
h2, h3, label { font-size: 1.1rem; margin: 5px 0; }
|
||||
#mybutton { width: 200px; }
|
||||
main { padding: 2%;}
|
||||
.content {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #2f2f2f;
|
||||
border: 1px solid #555;
|
||||
box-shadow: inset 0 1px #5a5a5a;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9ecbff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.webring, .links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.x8831 img {
|
||||
image-rendering: pixelated;
|
||||
height: 31px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.window {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
128
index.html
128
index.html
|
|
@ -10,68 +10,70 @@
|
|||
<link rel="stylesheet" href="assets/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">
|
||||
<img src="assets/avatar.jpg" width="82" alt="avatar xd"> xelframe home page
|
||||
<br>(bhzrd_, semkapc, catmpeg)
|
||||
</h1>
|
||||
<main>
|
||||
<hr width="100%">
|
||||
<h2>About me:</h2>
|
||||
<ul>
|
||||
<li>hello, my online name is xelframe.</li>
|
||||
<li>i enjoy playing various games and listening to music.</li>
|
||||
<li>like the aesthetics of the 2000s, for example, frituger aero and others.</li>
|
||||
<li>some of my favorite games are garry's mod, half-life 1 & 2, ddnet, minecraft.</li>
|
||||
<li>=^.^=</li>
|
||||
</ul>
|
||||
|
||||
<h2>Socials:</h2>
|
||||
<ul>
|
||||
<li>Discord: xelframe</li>
|
||||
<li>Telegram: <a href="/telegram">xelframe</a></li>
|
||||
<li>Github: <a href="/github">xelframe</a></li>
|
||||
<li>Steam: <a href="/steam">xelframe</a></li>
|
||||
<li>YouTube: <a href="/youtube">xelframe</a></li>
|
||||
<li>Last.fm: <a href="/lastfm">xelframe</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>My friends:</h2>
|
||||
<ul>
|
||||
<li>Cat.: <a href="https://cat8753.ru">cat8753.ru</a></li>
|
||||
<li>ShadowCj: <a href="https://shadowcj.site">shadowcj.site</a></li>
|
||||
<li>HonakAC: <a href="https://honakac.r2squad.ru">honakac.r2squad.ru</a></li>
|
||||
<li>Tolya Gosuslugi: <a href="https://tolya1337.ru">tolya1337.ru</a></li>
|
||||
<li>OctoBanon: <a href="https://octobanon.com">octobanon.com</a></li>
|
||||
</ul><br>
|
||||
<div id="last-played" style="display: none">
|
||||
<h2>Latest played song:</h2>
|
||||
<ul>
|
||||
<li id="song">~~~~ - ~~~~</li>
|
||||
</ul>
|
||||
<div class="window">
|
||||
<div class="titlebar">
|
||||
<img src="assets/avatar.jpg" class="avatar">
|
||||
<div>
|
||||
<div class="title">xelframe home page</div>
|
||||
<div class="subtitle">(bhzrd_, semkapc, catmpeg)</div>
|
||||
</div>
|
||||
<script src="assets/lastplayed.js" defer></script>
|
||||
<hr width="100%">
|
||||
<br>
|
||||
<div class="down">
|
||||
<h3><a href="https://cat.fs.tlpteam.ru/git/" target="_blank">>> git <<</a></h3>
|
||||
<h3>
|
||||
<a href="https://otomir23.me/webring/xelframe/prev"><prev</a>
|
||||
<a href="https://otomir23.me/webring" target="_blank">webring</a>
|
||||
<a href="https://otomir23.me/webring/xelframe/next">next></a>
|
||||
</h3><br>
|
||||
<a href="https://code.visualstudio.com" target="_blank" style="image-rendering:pixelated">
|
||||
<img src="assets/images/vscbutton.gif" height="31" width="88" alt="VSCode"></a>
|
||||
<a href="https://xfree86.org" target="_blank" style="image-rendering:pixelated">
|
||||
<img src="assets/images/xfree.gif" height="31" width="88" alt="XFree86"></a>
|
||||
<a href="https://archlinux.org" target="_blank" style="image-rendering:pixelated">
|
||||
<img src="assets/images/archlinux.gif" height="31" width="88" alt="Arch Linux"></a>
|
||||
<a href="https://firefox.com" target="_blank" style="image-rendering:pixelated">
|
||||
<img src="assets/images/firefox.gif" height="31" width="88" alt="Firefox"></a>
|
||||
<a href="https://github.com" target="_blank" style="image-rendering:pixelated">
|
||||
<img src="assets/images/github.gif" height="31" width="88" alt="Github"></a>
|
||||
<a href="https://reddit.com" target="_blank" style="image-rendering:pixelated">
|
||||
<img src="assets/images/reddit.gif" height="31" width="88" alt="Reddit"></a>
|
||||
</div><br>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="panel">
|
||||
<h2>About me</h2>
|
||||
<div>hello, my online name is xelframe.</div>
|
||||
<div>i enjoy playing various games and listening to music.</div>
|
||||
<div>i use linux only, no windows.</div>
|
||||
<div>i enjoy minimalism.</div>
|
||||
<div>some of my favorite games are garry's mod, half-life 1 & 2, ddnet, minecraft.</div>
|
||||
<div>=^.^=</div>
|
||||
<!-- <div><a href="/xelframe_0x62A7397D94F59A82_public.asc" download>gpg key</a></div> -->
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Socials</h2>
|
||||
<div>Discord: xelframe</div>
|
||||
<div>Telegram: <a href="/telegram">xelframe</a></div>
|
||||
<div>Github: <a href="/github">xelframe</a></div>
|
||||
<div>Steam: <a href="/steam">xelframe</a></div>
|
||||
<div>YouTube: <a href="/youtube">xelframe</a></div>
|
||||
<div>Last.fm: <a href="/lastfm">xelframe</a></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>My friends</h2>
|
||||
<div>Cat.: <a href="https://cat8753.ru">cat8753.ru</a></div>
|
||||
<div>ShadowCj: <a href="https://shadowcj.site">shadowcj.site</a></div>
|
||||
<div>HonakAC: <a href="https://honakac.r2squad.ru">honakac.r2squad.ru</a></div>
|
||||
<div>Tolya Gosuslugi: <a href="https://tolya1337.ru">tolya1337.ru</a></div>
|
||||
<div>OctoBanon: <a href="https://octobanon.com">octobanon.com</a></div>
|
||||
</div>
|
||||
|
||||
<div id="last-played" class="panel hidden">
|
||||
<h2>Latest played song</h2>
|
||||
<div id="song">~~~~ - ~~~~</div>
|
||||
</div>
|
||||
|
||||
<div class="panel footer">
|
||||
<div class="webring">
|
||||
<a href="https://otomir23.me/webring/xelframe/prev">prev</a>
|
||||
<a href="https://otomir23.me/webring" target="_blank">webring</a>
|
||||
<a href="https://otomir23.me/webring/xelframe/next">next</a>
|
||||
</div>
|
||||
|
||||
<div class="x8831">
|
||||
<a href="https://code.visualstudio.com" target="_blank"><img src="assets/images/vscbutton.gif"></a>
|
||||
<a href="https://xfree86.org" target="_blank"><img src="assets/images/xfree.gif"></a>
|
||||
<a href="https://archlinux.org" target="_blank"><img src="assets/images/archlinux.gif"></a>
|
||||
<a href="https://firefox.com" target="_blank"><img src="assets/images/firefox.gif"></a>
|
||||
<a href="https://github.com" target="_blank"><img src="assets/images/github.gif"></a>
|
||||
<a href="https://reddit.com" target="_blank"><img src="assets/images/reddit.gif"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/lastplayed.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue