Restyle page
This commit is contained in:
parent
d011055d89
commit
e2c6abe241
|
@ -32,36 +32,37 @@
|
|||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="myPopup" class="Popup">
|
||||
<div class="popupContent">
|
||||
<span class="close">×</span>
|
||||
<h1>PGP Key</h1>
|
||||
<p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
|
||||
xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br>
|
||||
f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
|
||||
ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
|
||||
GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
|
||||
FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
|
||||
AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
|
||||
1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
|
||||
OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
|
||||
MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
|
||||
V1WPds4rTX6GEzj+Cw==<br>
|
||||
=rzUE<br>
|
||||
-----END PGP PUBLIC KEY BLOCK-----</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
|
||||
xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br>
|
||||
f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
|
||||
ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
|
||||
GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
|
||||
FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
|
||||
AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
|
||||
1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
|
||||
OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
|
||||
MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
|
||||
V1WPds4rTX6GEzj+Cw==<br>
|
||||
=rzUE<br>
|
||||
-----END PGP PUBLIC KEY BLOCK-----</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="socialmedia">
|
||||
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
|
||||
|
|
119
css/style.css
119
css/style.css
|
@ -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 {
|
||||
|
@ -22,9 +26,14 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #e2de84;
|
||||
box-shadow: 5px 5px 5px;
|
||||
padding: 40px 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 {
|
||||
|
@ -33,6 +42,9 @@
|
|||
margin-left: 8%;
|
||||
position: absolute;
|
||||
transform: rotate(-5deg);
|
||||
backdrop-filter: blur(10px) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.menu-icon{
|
||||
|
@ -51,7 +63,7 @@ nav ul li{
|
|||
}
|
||||
|
||||
nav ul li a{
|
||||
color: black;
|
||||
color: white;
|
||||
font-size: 120%;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
|
@ -59,7 +71,7 @@ nav ul li a{
|
|||
}
|
||||
|
||||
nav ul li a:hover{
|
||||
color: #ecfeaa;
|
||||
color: #aaaaaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -80,15 +92,15 @@ nav ul li a:hover{
|
|||
}
|
||||
|
||||
h1{
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h2{
|
||||
color: #222222;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p{
|
||||
color: #222222;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row{
|
||||
|
@ -101,9 +113,15 @@ p{
|
|||
.col-1{
|
||||
flex-basis: 80%;
|
||||
position: relative;
|
||||
background-color: #e2de84;
|
||||
padding: 2%;
|
||||
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 12px 0 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
@ -135,16 +153,22 @@ 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: #aaaaaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -162,23 +186,27 @@ p{
|
|||
}
|
||||
|
||||
.popupContent {
|
||||
background-color: #e2de84;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #000000;
|
||||
width: 80%;
|
||||
color: black;
|
||||
color: white;
|
||||
|
||||
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: white;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: #000;
|
||||
color: #aaaaaa;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
@ -187,9 +215,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 +248,21 @@ p{
|
|||
}
|
||||
|
||||
#aboutmelinks li a{
|
||||
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);
|
||||
}
|
||||
|
||||
#aboutmelinks li a:hover{
|
||||
color: #ecfeaa;
|
||||
color: #aaaaaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -235,35 +273,53 @@ p{
|
|||
}
|
||||
|
||||
.technolist li{
|
||||
color: black;
|
||||
color: white;
|
||||
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(30, 30, 30, 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: white;
|
||||
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: white;
|
||||
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{
|
||||
|
@ -288,8 +344,13 @@ table tr td{
|
|||
top: 100px;
|
||||
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{
|
||||
|
|
BIN
pics/background.jpg
Normal file
BIN
pics/background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 535 KiB |
BIN
pics/background.png
Normal file
BIN
pics/background.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 154 KiB |
BIN
pics/background2.jpg
Normal file
BIN
pics/background2.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 960 KiB |
Binary file not shown.
Before Width: | Height: | Size: 235 KiB After Width: | Height: | Size: 188 KiB |
Loading…
Reference in a new issue