mirror of
https://github.com/xelframe/catmpeg.github.io.git
synced 2026-04-17 19:13:24 +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;
|
margin: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
|
/* background: #2b2b2b; */
|
||||||
|
background: url('/assets/background.jpg') center/cover no-repeat;
|
||||||
font: 14px 'ConsolasBold';
|
font: 14px 'ConsolasBold';
|
||||||
color: #fff;
|
color: #ddd;
|
||||||
background: #222222;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: 20%;
|
|
||||||
padding-right: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main > a {
|
.titlebar {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
width: fit-content;
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #313131;
|
||||||
|
border-bottom: 1px solid #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
.avatar {
|
||||||
margin: 15px 0 10px;
|
width: 48px;
|
||||||
}
|
height: 48px;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
font-size: 16px;
|
||||||
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;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mybutton {
|
.subtitle {
|
||||||
height: 50px;
|
font-size: 12px;
|
||||||
width: 500px;
|
color: #aaa;
|
||||||
resize: none;
|
|
||||||
color: #ddd;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
.content {
|
||||||
h1 { font-size: 1.5rem; }
|
padding: 12px;
|
||||||
h2, h3, label { font-size: 1.1rem; margin: 5px 0; }
|
display: flex;
|
||||||
#mybutton { width: 200px; }
|
flex-direction: column;
|
||||||
main { padding: 2%;}
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
126
index.html
126
index.html
|
|
@ -10,68 +10,70 @@
|
||||||
<link rel="stylesheet" href="assets/styles.css">
|
<link rel="stylesheet" href="assets/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 class="title">
|
<div class="window">
|
||||||
<img src="assets/avatar.jpg" width="82" alt="avatar xd"> xelframe home page
|
<div class="titlebar">
|
||||||
<br>(bhzrd_, semkapc, catmpeg)
|
<img src="assets/avatar.jpg" class="avatar">
|
||||||
</h1>
|
<div>
|
||||||
<main>
|
<div class="title">xelframe home page</div>
|
||||||
<hr width="100%">
|
<div class="subtitle">(bhzrd_, semkapc, catmpeg)</div>
|
||||||
<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>
|
</div>
|
||||||
<script src="assets/lastplayed.js" defer></script>
|
</div>
|
||||||
<hr width="100%">
|
|
||||||
<br>
|
<div class="content">
|
||||||
<div class="down">
|
<div class="panel">
|
||||||
<h3><a href="https://cat.fs.tlpteam.ru/git/" target="_blank">>> git <<</a></h3>
|
<h2>About me</h2>
|
||||||
<h3>
|
<div>hello, my online name is xelframe.</div>
|
||||||
<a href="https://otomir23.me/webring/xelframe/prev"><prev</a>
|
<div>i enjoy playing various games and listening to music.</div>
|
||||||
<a href="https://otomir23.me/webring" target="_blank">webring</a>
|
<div>i use linux only, no windows.</div>
|
||||||
<a href="https://otomir23.me/webring/xelframe/next">next></a>
|
<div>i enjoy minimalism.</div>
|
||||||
</h3><br>
|
<div>some of my favorite games are garry's mod, half-life 1 & 2, ddnet, minecraft.</div>
|
||||||
<a href="https://code.visualstudio.com" target="_blank" style="image-rendering:pixelated">
|
<div>=^.^=</div>
|
||||||
<img src="assets/images/vscbutton.gif" height="31" width="88" alt="VSCode"></a>
|
<!-- <div><a href="/xelframe_0x62A7397D94F59A82_public.asc" download>gpg key</a></div> -->
|
||||||
<a href="https://xfree86.org" target="_blank" style="image-rendering:pixelated">
|
</div>
|
||||||
<img src="assets/images/xfree.gif" height="31" width="88" alt="XFree86"></a>
|
|
||||||
<a href="https://archlinux.org" target="_blank" style="image-rendering:pixelated">
|
<div class="panel">
|
||||||
<img src="assets/images/archlinux.gif" height="31" width="88" alt="Arch Linux"></a>
|
<h2>Socials</h2>
|
||||||
<a href="https://firefox.com" target="_blank" style="image-rendering:pixelated">
|
<div>Discord: xelframe</div>
|
||||||
<img src="assets/images/firefox.gif" height="31" width="88" alt="Firefox"></a>
|
<div>Telegram: <a href="/telegram">xelframe</a></div>
|
||||||
<a href="https://github.com" target="_blank" style="image-rendering:pixelated">
|
<div>Github: <a href="/github">xelframe</a></div>
|
||||||
<img src="assets/images/github.gif" height="31" width="88" alt="Github"></a>
|
<div>Steam: <a href="/steam">xelframe</a></div>
|
||||||
<a href="https://reddit.com" target="_blank" style="image-rendering:pixelated">
|
<div>YouTube: <a href="/youtube">xelframe</a></div>
|
||||||
<img src="assets/images/reddit.gif" height="31" width="88" alt="Reddit"></a>
|
<div>Last.fm: <a href="/lastfm">xelframe</a></div>
|
||||||
</div><br>
|
</div>
|
||||||
</main>
|
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue