|
@ -35,12 +35,13 @@
|
|||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="aboutmetitle"></h1>
|
||||
<h2 id="aboutme1"></h2>
|
||||
<br>
|
||||
<h2 id="aboutme2"></h2>
|
||||
<p id="aboutme1"></p>
|
||||
<br>
|
||||
<p id="aboutme2"></p>
|
||||
<br>
|
||||
<p id="aboutme3"></p>
|
||||
<br>
|
||||
<h2 id="aboutme3"></h2>
|
||||
|
||||
<ul id="aboutmelinks">
|
||||
<li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
|
||||
<li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>
|
||||
|
|
|
@ -34,7 +34,8 @@
|
|||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="catstitle"></h1>
|
||||
<h2 id="cats"></h2>
|
||||
<br>
|
||||
<p id="cats"></p>
|
||||
</div>
|
||||
|
||||
<div class="col-2" id="catpics">
|
||||
|
|
|
@ -35,6 +35,8 @@
|
|||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="linuxtitle"></h1>
|
||||
<br>
|
||||
|
||||
<h2 id="linux1"></h2>
|
||||
|
||||
<ul class="technolist">
|
||||
|
@ -64,6 +66,7 @@
|
|||
<li id="linuxli10"></li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<h2 id="linux4"></h2>
|
||||
|
||||
<ul class="technolist">
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="technotitle"></h1>
|
||||
<h2 id="techno"></h2>
|
||||
<p id="techno"></p>
|
||||
|
||||
<ul class="technolist">
|
||||
<li id="technoli1"></li>
|
||||
|
|
|
@ -32,16 +32,11 @@
|
|||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="contacttitle"></h1>
|
||||
<h2 id="contact"></h2>
|
||||
<a id="popupButton">PGP Key</a>
|
||||
|
||||
<div id="myPopup" class="Popup">
|
||||
<div class="popupContent">
|
||||
<span class="close">×</span>
|
||||
<h1>PGP Key</h1>
|
||||
<br>
|
||||
<p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
|
||||
xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br>
|
||||
f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
|
||||
|
@ -57,6 +52,15 @@
|
|||
-----END PGP PUBLIC KEY BLOCK-----</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="contacttitle"></h1>
|
||||
<br>
|
||||
<p id="contact"></p>
|
||||
<br>
|
||||
<a id="popupButton">PGP Key</a>
|
||||
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
|
||||
|
|
144
css/style.css
|
@ -1,7 +1,7 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
.container{
|
||||
|
@ -9,8 +9,12 @@
|
|||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: rgb(56,56,56);
|
||||
background: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%);
|
||||
background-color: #111927;
|
||||
background-image: radial-gradient(at 30% 30%, hsl(70, 100%, 20%) 0, transparent 59%), radial-gradient(at 70% 70%, hsl(230, 100%, 20%) 0, transparent 55%);
|
||||
background: url(../pics/background.jpg) no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
@ -19,20 +23,28 @@
|
|||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #e2de84;
|
||||
box-shadow: 5px 5px 5px;
|
||||
padding: 40px 0;
|
||||
padding: 30px 0;
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 0 12px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 180px;
|
||||
margin-top: 3em;
|
||||
width: 190px;
|
||||
margin-top: 3.5em;
|
||||
margin-left: 8%;
|
||||
position: absolute;
|
||||
transform: rotate(-5deg);
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.menu-icon{
|
||||
|
@ -51,15 +63,16 @@ nav ul li{
|
|||
}
|
||||
|
||||
nav ul li a{
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
font-size: 120%;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
nav ul li a:hover{
|
||||
color: #ecfeaa;
|
||||
color: #af83b9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -80,15 +93,16 @@ nav ul li a:hover{
|
|||
}
|
||||
|
||||
h1{
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
}
|
||||
|
||||
h2{
|
||||
color: #222222;
|
||||
color: #bbadbe;
|
||||
}
|
||||
|
||||
p{
|
||||
color: #222222;
|
||||
color: #bbadbe;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.row{
|
||||
|
@ -101,10 +115,16 @@ p{
|
|||
.col-1{
|
||||
flex-basis: 80%;
|
||||
position: relative;
|
||||
background-color: #e2de84;
|
||||
padding: 2%;
|
||||
box-shadow: 10px 10px 10px;
|
||||
z-index: 2;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.col-2{
|
||||
|
@ -135,23 +155,29 @@ p{
|
|||
}
|
||||
|
||||
#popupButton {
|
||||
color: black;
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
background-color: #e0d94c;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
#popupButton:hover{
|
||||
color: #ecfeaa;
|
||||
color: #af83b9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@ -162,23 +188,27 @@ p{
|
|||
}
|
||||
|
||||
.popupContent {
|
||||
background-color: #e2de84;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #000000;
|
||||
width: 80%;
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
color: #bbadbe;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: #000;
|
||||
color: #af83b9;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
@ -187,9 +217,14 @@ p{
|
|||
height: 30px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
background-color: #e2de84;
|
||||
padding: 5px;
|
||||
box-shadow: 5px 5px 5px;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
.socialmedia{
|
||||
|
@ -215,16 +250,21 @@ p{
|
|||
}
|
||||
|
||||
#aboutmelinks li a{
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
font-size: 100%;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
background-color: #e0d94c;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
#aboutmelinks li a:hover{
|
||||
color: #ecfeaa;
|
||||
color: #af83b9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -235,35 +275,53 @@ p{
|
|||
}
|
||||
|
||||
.technolist li{
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
font-size: 100%;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
text-decoration: none;
|
||||
background-color: #e0d94c;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
list-style: none;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(50, 50, 50, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
table{
|
||||
margin-left: 10%;
|
||||
text-align: center;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
table tr th{
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
font-size: 100%;
|
||||
padding: 5px;
|
||||
background-color: #e0d94c;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
|
||||
table tr td{
|
||||
color: black;
|
||||
color: #bbadbe;
|
||||
font-size: 100%;
|
||||
padding: 5px;
|
||||
background-color: #e2de84;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
}
|
||||
|
||||
.neofetch{
|
||||
|
@ -285,11 +343,16 @@ table tr td{
|
|||
nav ul{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
top: 90px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background-color: #e2de84;
|
||||
box-shadow: 10px 10px 10px;
|
||||
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
background-color: rgba(30, 30, 30, 0.75);
|
||||
border-radius: 0 0 12px 12px;
|
||||
|
||||
}
|
||||
|
||||
nav ul li{
|
||||
|
@ -329,14 +392,13 @@ table tr td{
|
|||
|
||||
.logo{
|
||||
margin-left: 4%;
|
||||
width: 150px;
|
||||
margin-top: 1em;
|
||||
width: 190px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.row{
|
||||
flex-direction: column;
|
||||
margin: 50px 0
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.col-2{
|
||||
|
@ -356,6 +418,8 @@ table tr td{
|
|||
|
||||
.col-1{
|
||||
flex-basis: 100%;
|
||||
margin-top: 2em;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#aboutmelinks li{
|
||||
|
|
|
@ -35,9 +35,10 @@
|
|||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="welcometitle">Looks like you have JavaScript deactivated. Please activate JavaScript. My entire JavaScript is Open-Source btw. https://github.com/malikwachter/mawacode.de/blob/main/js/lang.js</h1>
|
||||
<h2 id="welcome1"></h2>
|
||||
<br>
|
||||
<h2 id="welcome2"></h2>
|
||||
<p id="welcome1"></p>
|
||||
<br>
|
||||
<p id="welcome2"></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<img src="pics/cat_frontpage.png" class="catFront">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
|
||||
//Full res picture site
|
||||
var fullpic = document.getElementById("fullpic")
|
||||
|
||||
if(window.location.href.indexOf("desktop") > -1){
|
||||
|
|
BIN
pics/background.jpg
Normal file
After Width: | Height: | Size: 535 KiB |
BIN
pics/background.png
Normal file
After Width: | Height: | Size: 154 KiB |
BIN
pics/background2.jpg
Normal file
After Width: | Height: | Size: 960 KiB |
|
@ -35,7 +35,8 @@
|
|||
<div class="row">
|
||||
<div class="col-1">
|
||||
<h1 id="projectstitle"></h1>
|
||||
<h2 id="projects"></h2>
|
||||
<br>
|
||||
<p id="projects"></p>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
|
|
Before Width: | Height: | Size: 235 KiB After Width: | Height: | Size: 370 KiB |
BIN
webicons/logo.xcf
Normal file
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 8.9 KiB |