initial existing aboutme page
This commit is contained in:
203
index.html
Normal file
203
index.html
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
<?PHP
|
||||||
|
ach die gewohnheiten :)
|
||||||
|
-->
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Elias Müller</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<style media="screen">
|
||||||
|
body {
|
||||||
|
font-family: "Roboto";
|
||||||
|
|
||||||
|
background-image: url("https://mhsl.eu/provide/muelleel/skyline.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
dt::after {
|
||||||
|
content: ": ";
|
||||||
|
}
|
||||||
|
.attributes dd {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #3f3f3f;
|
||||||
|
font-size: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
h1::before {
|
||||||
|
content: "# ";
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
li::before {
|
||||||
|
content: "-> ";
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 30px 0;
|
||||||
|
border: 2px dashed gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin: 50px 20%;
|
||||||
|
padding: 20px 50px;
|
||||||
|
background: #ffffffe0;
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.card .top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.card .top img {
|
||||||
|
border-radius: 50%;
|
||||||
|
max-height: 300px;
|
||||||
|
margin: 10px 15% 10px 10px;
|
||||||
|
border: 2px dashed gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inset {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.footer a::before {
|
||||||
|
content: ">";
|
||||||
|
}
|
||||||
|
.footer a::after {
|
||||||
|
content: "<";
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1100px) {
|
||||||
|
.card {
|
||||||
|
margin: 30px 5%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.card .top {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.card .top img {
|
||||||
|
max-height: 200px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.chapter {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.inset {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="top">
|
||||||
|
<img src="https://mhsl.eu/provide/muelleel/tux.png" alt="tux penguin profile image">
|
||||||
|
<div class="attributes">
|
||||||
|
<dl>
|
||||||
|
<dt>Name</dt>
|
||||||
|
<dd>Elias Müller</dd>
|
||||||
|
|
||||||
|
<dt>Geboren am</dt>
|
||||||
|
<dd>18.08.2003</dd>
|
||||||
|
|
||||||
|
<dt>Wohnort</dt>
|
||||||
|
<dd>Petersberg</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="chapter">
|
||||||
|
<h1>Über mich</h1>
|
||||||
|
<p class="inset">
|
||||||
|
Als angehender Softwareentwickler lebe ich sehr nahe an der Welt aller Computern.
|
||||||
|
Das Hosting von Dienstleistungen mit <b>Proxmox</b> auf meinem Home-Server ist neben der Softwareentwicklung ein weiteres gepflegtes Hobby, welches ich mit großer Leidenschaft verfolge.
|
||||||
|
Dabei ist der Umgang mit Linux täglich gefragt, zumal auch mein Desktop darunter läuft.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="chapter">
|
||||||
|
<h1>Interessen</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Open Source</li>
|
||||||
|
<li>Linux Foundation</li>
|
||||||
|
<li>RaspberryPi Foundation</li>
|
||||||
|
<li>Pine64</li>
|
||||||
|
<li>Pinguine und Igel</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="chapter">
|
||||||
|
<h1>Bildung</h1>
|
||||||
|
|
||||||
|
<dl class="inset">
|
||||||
|
<dt>2010-2014</dt>
|
||||||
|
<dd>Grundschule: Johannes-Hack-Schule Petersberg</dd>
|
||||||
|
|
||||||
|
<dt>2014-2020</dt>
|
||||||
|
<dd>Mittelstufe: Marianum, Realschule und gymnasiale Oberstufe Fulda</dd>
|
||||||
|
|
||||||
|
<dt>2020-2022</dt>
|
||||||
|
<dd>Fachoberschule: Konrad-Zuse-Schule Hünfeld</dd>
|
||||||
|
|
||||||
|
<dt>2022-Heute</dt>
|
||||||
|
<dd>Ausbildung bei Computer L.A.N. GmbH und der Ferdinand Braun Schule in Fulda</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="chapter">
|
||||||
|
<h1>Referenzen</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a target="_blank" href="https://mhsl.eu">website</a></li>
|
||||||
|
<li><a target="_blank" href="https://github.com/muelleel">github</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="chapter">
|
||||||
|
<h1>Kontakt</h1>
|
||||||
|
<p class="inset">
|
||||||
|
Zur Spamvermeidung bitte die Daten im folgendem Format ersetzen (umlaute durch entsprechende Langform ersetzen ü -> ue): <a>vorname@vorname-nachname.com</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<div class="footer">
|
||||||
|
<a target="_blank" href="https://mhsl.eu/id.html">Impressum</a>
|
||||||
|
<a target="_blank" href="https://de.vecteezy.com/gratis-vektor/vektor">Hintergrund</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user