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

2 neue Kategorien und neue Anordnung

Browse Source
This commit is contained in:
Alexander 2024-01-03 17:00:13 +01:00
parent 0944b22034
commit c59ec05672
2 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -20,29 +20,36 @@
</div> </div>
<div class="menu-links"> <div class="menu-links">
<!-- Gemeinsame Links für Desktop und mobile Ansichten --> <!-- Gemeinsame Links für Desktop und mobile Ansichten -->
<a class="menu-link" href="">Kontakt</a>
<a class="menu-link" href="">Spiele</a> <a class="menu-link" href="">Spiele</a>
<a class="menu-link" href="">Tutorials</a>
<a class="menu-link" href="">Extensions</a>
<a class="menu-link" href="">Kontakt</a>
</div> </div>
</div> </div>
<div class="mobile-menu" onclick="toggleMenu()"> <div class="mobile-menu" onclick="toggleMenu()">
<a class="menu-link-mobile" href="">Kontakt</a> <a class="menu-link-home" href="">BR0TCRAFT</a>
<a class="menu-link-mobile" href="">Spiele</a> <a class="menu-link-mobile" href="">Spiele</a>
<a class="menu-link-mobile" href="">Tutorials</a>
<a class="menu-link-mobile" href="">Turbowarp-Extensions</a>
<a class="menu-link-mobile" href="">Kontakt</a>
</div> </div>
<h1 class="headline">Meine Spiele</h1> <h1 class="headline">Spiele</h1>
<div class="SpielTypen"> <div class="SpielTypen">
<a href="" class="KategorieLink" <a href=""
><img src="img/SpielTypen/Javascript.png" alt="" ><img src="img/SpielTypen/Javascript.png" class="KategorieLink"
/></a> /></a>
<a href="" class="KategorieLink" <a href=""
><img src="img/SpielTypen/PocketCode.png" alt="" ><img src="img/SpielTypen/PocketCode.png" class="KategorieLink"
/></a> /></a>
<a href="" class="KategorieLink" <a href=""
><img src="img/SpielTypen/Unity.png" alt="" ><img src="img/SpielTypen/Unity.png" class="KategorieLink"
/></a> /></a>
<a href="" class="KategorieLink" <a href=""
><img src="img/SpielTypen/Turbowarp.png" alt="" ><img src="img/SpielTypen/Turbowarp.png" class="KategorieLink"
/></a> /></a>
</div> </div>
<h1 class="headline">Tutorials</h1>
<h1 class="headline">Turbowarp-Extensions</h1>
<script> <script>
function toggleMenu() { function toggleMenu() {

27
style.css
View File

@ -17,19 +17,18 @@ body {
.header-container { .header-container {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.header-image { .header-image {
width: 100%; width: 100%;
height: 70%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.container { .container {
position: absolute; position: absolute;
right: 32px; right: 32px;
left: 32px; left: 10px;
top: 16px; top: 16px;
font-family: Orbitron; font-family: Orbitron;
font-size: 24px; font-size: 24px;
@ -38,10 +37,6 @@ body {
justify-content: space-between; justify-content: space-between;
} }
.logo {
width: calc(15% * 2);
}
.menu-link-home { .menu-link-home {
color: white; color: white;
text-decoration: none; text-decoration: none;
@ -62,7 +57,7 @@ body {
.headline { .headline {
text-align: center; text-align: center;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
font-size: 5vw; font-size: 4vw;
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26); text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
} }
@ -106,7 +101,7 @@ body {
text-decoration: none; text-decoration: none;
display: block; display: block;
font-size: 250%; font-size: 250%;
margin: 10px; /* Abstand zwischen den Links hinzufügen */ margin: 20px; /* Abstand zwischen den Links hinzufügen */
} }
.mobile-menu { .mobile-menu {
@ -120,7 +115,11 @@ body {
z-index: 1000; z-index: 1000;
} }
@media screen and (max-width: 768px) { .KategorieLink {
width: 300px;
}
@media screen and (max-width: 937px) {
.mobile-menu-icon { .mobile-menu-icon {
display: block; /* Bei kleinen Bildschirmen anzeigen */ display: block; /* Bei kleinen Bildschirmen anzeigen */
} }
@ -148,11 +147,11 @@ body {
display: block; display: block;
background-color: rgb(104, 0, 0); background-color: rgb(104, 0, 0);
} }
.KategorieLink {
width: 24%;
}
} }
.Spieletypen { .Spieletypen {
display: block; display: block;
} }
.KategorieLink{
width: 22vw;
height: 100%;
}