Made some fancy styles.
This commit is contained in:
parent
31c4330751
commit
6ad0fcf014
2 changed files with 162 additions and 2 deletions
81
index.php
Normal file
81
index.php
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de"><meta charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>Wobbelnde Seite</title>
|
||||||
|
|
||||||
|
<link rel="icon" sizes="192x192" href="profilbild-workbench.png">
|
||||||
|
<link rel="stylesheet" href="styles.php">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="script.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body style="background-color: #2e2e2e">
|
||||||
|
|
||||||
|
<div class="background" id="background">
|
||||||
|
|
||||||
|
<div class="topnav-placeholder"></div>
|
||||||
|
|
||||||
|
<p class="big-text">Seite von dem Wobbler</p>
|
||||||
|
<div class="glass inset">
|
||||||
|
<p class="normal-text">
|
||||||
|
Hallo, ich bin der Wobbler.
|
||||||
|
<br>
|
||||||
|
Ich kann ein wenig programmieren, am liebsten verwende ich Python.
|
||||||
|
<br>
|
||||||
|
Ich verwende manchmal aber auch Kotlin, JavaScript, PHP, Lua, Bash, GDScript oder C.
|
||||||
|
<br>
|
||||||
|
Die Designsprachen HTML und CSS benutze ich auch manchmal, wobei mich CSS meistens zum ausrasten bringt.
|
||||||
|
<br>
|
||||||
|
Jedoch umgehe ich JavaScript, auch wenn ich dafür CSS verwenden muss.
|
||||||
|
<br>
|
||||||
|
Ich verwende kein Arch btw. sondern Linux Mint.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="glass inset">
|
||||||
|
<p class="normal-text">
|
||||||
|
Hier könnt ihr mich erreichen:
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Email: emil@i21k.de
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="glass inset" id="mb-int">
|
||||||
|
<p class="normal-text">
|
||||||
|
Merge Box wurde ursprünglich von einem Typ benutzernamens "Debiankaios" auf Scratch entwickelt.
|
||||||
|
<br>
|
||||||
|
Damals fand ich das Spiel ganz gut und habs in Python nachprogrammiert.
|
||||||
|
<br>
|
||||||
|
Da wusste ich noch nicht, dass der Entwickler das spiel schon in Lua nachgeschrieben hat.
|
||||||
|
<br>
|
||||||
|
Jedenfalls war das das erste Spiel, das ich in Python geschrieben habe,
|
||||||
|
<br>
|
||||||
|
daher ist es äußerst unperformant, was vermutlich an den tausenden Einzügen im Code liegt.
|
||||||
|
<br>
|
||||||
|
Heutzutage würde mein Code deutlich sauberer aussehen und ich bin froh,
|
||||||
|
<br>
|
||||||
|
dass ich für die Verbrechen, die in dem Code des Spiels stecken, nicht gerecht bestraft wurde.
|
||||||
|
<br>
|
||||||
|
Trotzdem kann man es spielen und ihr könnt es hier downloaden, wenn ihr wollt.
|
||||||
|
<a href="merge-box" class="normal-button">Download</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="topnav-companion"></div>
|
||||||
|
<div class="topnav">
|
||||||
|
|
||||||
|
<a class="topnav-active" href="">Start</a>
|
||||||
|
<a class="topnav-inactive" href="#mb-int">Merge Box</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
83
styles.php
83
styles.php
|
|
@ -27,7 +27,7 @@ a {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
min-height: 400px;
|
min-height: 800px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -133,11 +133,90 @@ a {
|
||||||
.glass {
|
.glass {
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
margin: 8px;
|
margin: 32px 16px 64px;
|
||||||
|
animation-name: glassdiff;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass:hover {
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
border-radius: 16px;
|
||||||
|
animation-name: glassclear;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glassdiff {
|
||||||
|
0% {
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glassclear {
|
||||||
|
0% {
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inset {
|
.inset {
|
||||||
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
|
||||||
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
|
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
animation-name: pushins;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inset:hover {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0.2);
|
||||||
|
animation-name: pullins;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pushins {
|
||||||
|
0% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0),
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0);
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0) inset,
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0) inset;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pullins {
|
||||||
|
0% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0) inset,
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0) inset;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0),
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
|
||||||
|
-4px -4px 4px rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-art {
|
||||||
|
color: white;
|
||||||
|
background-color: rgba(51, 51, 51, 0.2);
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue