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 class="menu-links">
<!-- 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="">Tutorials</a>
<a class="menu-link" href="">Extensions</a>
<a class="menu-link" href="">Kontakt</a>
</div>
</div>
<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="">Tutorials</a>
<a class="menu-link-mobile" href="">Turbowarp-Extensions</a>
<a class="menu-link-mobile" href="">Kontakt</a>
</div>
<h1 class="headline">Meine Spiele</h1>
<h1 class="headline">Spiele</h1>
<div class="SpielTypen">
<a href="" class="KategorieLink"
><img src="img/SpielTypen/Javascript.png" alt=""
<a href=""
><img src="img/SpielTypen/Javascript.png" class="KategorieLink"
/></a>
<a href="" class="KategorieLink"
><img src="img/SpielTypen/PocketCode.png" alt=""
<a href=""
><img src="img/SpielTypen/PocketCode.png" class="KategorieLink"
/></a>
<a href="" class="KategorieLink"
><img src="img/SpielTypen/Unity.png" alt=""
<a href=""
><img src="img/SpielTypen/Unity.png" class="KategorieLink"
/></a>
<a href="" class="KategorieLink"
><img src="img/SpielTypen/Turbowarp.png" alt=""
<a href=""
><img src="img/SpielTypen/Turbowarp.png" class="KategorieLink"
/></a>
</div>
<h1 class="headline">Tutorials</h1>
<h1 class="headline">Turbowarp-Extensions</h1>
<script>
function toggleMenu() {

29
style.css
View File

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