new design
This commit is contained in:
br0tcraft
399
style.css
399
style.css
@@ -1,254 +1,161 @@
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("/fonts/Roboto/Roboto-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("/fonts/Orbitron/Orbitron-Black.ttf");
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Orbitron";
|
||||
background-color: white;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.Leiste {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 5vw;
|
||||
position: fixed;
|
||||
background-color: rgb(77, 0, 0);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
top: 3vw;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
right: 32px;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
font-family: Orbitron;
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-link-home {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-left: 0px;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.menu-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.headline {
|
||||
text-align: center;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 4vw;
|
||||
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
/* Stile für die Kontakt-Icons */
|
||||
.contact-icons {
|
||||
position: fixed;
|
||||
top:6vw;
|
||||
left: 2%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 4vw; /* Neue Breite */
|
||||
height: 3vw; /* Neue Höhe */
|
||||
margin: 10px 0vw;
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
top: 1vw;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.menu-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.menu-link-mobile {
|
||||
color: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-size: 250%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-menu.show {
|
||||
display: block;
|
||||
background-color: rgb(104, 0, 0);
|
||||
}
|
||||
|
||||
.KategorieLink {
|
||||
width: 300px;
|
||||
}
|
||||
.errornothingmobile {
|
||||
display: none; /* Standardmäßig versteckt */
|
||||
position: relative; /* Positioniert relativ zum umgebenden Container */
|
||||
margin-top: 20px; /* Abstand zum oberen Rand des Containers */
|
||||
color: black; /* Schwarze Schriftfarbe */
|
||||
text-align: center; /* Textzentrierung */
|
||||
}
|
||||
.errornothingpc {
|
||||
position: fixed; /* Absolut relativ zum Container */
|
||||
top: 4vw; /* Anpassen je nach Bedarf */
|
||||
left: 50%;
|
||||
transform: translateX(-50%); /* Horizontale Zentrierung */
|
||||
color: white; /* Schriftfarbe */
|
||||
z-index: 1; /* Höherer Z-Index, um über dem Bild zu bleiben */
|
||||
text-align: center; /* Textzentrierung */
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.error404img {
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 937px) {
|
||||
|
||||
.ElementListe {
|
||||
font-family: 'Orbitron';
|
||||
src: url('fonts/Orbitron-Black.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('fonts/Roboto-Regular.ttf') format('truetype');
|
||||
}
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #120000;
|
||||
color: #ffb3b3;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.header {
|
||||
background-color: #330000;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-bottom: 5px solid #660000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 2.5em;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.header-image {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: 90px;
|
||||
}
|
||||
.header-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.contact-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.contact-icons img {
|
||||
width: auto;
|
||||
height: 4vw;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.container {
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center; /* Zentriert die Elemente */
|
||||
gap: 10px; /* Fügt einen gleichmäßigen Abstand zwischen den Elementen hinzu */
|
||||
padding: 10px; /* Fügt einen Abstand zu den Rändern des Containers hinzu */
|
||||
}
|
||||
|
||||
.KategorieLink {
|
||||
width: 45vw;
|
||||
justify-content: center;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #ff6666;
|
||||
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.item {
|
||||
background-color: #220000;
|
||||
color: #ffcccc;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.item-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px; /* Spacing around the content */
|
||||
}
|
||||
|
||||
.item-content img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
max-width: 50vw; /* Maximale Breite des Bildes */
|
||||
object-fit: cover; /* Bildfüllung */
|
||||
margin-bottom: 10px; /* Abstand zwischen den Bildern */
|
||||
max-height: calc(100% - 0px); /* Adjust image height here */
|
||||
top: 5px;
|
||||
object-fit: cover; /* Cover the area and maintain aspect ratio */
|
||||
border-radius: 10px; /* Round all corners of the image */
|
||||
}
|
||||
|
||||
.item-text {
|
||||
position: absolute;
|
||||
bottom: 10px; /* Space from the bottom */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border: 1px solid #ff6666;
|
||||
border-radius: 11px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.item {
|
||||
width: calc(50% - 20px);
|
||||
height: calc(50vw - 20px);
|
||||
}
|
||||
.mobile-menu-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.errornothingpc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.errornothingmobile {
|
||||
display: block; /* Zeigt das Element auf mobilen Geräten */
|
||||
|
||||
}
|
||||
|
||||
.menu-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact-icons {
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.section {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
.contact-icons img {
|
||||
width: auto;
|
||||
height: 10vw;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.devvlog-item {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 5vw;
|
||||
height: 4.2vw;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.email-icon {
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.ElementListe {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.anleitung-item {
|
||||
height: 300px;
|
||||
}
|
||||
Reference in New Issue
Block a user