initial commit
This commit is contained in:
Executable
+115
@@ -0,0 +1,115 @@
|
||||
/* Footer-Container */
|
||||
footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0px;
|
||||
top: 125px;
|
||||
background-color: rgba(25,25,25,0.8);
|
||||
color: white;
|
||||
position: relative;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
box-shadow: 0 0 50px white;
|
||||
border-radius: 25px 25px 0 0;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Logos */
|
||||
.footerLogoLeft, .footerLogoRight {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 25px;
|
||||
object-fit: contain;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Vertikale Trennlinien */
|
||||
.footerLogoLeft::after, .footerLogoRight::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 95px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.footerLogoLeft::after {
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.footerLogoRight::before {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
/* Navigation im Footer */
|
||||
footer nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
footer nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
footer nav a:hover {
|
||||
color: rgba(200,0,0,0.7);
|
||||
scale: 1.1;
|
||||
}
|
||||
footer nav a:active {
|
||||
color: rgba(150,0,0,0.8);
|
||||
scale: 0.9;
|
||||
}
|
||||
|
||||
/* Copyright-Text */
|
||||
footer .copyright {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
color: rgba(125,125,125,0.7);
|
||||
}
|
||||
|
||||
/* Mobile Ansicht */
|
||||
@media (max-width: 768px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footerLogoLeft, .footerLogoRight {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.footerLogoRight {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer nav {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Executable
+438
@@ -0,0 +1,438 @@
|
||||
header {
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
background-color: rgba(0, 0, 0, .9);
|
||||
position: fixed;
|
||||
border-bottom: solid 1px rgba(200, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
box-shadow: 0 0 50px white;
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
box-shadow: 5px 0 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 5px 5px 100px rgba(255, 255, 255);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 5px 5px 50px rgba(255, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
#lang{
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
color: white;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
right: 15px;
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
#lang:hover{
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
cursor: pointer;
|
||||
scale: 1.1;
|
||||
rotate: 5deg;
|
||||
}
|
||||
#lang:active{
|
||||
background-color: rgba(100,0,0,0.5);
|
||||
scale: 0.9;
|
||||
}
|
||||
|
||||
|
||||
.logofile {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25px;
|
||||
transform: translate(0,-50%);
|
||||
-webkit-user-drag: none;
|
||||
width: 250px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.seperator1 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
left: 300px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
z-index: 2;
|
||||
}
|
||||
.seperator2 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.seperator3 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 300px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.sidebarsocialicons {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 280px;
|
||||
right: 60px;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
height: 75px;
|
||||
padding-bottom: 0px;
|
||||
-webkit-user-drag: none;
|
||||
text-align: center;
|
||||
filter: invert(1);
|
||||
}
|
||||
.sidebarsocialicons a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 2px;
|
||||
margin-left: 1px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img:hover {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 1px;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(-15deg);
|
||||
}
|
||||
#desktop_nav {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 48%;
|
||||
height: 45px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(25, 25, 25, 0.5);
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#desktop_nav_main {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#desktop_nav li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#desktop_nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 90%;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
padding: 10px 10px;
|
||||
border-radius: 20px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
#desktop_nav a:hover {
|
||||
background-color: darkred; /* Hover-Effekt für die Links */
|
||||
}
|
||||
#mobile_nav {display: none;}
|
||||
#navbutton_mobile {display: none;}
|
||||
|
||||
|
||||
@media screen and (max-width: 849px) {
|
||||
.logofile {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 60%;
|
||||
}
|
||||
#navbutton_mobile {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transition: transform 1s;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#navbutton_mobile span {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
height: 1.5px;
|
||||
width: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(1) {
|
||||
margin-top: -5px;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(3) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#navbutton_mobile:hover {
|
||||
background-color: rgba(200,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
#navbutton_mobile:active {
|
||||
background-color: rgba(150,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
.seperator1, .seperator2, .seperator3, .sidebarsocialicons, #desktop_nav {display: none;}
|
||||
|
||||
#mobile_nav {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 230px;
|
||||
left: -220px;
|
||||
top: 75px;
|
||||
transform: translate(0, 0);
|
||||
background-color: rgba(25, 25, 25, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border-bottom-right-radius: 25px;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
#mobile_nav.open {
|
||||
left: 0;
|
||||
}
|
||||
#mobile_nav_main {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#mobile_nav li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#mobile_nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 90%;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
padding: 10px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#mobile_nav a:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) and (max-width: 1249px) {
|
||||
.logofile {
|
||||
left: 75px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 35%;
|
||||
}
|
||||
#navbutton_mobile {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transition: transform 1s;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#navbutton_mobile span {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
height: 1.5px;
|
||||
width: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(1) {
|
||||
margin-top: -5px;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(3) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#navbutton_mobile:hover {
|
||||
background-color: rgba(200,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
#navbutton_mobile:active {
|
||||
background-color: rgba(150,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
.seperator2 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.seperator3 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 280px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.sidebarsocialicons {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 280px;
|
||||
right: 50px;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
height: 75px;
|
||||
padding-bottom: 0px;
|
||||
-webkit-user-drag: none;
|
||||
text-align: center;
|
||||
filter: invert(1);
|
||||
}
|
||||
.sidebarsocialicons a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 2px;
|
||||
margin-left: 1px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img:hover {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 1px;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(-15deg);
|
||||
}
|
||||
.seperator1, #desktop_nav {display: none;}
|
||||
|
||||
#mobile_nav {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 230px;
|
||||
left: -220px;
|
||||
top: 75px;
|
||||
transform: translate(0, 0);
|
||||
background-color: rgba(25, 25, 25, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border-bottom-right-radius: 25px;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
#mobile_nav.open {
|
||||
left: 0;
|
||||
}
|
||||
#mobile_nav_main {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#mobile_nav li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#mobile_nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 90%;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
padding: 10px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#mobile_nav a:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
}
|
||||
|
||||
#navbutton_mobile.openButton span:nth-child(1) {
|
||||
transform: translate(-50%, -50%) rotateZ(45deg);
|
||||
margin: 0;
|
||||
}
|
||||
#navbutton_mobile.openButton span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
#navbutton_mobile.openButton span:nth-child(3) {
|
||||
transform: translate(-50%, -50%) rotateZ(-45deg);
|
||||
margin: 0;
|
||||
}
|
||||
Executable
+36
@@ -0,0 +1,36 @@
|
||||
body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
main {
|
||||
position: relative;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
background: rgba(100,100,100,0.2);
|
||||
left: 50%;
|
||||
top: 100px;
|
||||
transform: translate(-50%);
|
||||
border-radius: 25px;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 0px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
.about-me {
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 85%;
|
||||
max-width: 980px;
|
||||
height: auto;
|
||||
border-radius: 25px;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Dunklerer Hintergrund für besseren Kontrast */
|
||||
padding: 25px;
|
||||
color: white; /* Schriftfarbe weiß */
|
||||
line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
|
||||
font-size: 16px; /* Schriftgröße für bessere Lesbarkeit */
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
text-align: justify;
|
||||
}
|
||||
img {
|
||||
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
Executable
+394
@@ -0,0 +1,394 @@
|
||||
section {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 1050px;
|
||||
height: auto;
|
||||
padding-bottom: 0px;
|
||||
border-radius: 25px;
|
||||
top: 50px;
|
||||
margin-bottom: 50px;
|
||||
left: 50%;
|
||||
background-color: rgba(120,120,120,0.3);
|
||||
transform: translate(-50%);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(25px);
|
||||
}
|
||||
|
||||
/* Sektion 1 */
|
||||
.main1_Banner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
filter: blur(15px);
|
||||
transition: transform 1s, filter 1s;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.main1_Banner:hover {
|
||||
transform: translate(-50%,-50%) scale(1.1);
|
||||
filter: blur(0);
|
||||
}
|
||||
.main1_Selfie {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
border-radius: 50%;
|
||||
margin: 25px;
|
||||
border: solid 2.5px red;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
box-shadow: 0 0 50px orange;
|
||||
opacity: 0.8;
|
||||
filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
transition: filter 1s;
|
||||
}
|
||||
.main1_Hey {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
transform: translate(0,-50%);
|
||||
color: white;
|
||||
font-size: clamp(15px, 3vw, 35px);
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
}
|
||||
.main1_Name {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
top: 50%;
|
||||
left: 60%;
|
||||
transform: translate(0,-50%);
|
||||
color: white;
|
||||
font-size: clamp(25px, 5vw, 120px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
}
|
||||
.main1_animatedTextContainer {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -75px);
|
||||
padding-left: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
.main1_animatedText {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
color: #48ff48e1; /* Typisches Grün für die Commandline */
|
||||
font-size: clamp(15px, 3vw, 30px);
|
||||
white-space: nowrap; /* Text bleibt in einer Zeile */
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
border-right: 2px solid #00FF00; /* Cursor simuliert */
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@keyframes blink {
|
||||
0% { border-right-color: #00FF00; }
|
||||
50% { border-right-color: transparent; }
|
||||
100% { border-right-color: #00FF00; }
|
||||
}
|
||||
.main1_animatedText {
|
||||
animation: blink 0.8s steps(1) infinite; /* Cursor blinkt */
|
||||
}
|
||||
|
||||
/* Header Titles */
|
||||
.main2_Header, .main4_Header, .main5_Header, .main6_Header {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: white;
|
||||
font-size: clamp(25px, 4vw, 100px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
padding-bottom: 10px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
border-bottom: solid 1px red;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sektion 2 - Übersicht */
|
||||
#main2 {
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
.main2_menuContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
max-width: 980px;
|
||||
height: 250px;
|
||||
border-radius: 25px 25px 0 0;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(80,80,80,0.7) rgba(0,0,0,0.3);
|
||||
}
|
||||
.main2_MenuPoint {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s;
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
height: 180px;
|
||||
background-color: rgba(150,150,150,0.3);
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
color: white;
|
||||
cursor: grab;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main2_MenuPoint:hover {
|
||||
transform: scale(1.03) rotate(-3deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.main2_MenuPoint:active {
|
||||
transform: scale(0.97) rotate(-6deg);
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar-track {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(80,80,80,0.7); /* Farbe des Scrollbar-Daumens */
|
||||
border-radius: 10px;
|
||||
border: 2px solid transparent; /* Platz für Padding */
|
||||
background-clip: padding-box; /* Clip für Padding */
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(50,50,50,0.9); /* Hover-Effekt für den Scroll-Daumen */
|
||||
}
|
||||
.main2_menuPointImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.main2_menuPointText {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Sektion 3 - Über Mich */
|
||||
#main3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.main3_Header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-size: clamp(25px, 4vw, 100px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
border-bottom: solid 1px red;
|
||||
}
|
||||
.main3_AboutMe {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 25px;
|
||||
border-radius: 25px;
|
||||
width: 85%;
|
||||
margin: 20px 0;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.main3_Selfie {
|
||||
width: 30%;
|
||||
filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.main3_Text {
|
||||
flex: 1;
|
||||
height: auto;
|
||||
max-height: 300px;
|
||||
padding: 0px 15px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
text-align: justify;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: gray transparent;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar-thumb {
|
||||
background: gray;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Sektion 4 - Fähigkeiten */
|
||||
.skills-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 35px auto;
|
||||
width: 85%;
|
||||
padding: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.skill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
.skill-icon {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.skill-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.skill-info span {
|
||||
color: white;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
}
|
||||
.progress-bar-container {
|
||||
background-color: #ccc;
|
||||
border-radius: 5px;
|
||||
height: 15px;
|
||||
padding: 5px;
|
||||
width: 98%;
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: #4caf50;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* Sektion 5 - Aktuelle Projekte*/
|
||||
.projects-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 35px auto;
|
||||
width: 85%;
|
||||
padding: 25px;
|
||||
padding-bottom: 35px;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.project {
|
||||
display: flex;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 25px 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
width: 90%;
|
||||
text-align: left; /* Text linksbündig */
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(150,150,150,0.3);
|
||||
}
|
||||
.project-text h3 {
|
||||
font-size: clamp(15px, 3vw, 25px);
|
||||
font-family: 'Metal Mania';
|
||||
}
|
||||
.project-text p {
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
}
|
||||
.project-text a {
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
text-decoration: none;
|
||||
color: red;
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
}
|
||||
.project-content {
|
||||
display: flex; /* Flexbox für Bild und Text */
|
||||
align-items: center; /* Zentriere die Elemente vertikal */
|
||||
}
|
||||
.project-image {
|
||||
width: 100px; /* Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
max-width: 100%; /* Maximale Breite beibehalten */
|
||||
border-radius: 5px;
|
||||
margin-right: 15px; /* Abstand zwischen Bild und Text */
|
||||
}
|
||||
.project-text {
|
||||
flex: 1; /* Text nimmt den restlichen Platz ein */
|
||||
}
|
||||
|
||||
/* Sektion 6 - Kontakt */
|
||||
.main6_Container {
|
||||
margin: 35px auto;
|
||||
width: 85%;
|
||||
padding: 25px;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.main6_Form {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 25px;
|
||||
filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
Executable
+35
@@ -0,0 +1,35 @@
|
||||
.impressum {
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
max-width: 980px;
|
||||
height: auto;
|
||||
border-radius: 25px;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Dunklerer Hintergrund für besseren Kontrast */
|
||||
padding: 20px;
|
||||
color: white; /* Schriftfarbe weiß */
|
||||
line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
|
||||
font-size: 16px; /* Schriftgröße für bessere Lesbarkeit */
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
}
|
||||
|
||||
/* Für Links im Impressum */
|
||||
.impressum a {
|
||||
color: #00aaff; /* Farbige Links, die sich abheben */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.impressum a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Für Überschriften im Impressum */
|
||||
.impressum h1, .impressum strong {
|
||||
color: #ffffff; /* Weiße Schrift für Überschriften und wichtige Punkte */
|
||||
font-weight: bold;
|
||||
}
|
||||
Executable
+69
@@ -0,0 +1,69 @@
|
||||
.linktree {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.treeText {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: white;
|
||||
font-size: clamp(25px, 4vw, 100px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
padding-bottom: 10px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
border-bottom: solid 1px red;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.links-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
gap: 30px; /* Abstand zwischen den Links */
|
||||
}
|
||||
.link {
|
||||
background-color: rgba(100,100,100,0.5);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 25px 25px 10px 10px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
}
|
||||
.link:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.link {
|
||||
width: calc(33.33% - 20px); /* 3 Links nebeneinander */
|
||||
}
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.link {
|
||||
width: calc(50% - 20px); /* 2 Links nebeneinander */
|
||||
}
|
||||
}
|
||||
@media (max-width: 399px) {
|
||||
.link {
|
||||
width: 100%; /* 1 Link pro Zeile */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user