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-attachment: fixed;
|
||||
background-size: cover;
|
||||
min-height: 400px;
|
||||
min-height: 800px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -133,11 +133,90 @@ a {
|
|||
.glass {
|
||||
backdrop-filter: blur(4px);
|
||||
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 {
|
||||
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
|
||||
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
|
||||
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