br0tkasten/test.br0tcraft.de
1
0
Fork 0
Code

Compare commits

base: br0tkasten:4b58dad683d62d80ce0d9c811eb76b9071d21675
Branches Tags
br0tkasten:main
..
compare: br0tkasten:2bf65a6b58aeb81cbd48f9a976a32d6728a678a3
Branches Tags
br0tkasten:main

No commits in common. "4b58dad683d62d80ce0d9c811eb76b9071d21675" and "2bf65a6b58aeb81cbd48f9a976a32d6728a678a3" have entirely different histories.
4b58dad683 ... 2bf65a6b58

5 changed files with 84 additions and 123 deletions
Show Stats Expand all files Collapse all files

BIN
img/Background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 695 KiB

BIN
img/Redstone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

99
index.html
View File

@ -5,34 +5,97 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Br0tcraft</title> <title>Br0tcraft</title>
<link rel="stylesheet" href="style.css"> <style>
@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";
}
.header-container {
position: relative;
height: 80vh;
width: 100%;
overflow: hidden;
}
.header-image {
width: 100%;
object-fit: cover;
filter: brightness(0.5);
}
.Phrasen {
position: absolute;
bottom: 5%; /* Ändere den Wert nach Bedarf */
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 1vw; /* Ändere den Wert nach Bedarf */
text-align: center;
width: 100%;
}
.container {
position: absolute;
right: 32px;
left: 32px;
top: 16px;
font-family: Orbitron;
font-size: 24px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.logo {
width: calc(15% * 2);
}
.menu-link {
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: 40px;
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
margin-top: 20px; /* Füge einen Abstand zum Text darunter hinzu */
}
</style>
</head> </head>
<body> <body>
<div class="header-container"> <div class="header-container">
<img class="header-image" src="img/Background.png" /> <img class="header-image" src="img/Redstone.png" />
<div class="Phrasen">
<h1>Programming, exploring, trying</h1>
</div>
</div> </div>
<div class="container"> <div class="container">
<a class="menu-link-home" href="">BR0TCRAFT</a> <img src="img/Logo.png" class="logo" />
<div class="mobile-menu-icon" onclick="toggleMenu()"> <div>
<div class="bar"></div> <a class="menu-link" href="">Home</a>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="menu-links">
<a class="menu-link" href="">Kontakt</a> <a class="menu-link" href="">Kontakt</a>
<a class="menu-link" href="">Spiele</a> <a class="menu-link" href="">Spiele</a>
</div> </div>
</div> </div>
<h1 class="headline">Meine Werke</h1> <h1 class="headline">Meine Werke</h1>
<!-- Weitere HTML-Elemente und Skripte hier einfügen -->
<script>
function toggleMenu() {
var menuLinks = document.querySelector('.menu-links');
menuLinks.classList.toggle('show');
}
</script>
</body> </body>
</html> </html>

105
style.css
View File

@ -1,105 +0,0 @@
@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";
}
.header-container {
position: relative;
width: 100%;
overflow: hidden;
}
.header-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 5%;
}
.container {
position: absolute;
right: 32px;
left: 32px;
top: 16px;
font-family: Orbitron;
font-size: 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: calc(15% * 2);
}
.menu-link-home {
color: white;
text-decoration: none;
margin-left: 0px;
font-size: 50px;
}
.menu-link {
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: 40px;
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
}
.mobile-menu-icon {
display: none; /* Standardmäßig ausblenden */
cursor: pointer;
}
.menu-links {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.mobile-menu-icon {
display: block; /* Bei kleinen Bildschirmen anzeigen */
}
.menu-links {
display: none; /* Bei kleinen Bildschirmen ausblenden */
flex-direction: column;
position: absolute;
top: 80px; /* Passen Sie dies an, um die Position anzupassen */
left: 0;
background-color: #333; /* Hintergrundfarbe des Menüs */
width: 100%;
}
.menu-link {
padding: 10px;
text-align: center;
color: white;
text-decoration: none;
}
.menu-links.show {
display: flex; /* Bei Klick auf das Symbol anzeigen */
}
}

3
styles.css Normal file
View File

@ -0,0 +1,3 @@
h1 {
color: rgb(255, 0, 0);
}