diff --git a/errors/404.html b/errors/404.html
index 5ddd2b4..5642586 100644
--- a/errors/404.html
+++ b/errors/404.html
@@ -1,11 +1,57 @@
-
+
- Document
+ Br0tcraft
+
- Looser
-
+
+
+
+
+
+
+
+
+
+
+
+ Hier ist leider nichts
+
+
+
+
+
+
\ No newline at end of file
diff --git a/img/Background.png b/img/Background1.png
similarity index 100%
rename from img/Background.png
rename to img/Background1.png
diff --git a/img/Background2.jpg b/img/Background2.jpg
new file mode 100644
index 0000000..1f8eaee
Binary files /dev/null and b/img/Background2.jpg differ
diff --git a/img/Background3.jpg b/img/Background3.jpg
new file mode 100644
index 0000000..e6d4ec1
Binary files /dev/null and b/img/Background3.jpg differ
diff --git a/img/Background4.jpg b/img/Background4.jpg
new file mode 100644
index 0000000..8f11fd2
Binary files /dev/null and b/img/Background4.jpg differ
diff --git a/img/SpielTypen/AndroidGames.png b/img/SpielTypen/AndroidGames.png
new file mode 100644
index 0000000..824336e
Binary files /dev/null and b/img/SpielTypen/AndroidGames.png differ
diff --git a/img/SpielTypen/Discordbot.png b/img/SpielTypen/Discordbot.png
new file mode 100644
index 0000000..79d0b87
Binary files /dev/null and b/img/SpielTypen/Discordbot.png differ
diff --git a/img/SpielTypen/itchio.png b/img/SpielTypen/itchio.png
new file mode 100644
index 0000000..f25284d
Binary files /dev/null and b/img/SpielTypen/itchio.png differ
diff --git a/img/contact/Email.png b/img/contact/Email.png
new file mode 100644
index 0000000..5df053b
Binary files /dev/null and b/img/contact/Email.png differ
diff --git a/img/contact/discord.png b/img/contact/discord.png
new file mode 100644
index 0000000..239a6e7
Binary files /dev/null and b/img/contact/discord.png differ
diff --git a/img/errors/404.jpg b/img/errors/404.jpg
new file mode 100644
index 0000000..35875c6
Binary files /dev/null and b/img/errors/404.jpg differ
diff --git a/index.html b/index.html
index 03e74ea..661eecc 100644
--- a/index.html
+++ b/index.html
@@ -1,76 +1,58 @@
-
+
Br0tcraft
-
-
-
+
+
-
-
-
+
+
+
- Spiele
+ Anwendungen
- Tutorials
-
-
-
Turbowarp-Extensions
- Funny Seiten von mir
-
+ Handbücher
+ Dev-Blogs
+ Sonstiges
-
+
diff --git a/style.css b/style.css
index 8e6ec7c..1303df1 100644
--- a/style.css
+++ b/style.css
@@ -19,10 +19,10 @@ body {
top: 0px;
left: 0px;
width: 100%;
- height: 7vw;
+ height: 5vw;
position: fixed;
background-color: rgb(77, 0, 0);
- z-index: 0;
+ z-index: 1;
}
.header-container {
@@ -40,12 +40,13 @@ body {
}
.container {
+ z-index: 5;
position: fixed;
right: 32px;
left: 10px;
top: 0px;
font-family: Orbitron;
- font-size: 24px;
+ font-size: 25px;
display: flex;
align-items: center;
justify-content: space-between;
@@ -55,8 +56,7 @@ body {
color: white;
text-decoration: none;
margin-left: 0px;
- font-size: 6vw;
-
+ font-size: 4vw;
}
.menu-link {
@@ -77,29 +77,44 @@ body {
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; /* Standardmäßig ausblenden */
+ display: none;
cursor: pointer;
position: fixed;
- top: 0.5vw;
- right: 20px;
+ top: 1vw;
+ right: 10px;
+ width: 30px;
+ height: 24px;
+ flex-direction: column;
+ justify-content: space-between;
}
.hamburger-icon {
- width: 30px;
+ width: 100%;
height: 3px;
background-color: white;
- margin: 6px 0;
}
.menu-links {
display: flex;
align-items: center;
- justify-content: flex-end; /* Rechts ausrichten */
-}
-
-.menu-links.show {
- display: flex;
+ justify-content: flex-end;
}
.menu {
@@ -109,7 +124,7 @@ body {
left: 0;
width: 100%;
height: 100%;
- background-color: #333; /* Hintergrundfarbe des Menüs */
+ background-color: #333;
z-index: 1000;
}
@@ -120,7 +135,7 @@ body {
text-decoration: none;
display: block;
font-size: 250%;
- margin: 20px; /* Abstand zwischen den Links hinzufügen */
+ margin: 20px;
}
.mobile-menu {
@@ -134,43 +149,106 @@ body {
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 {
+ 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;
+ height: auto;
+ max-width: 50vw; /* Maximale Breite des Bildes */
+ object-fit: cover; /* Bildfüllung */
+ margin-bottom: 10px; /* Abstand zwischen den Bildern */
+ }
.mobile-menu-icon {
- display: block; /* Bei kleinen Bildschirmen anzeigen */
+ display: flex;
}
- .hamburger-icon {
- display: block;
+ .errornothingpc {
+ display: none;
+ }
+
+ .errornothingmobile {
+ display: block; /* Zeigt das Element auf mobilen Geräten */
+
}
.menu-links {
- display: none;
- flex-direction: column;
- position: absolute;
- top: 80px;
- right: 0; /* Rechts ausrichten */
- background-color: #333;
- width: 100%;
- justify-content: flex-start; /* Links oben ausrichten */
+ display: none;
}
- .menu-links.show {
- display: flex;
+ .contact-icons {
+ position: static;
+ top: auto;
+ left: auto;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ margin-top: 10px;
+
}
- .mobile-menu.show {
- display: block;
- background-color: rgb(104, 0, 0);
+ .header-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
- .KategorieLink {
- width: 24%;
+ .contact-icon {
+ width: 5vw;
+ height: 4.2vw;
+ margin: 0 10px;
}
+
+ .email-icon {
+ filter: invert(100%);
}
+}
+
.ElementListe {
display: block;
-}
\ No newline at end of file
+}
+
+ 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+