new design
This commit is contained in:
br0tcraft
parent
cca9436850
commit
2d9368f770
346
apps/Br0tbot/index.html
Normal file
346
apps/Br0tbot/index.html
Normal file
@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<link rel="icon" href="/img/favicon.jpg" type="image/png">
|
||||
<meta charset="UTF-8">
|
||||
<title>BR0TCRAFT</title>
|
||||
<style>
|
||||
@font-face {
|
||||
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);
|
||||
}
|
||||
.container {
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: 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: left;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
background-color: #220000;
|
||||
color: #ffcccc;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item-content img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-left: 20px;
|
||||
width: calc(100% - 220px);
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #660000;
|
||||
color: #ffffff;
|
||||
padding: 10px 0px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #ff6666;
|
||||
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
.description {
|
||||
margin-top: 20px; /* Space from the carousel */
|
||||
padding: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
|
||||
border-radius: 10px;
|
||||
border: 2px solid #660000; /* Red border */
|
||||
}
|
||||
.description p {
|
||||
color: #ffcccc; /* Light red text color */
|
||||
font-size: 1.1em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.buttons {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
perspective: 1200px;
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.carousel {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease;
|
||||
transform-style: preserve-3d;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.carousel-item {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel-item:nth-child(1) {
|
||||
transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
|
||||
}
|
||||
.carousel-item:nth-child(2) {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.carousel-item:nth-child(3) {
|
||||
transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
|
||||
}
|
||||
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.carousel-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
padding: 0; /* Remove padding */
|
||||
}
|
||||
.carousel-button {
|
||||
background-color: #660000;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
margin: 0 10px; /* Add margin */
|
||||
}
|
||||
.carousel-button:hover {
|
||||
background-color: #ff6666;
|
||||
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a href="/" style="text-decoration: none; color: inherit;">
|
||||
<h1>BR0TCRAFT</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<div class="section-title">Br0tbot (in Entwicklung, kann noch nicht alles)</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<img src="/img/Apps/TigerBr0tbot.jpg" alt="App 1 Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="#" class="button">Spielen</a>
|
||||
<a href="#" class="button">Herunterladen</a>
|
||||
<a href="#" class="button">Github-Repository</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Dies ist der Python-Code für einen Discord-Bot, der als vielseitiger Allrounder entwickelt wurde. Der Bot beherrscht die wichtigsten Funktionen, die man von einem Discord-Bot erwartet. Dazu gehören beispielsweise das Akzeptieren von Regeln, das Begrüßen und Verabschieden von Mitgliedern, das Zuweisen von Rollen, das Erstellen von Tickets, ein Levelsystem, die Kontrolle des Servers sowie das Erstellen von Statistiken.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Zusätzlich gibt es auch unterhaltsame Funktionen zur Zeitvertreibung, wie etwa einen "Counting"-Kanal, einen "Coins"-Kanal und vieles mehr. Über den Button "Spielen" gelangt man zu einer Seite, auf der der Bot eingerichtet werden kann.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Der Bot ist Open Source und für das Selbst-Hosting gedacht.
|
||||
</p>
|
||||
<p>
|
||||
Ps: Der Bot ist noch in Entwicklung und es stehen evtl noch nicht alle versprochenen funktionen zur Verfügunng
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div class="carousel">
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Snake/snake1.PNG" alt="App 1 Image 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/TigerBr0tbot.jpg" alt="App 1 Image 2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Snake/Snake2.png" alt="App 1 Image 3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-controls">
|
||||
<button class="carousel-button prev"><</button>
|
||||
<button class="carousel-button next">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const carousel = document.querySelector('.carousel');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevButton = document.querySelector('.prev');
|
||||
const nextButton = document.querySelector('.next');
|
||||
|
||||
let currentItem = 2; // Start with the middle item
|
||||
|
||||
function updateCarousel() {
|
||||
items.forEach((item, index) => {
|
||||
if (index === currentItem - 1) {
|
||||
// Center item
|
||||
item.style.transform = 'translateX(-50%)';
|
||||
} else if (index < currentItem - 1) {
|
||||
// Items to the left
|
||||
item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
|
||||
} else {
|
||||
// Items to the right
|
||||
item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
prevButton.addEventListener('click', () => {
|
||||
currentItem--;
|
||||
if (currentItem < 1) {
|
||||
currentItem = items.length;
|
||||
}
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
nextButton.addEventListener('click', () => {
|
||||
currentItem++;
|
||||
if (currentItem > items.length) {
|
||||
currentItem = 1;
|
||||
}
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
updateCarousel();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
332
apps/Tiny-Snake/index.html
Normal file
332
apps/Tiny-Snake/index.html
Normal file
@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<link rel="icon" href="/img/favicon.jpg" type="image/png">
|
||||
<meta charset="UTF-8">
|
||||
<title>BR0TCRAFT</title>
|
||||
<style>
|
||||
@font-face {
|
||||
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);
|
||||
}
|
||||
.container {
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: 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: left;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
background-color: #220000;
|
||||
color: #ffcccc;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item-content img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-left: 20px;
|
||||
width: calc(100% - 220px);
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #660000;
|
||||
color: #ffffff;
|
||||
padding: 10px 0px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #ff6666;
|
||||
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
.description {
|
||||
margin-top: 20px; /* Space from the carousel */
|
||||
padding: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
|
||||
border-radius: 10px;
|
||||
border: 2px solid #660000; /* Red border */
|
||||
}
|
||||
.description p {
|
||||
color: #ffcccc; /* Light red text color */
|
||||
font-size: 1.1em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.buttons {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
perspective: 1200px;
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.carousel {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease;
|
||||
transform-style: preserve-3d;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.carousel-item {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel-item:nth-child(1) {
|
||||
transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
|
||||
}
|
||||
.carousel-item:nth-child(2) {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.carousel-item:nth-child(3) {
|
||||
transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
|
||||
}
|
||||
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.carousel-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
padding: 0; /* Remove padding */
|
||||
}
|
||||
.carousel-button {
|
||||
background-color: #660000;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
margin: 0 10px; /* Add margin */
|
||||
}
|
||||
.carousel-button:hover {
|
||||
background-color: #ff6666;
|
||||
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a href="/" style="text-decoration: none; color: inherit;">
|
||||
<h1>BR0TCRAFT</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<div class="section-title">Tiny Snake</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<img src="/img/Apps/snake.jpg" alt="App 1 Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="#" class="button">Spielen</a>
|
||||
<a href="#" class="button">Herunterladen</a>
|
||||
<a href="#" class="button">Github-Repository</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Hier ist das nächste große AAA-game. Naja nicht wirklich. Also eigentlich ist es ein super einfaches Snake game, ohne vielen funktionen. Das erstaunliche dabei ist das es so kompakt wie (für mich) möglich ist. Funktioniert leider nur am PC. Man bewegt die Schlange mit den Pfeiltasten</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div class="carousel">
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Snake/snake1.PNG" alt="App 1 Image 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/snake.jpg" alt="App 1 Image 2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Snake/Snake2.png" alt="App 1 Image 3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-controls">
|
||||
<button class="carousel-button prev"><</button>
|
||||
<button class="carousel-button next">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const carousel = document.querySelector('.carousel');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevButton = document.querySelector('.prev');
|
||||
const nextButton = document.querySelector('.next');
|
||||
|
||||
let currentItem = 2; // Start with the middle item
|
||||
|
||||
function updateCarousel() {
|
||||
items.forEach((item, index) => {
|
||||
if (index === currentItem - 1) {
|
||||
// Center item
|
||||
item.style.transform = 'translateX(-50%)';
|
||||
} else if (index < currentItem - 1) {
|
||||
// Items to the left
|
||||
item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
|
||||
} else {
|
||||
// Items to the right
|
||||
item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
prevButton.addEventListener('click', () => {
|
||||
currentItem--;
|
||||
if (currentItem < 1) {
|
||||
currentItem = items.length;
|
||||
}
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
nextButton.addEventListener('click', () => {
|
||||
currentItem++;
|
||||
if (currentItem > items.length) {
|
||||
currentItem = 1;
|
||||
}
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
updateCarousel();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Br0tcraft</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header-container">
|
||||
|
||||
<img class="error404img" src="/img/errors/404.jpg" />
|
||||
<h1 class="errornothingpc">Hier ist leider nichts</h1>
|
||||
</div>
|
||||
<div class="Background-Leiste"></div>
|
||||
<div class="Leiste"></div>
|
||||
<div class="container">
|
||||
|
||||
<a class="menu-link-home" href="/">BR0TCRAFT</a>
|
||||
<div class="mobile-menu-icon" onclick="toggleMenu()">
|
||||
|
||||
<div class="hamburger-icon"></div>
|
||||
<div class="hamburger-icon"></div>
|
||||
<div class="hamburger-icon"></div>
|
||||
</div>
|
||||
<div class="menu-links">
|
||||
|
||||
<a class="menu-link" href="">Anwendungen</a>
|
||||
<a class="menu-link" href="">Handbücher</a>
|
||||
<a class="menu-link" href="">Dev-Blogs</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" onclick="toggleMenu()">
|
||||
<a class="menu-link-home" href="">BR0TCRAFT</a>
|
||||
<br><br><br>
|
||||
<a class="menu-link-mobile" href="">Anwendungen</a>
|
||||
<a class="menu-link-mobile" href="">Handbücher</a>
|
||||
<a class="menu-link-mobile" href="">Dev-Blogs</a>
|
||||
</div>
|
||||
<h1 class="errornothingmobile">Hier ist leider nichts</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
var menuLinks = document.querySelector(".menu-links");
|
||||
var mobileMenu = document.querySelector(".mobile-menu");
|
||||
var body = document.body;
|
||||
|
||||
menuLinks.classList.toggle("show");
|
||||
mobileMenu.classList.toggle("show");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
197
html+css.html
197
html+css.html
@ -1,197 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Br0tcraft</title>
|
||||
|
||||
<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";
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.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: 6vw;
|
||||
}
|
||||
|
||||
.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: 5vw;
|
||||
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
display: none; /* Standardmäßig ausblenden */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
width: 30px;
|
||||
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;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333; /* Hintergrundfarbe des Menüs */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.menu-link-mobile {
|
||||
color: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-size: 250%;
|
||||
margin: 10px; /* Abstand zwischen den Links hinzufügen */
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.mobile-menu-icon {
|
||||
display: block; /* Bei kleinen Bildschirmen anzeigen */
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
.menu-links.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mobile-menu.show {
|
||||
display: block;
|
||||
background-color: rgb(104, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header-container">
|
||||
<img class="header-image" src="img/Background.png" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<a class="menu-link-home" href="">BR0TCRAFT</a>
|
||||
<div class="mobile-menu-icon" onclick="toggleMenu()">
|
||||
<div class="hamburger-icon"></div>
|
||||
<div class="hamburger-icon"></div>
|
||||
<div class="hamburger-icon"></div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" onclick="toggleMenu()">
|
||||
<a class="menu-link-mobile" href="">Kontakt</a>
|
||||
<a class="menu-link-mobile" href="">Spiele</a>
|
||||
</div>
|
||||
<h1 class="headline">Meine Werke</h1>
|
||||
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
var menuLinks = document.querySelector(".menu-links");
|
||||
var mobileMenu = document.querySelector(".mobile-menu");
|
||||
var body = document.body;
|
||||
|
||||
menuLinks.classList.toggle("show");
|
||||
mobileMenu.classList.toggle("show");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
img/Apps/Snake/Snake2.png
Normal file
BIN
img/Apps/Snake/Snake2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 B |
BIN
img/Apps/Snake/snake1.PNG
Normal file
BIN
img/Apps/Snake/snake1.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
img/Apps/TigerBr0tbot-large.png
Normal file
BIN
img/Apps/TigerBr0tbot-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 KiB |
BIN
img/Apps/TigerBr0tbot.jpg
Normal file
BIN
img/Apps/TigerBr0tbot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
img/Apps/snake-large.png
Normal file
BIN
img/Apps/snake-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
img/Apps/snake.jpg
Normal file
BIN
img/Apps/snake.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 695 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
BIN
img/contact/github.png
Normal file
BIN
img/contact/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
img/favicon.jpg
Normal file
BIN
img/favicon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
111
index.html
111
index.html
@ -1,58 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Br0tcraft</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="icon" href="img/favicon.jpg" type="image/png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta charset="UTF-8">
|
||||
<title>BR0TCRAFT</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header-container">
|
||||
<img class="header-image" src="img/Background2.jpg" />
|
||||
<div class="contact-icons">
|
||||
<a href="https://example.com" target="_blank">
|
||||
<img src="img/contact/discord.png" class="contact-icon" />
|
||||
</a>
|
||||
<a href="mailto:info@br0tcraft.de">
|
||||
<img src="img/contact/email.png" class="contact-icon email-icon" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Leiste"></div>
|
||||
<div class="container">
|
||||
<a class="menu-link-home" href="">BR0TCRAFT</a>
|
||||
<div class="menu-links">
|
||||
<a class="menu-link" href="/Anwendungen">Anwendungen</a>
|
||||
<a class="menu-link" href="/Handbücher">Handbücher</a>
|
||||
<a class="menu-link" href="/Dev-Blogs">Dev-Blogs</a>
|
||||
</div>
|
||||
<div class="mobile-menu-icon" onclick="toggleMenu()">
|
||||
<div class="hamburger-icon"></div>
|
||||
<div class="hamburger-icon"></div>
|
||||
<div class="hamburger-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" onclick="toggleMenu()">
|
||||
<a class="menu-link-mobile" href="/Anwendungen">Anwendungen</a>
|
||||
<a class="menu-link-mobile" href="/Handbücher">Handbücher</a>
|
||||
<a class="menu-link-mobile" href="/Dev-Blogs">Dev-Blogs</a>
|
||||
</div>
|
||||
<h1 class="headline">Anwendungen</h1>
|
||||
<div class="ElementListe">
|
||||
<a href="/Unity"><img src="img/SpielTypen/Unity.png" class="KategorieLink" /></a>
|
||||
<a href="/Javascript"><img src="img/SpielTypen/Javascript.png" class="KategorieLink" /></a>
|
||||
<a href="/Turbowarp"><img src="img/SpielTypen/Turbowarp.png" class="KategorieLink" /></a>
|
||||
<a href="/Android"><img src="img/SpielTypen/AndroidGames.png" class="KategorieLink" /></a>
|
||||
<a href="/itchio"><img src="img/SpielTypen/itchio.png" class="KategorieLink" /></a>
|
||||
</div>
|
||||
<h1 class="headline">Handbücher</h1>
|
||||
<h1 class="headline">Dev-Blogs</h1>
|
||||
<h1 class="headline">Sonstiges</h1>
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
var mobileMenu = document.querySelector(".mobile-menu");
|
||||
mobileMenu.classList.toggle("show");
|
||||
}
|
||||
</script>
|
||||
<div class="header">
|
||||
<h1>BR0TCRAFT</h1>
|
||||
</div>
|
||||
<div class="header-image">
|
||||
<img src="img/Background3.jpg" alt="Header Image">
|
||||
</div>
|
||||
<div class="contact-icons">
|
||||
<a href="your discord link" target="_blank"><img src="img/contact/discord.png" alt="Discord"></a>
|
||||
<a href="mailto:info.br0tcraft.de"><img src="img/contact/email.png" alt="Email"></a>
|
||||
<a href="https://github.com/Br0tcraft"><img src="img/contact/github.png" alt="Email"></a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<div class="section-title">Apps</div>
|
||||
<a href="apps/Br0tbot/index.html" class="item">
|
||||
<div class="item-content">
|
||||
<img src="img/Apps/TigerBr0tbot-large.png" alt="App 1 Image">
|
||||
<div class="item-text">Br0tbot</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="apps/Tiny-Snake/index.html" class="item">
|
||||
<div class="item-content">
|
||||
<img src="img/Apps/snake-large.png" alt="App 1 Image">
|
||||
<div class="item-text">Tiny Snake</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section-title">Skripts</div>
|
||||
<a href="link-to-script1" class="item devvlog-item">Skript1</a>
|
||||
<a href="link-to-script2" class="item devvlog-item">Skript2</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section-title">Devvlogs</div>
|
||||
<a href="link-to-devvlog1" class="item devvlog-item">Devvlog 1</a>
|
||||
<a href="link-to-devvlog2" class="item devvlog-item">Devvlog 2</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section-title">Anleitungen</div>
|
||||
<a href="link-to-anleitung1" class="item anleitung-item">Anleitung 1</a>
|
||||
<a href="link-to-anleitung2" class="item anleitung-item">Anleitung 2</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("visibilitychange", (event) => {
|
||||
if (document.visibilityState == "visible") {
|
||||
document.title = "BR0TCRAFT";
|
||||
} else {
|
||||
document.title = "Come back, please";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
7
play/Tiny-Snake/snake.html
Normal file
7
play/Tiny-Snake/snake.html
Normal file
@ -0,0 +1,7 @@
|
||||
<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Snake</title><style>body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background:#000;}canvas{background:#222}</style>
|
||||
</head><body><canvas id="c"></canvas><script>let c=document.getElementById('c'),x=c.getContext('2d'),p=20,t=[{x:200,y:200}],f={x:60,y:60},d=39;c.width=c.height=400;
|
||||
setInterval(()=>{t.unshift({x:(t[0].x+(d==37?-p:d==39?p:0)+c.width)%c.width,y:(t[0].y+(d==38?-p:d==40?p:0)+c.height)%c.height});
|
||||
if(t[0].x==f.x&&t[0].y==f.y)f={x:~~(Math.random()*20)*p,y:~~(Math.random()*20)*p};else t.pop();x.fillStyle='lime';x.clearRect(0,0,c.width,c.height);t.forEach(e=>x.fillRect(e.x,e.y,p,p));
|
||||
x.fillStyle='red';x.fillRect(f.x,f.y,p,p);if(t.slice(1).some(e=>e.x==t[0].x&&e.y==t[0].y))t=[{x:200,y:200}],f={x:60,y:60},d=39;},100);onkeydown=e=>d=e.keyCode-32&&e.keyCode;
|
||||
</script></body></html>
|
||||
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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user