mawacode/mawacode.de
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Restyle page

Browse source
This commit is contained in:
malik 2024-02-08 20:38:22 +01:00
parent d011055d89
commit e2c6abe241
6 changed files with 112 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
contactme.html
View file

@ -32,12 +32,6 @@
</div> </div>
<div class="content"> <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 id="myPopup" class="Popup">
<div class="popupContent"> <div class="popupContent">
<span class="close">&times;</span> <span class="close">&times;</span>
@ -57,6 +51,13 @@
-----END PGP PUBLIC KEY BLOCK-----</p> -----END PGP PUBLIC KEY BLOCK-----</p>
</div> </div>
</div> </div>
<div class="row">
<div class="col-1">
<h1 id="contacttitle"></h1>
<h2 id="contact"></h2>
<a id="popupButton">PGP Key</a>
</div> </div>
<div class="col-2"> <div class="col-2">
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a> <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>

119
css/style.css
View file

@ -9,8 +9,12 @@
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
background: rgb(56,56,56); background-color: #111927;
background: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%); 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 { .content {
@ -22,9 +26,14 @@
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #e2de84;
box-shadow: 5px 5px 5px; box-shadow: 5px 5px 5px;
padding: 40px 0; 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 { .logo {
@ -33,6 +42,9 @@
margin-left: 8%; margin-left: 8%;
position: absolute; position: absolute;
transform: rotate(-5deg); transform: rotate(-5deg);
backdrop-filter: blur(10px) saturate(100%);
-webkit-backdrop-filter: blur(10px) saturate(100%);
border-radius: 50%;
} }
.menu-icon{ .menu-icon{
@ -51,7 +63,7 @@ nav ul li{
} }
nav ul li a{ nav ul li a{
color: black; color: white;
font-size: 120%; font-size: 120%;
text-decoration: none; text-decoration: none;
padding-left: 20px; padding-left: 20px;
@ -59,7 +71,7 @@ nav ul li a{
} }
nav ul li a:hover{ nav ul li a:hover{
color: #ecfeaa; color: #aaaaaa;
cursor: pointer; cursor: pointer;
} }
@ -80,15 +92,15 @@ nav ul li a:hover{
} }
h1{ h1{
color: black; color: white;
} }
h2{ h2{
color: #222222; color: white;
} }
p{ p{
color: #222222; color: white;
} }
.row{ .row{
@ -101,9 +113,15 @@ p{
.col-1{ .col-1{
flex-basis: 80%; flex-basis: 80%;
position: relative; position: relative;
background-color: #e2de84;
padding: 2%; padding: 2%;
box-shadow: 10px 10px 10px; 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; z-index: 2;
} }
@ -135,16 +153,22 @@ p{
} }
#popupButton { #popupButton {
color: black; color: white;
font-size: 100%; font-size: 100%;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;
background-color: #e0d94c; background-color: #e0d94c;
box-shadow: 5px 5px 5px black; 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{ #popupButton:hover{
color: #ecfeaa; color: #aaaaaa;
cursor: pointer; cursor: pointer;
} }
@ -162,23 +186,27 @@ p{
} }
.popupContent { .popupContent {
background-color: #e2de84;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
border: 1px solid #000000;
width: 80%; 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 { .close {
color: #aaaaaa; color: white;
float: right; float: right;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
} }
.close:hover, .close:focus { .close:hover, .close:focus {
color: #000; color: #aaaaaa;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@ -187,9 +215,14 @@ p{
height: 30px; height: 30px;
margin: 5px; margin: 5px;
cursor: pointer; cursor: pointer;
background-color: #e2de84;
padding: 5px; padding: 5px;
box-shadow: 5px 5px 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{ .socialmedia{
@ -215,16 +248,21 @@ p{
} }
#aboutmelinks li a{ #aboutmelinks li a{
color: black; color: white;
font-size: 100%; font-size: 100%;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;
background-color: #e0d94c;
box-shadow: 5px 5px 5px black; 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{ #aboutmelinks li a:hover{
color: #ecfeaa; color: #aaaaaa;
cursor: pointer; cursor: pointer;
} }
@ -235,35 +273,53 @@ p{
} }
.technolist li{ .technolist li{
color: black; color: white;
font-size: 100%; font-size: 100%;
padding: 5px; padding: 5px;
margin: 10px; margin: 10px;
text-decoration: none; text-decoration: none;
background-color: #e0d94c;
box-shadow: 5px 5px 5px black; box-shadow: 5px 5px 5px black;
list-style: none; 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{ table{
margin-left: 10%; margin-left: 10%;
text-align: center; 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{ table tr th{
color: black; color: white;
font-size: 100%; font-size: 100%;
padding: 5px; 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{ table tr td{
color: black; color: white;
font-size: 100%; font-size: 100%;
padding: 5px; 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{ .neofetch{
@ -288,8 +344,13 @@ table tr td{
top: 100px; top: 100px;
right: 0; right: 0;
z-index: 2; z-index: 2;
background-color: #e2de84;
box-shadow: 10px 10px 10px; 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{ nav ul li{

BIN
pics/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 535 KiB

BIN
pics/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
pics/background2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 960 KiB

BIN
webicons/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 235 KiB

After

Width:  |  Height:  |  Size: 188 KiB