▲ 1 r/OnlyAICoding
Hilfe gesucht: Navigationsleiste verschiebt sich / Responsive Design Probleme
Hallo zusammen,
ich arbeite gerade an einer Website für mein Projekt "ACIDLAB". Da ich selbst kein Profi bin, habe ich den Großteil des Codes mit KI generiert. Ich verstehe zwar grob, was der Code macht, komme aber beim Feinschliff für die mobilen Ansichten an meine Grenzen.
Meine Probleme:
- Navbar: Das Logo und die Links verschieben sich unschön oder überlappen, wenn der Bildschirm kleiner wird.
- Mobile Ansicht: Ich hätte gerne, dass auf dem Smartphone das Logo oben steht und die Links sauber darunter angeordnet sind (statt nebeneinander gequetscht).
Ich habe das Gefühl, dass sich einige CSS-Befehle gegenseitig stören (Konflikte). Hat jemand Tipps, wie ich die Media Queries sauber aufbaue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIY Monster Creations | Custom Showcase</title>
<link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
:root {
--bg-color: #050505;
--card-bg: rgba(255, 255, 255, 0.03);
--neon-green: #00ff40;
--neon-orange: #ff6a00;
--neon-pink: #ff007f;
--text-main: #ffffff;
--text-dim: #a0a0a0;
--transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
h1, h2, .accent-font {
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
letter-spacing: 4px;
}
/* BACKGROUND */
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: radial-gradient(circle at 50% 50%, #111 0%, #000 100%);
}
/* Ersetze deinen bisherigen nav-Bereich und die Media Queries mit diesem stabilen Block */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 5%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(5, 5, 5, 0.9); /* Etwas dunkler für bessere Lesbarkeit */
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-item {
color: var(--text-dim);
text-decoration: none;
font-family: 'Syncopate', sans-serif;
font-size: 0.7rem;
font-weight: 550;
letter-spacing: 2px;
text-transform: uppercase;
transition: var(--transition);
position: relative;
}
.nav-item:hover {
color: var(--neon-green);
}
.nav-item::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: var(--neon-green);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-item:hover::after {
width: 100%;
}
.logo {
font-weight: 700;
font-size: 1.2rem;
border-left: 3px solid var(--neon-green);
padding-left: 10px;
}
/* HERO */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1rem;
}
/* Beispiel für Michroma als Hauptüberschrift */
h1, .logo-main {
font-family: 'Michroma', sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
color: var(--neon-green);
text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}
/* Beispiel für Share Tech Mono bei den Details */
.model-number {
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: #888;
}
.hero h1 {
font-size: clamp(2rem, 8vw, 5rem);
background: linear-gradient(to bottom, #fff, #444);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.hero p {
color: var(--text-dim);
max-width: 600px;
font-weight: 300;
}
/* SHOWCASE & CARDS */
.showcase {
padding: 5rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
.can-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 10rem;
align-items: center;
opacity: 0;
transform: translateY(50px);
}
/* CAROUSEL */
.carousel-container {
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--card-bg);
border: 1px solid rgba(255,255,255,0.1);
transition: var(--transition);
aspect-ratio: 4/5;
display: flex;
align-items: center;
cursor: pointer;
}
.carousel-container:hover {
border-color: var(--accent-color) !important;
box-shadow: 0 0 30px var(--glow-color), 0 0 55px var(--glow-color);
transform: translateY(-8px);
}
.carousel-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform;
}
.carousel-track img {
min-width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.4);
border: none;
color: white;
padding: 15px;
cursor: pointer;
z-index: 10;
font-size: 1.2rem;
backdrop-filter: blur(5px);
transition: var(--transition);
}
.prev { left: 0; border-radius: 0 10px 10px 0; }
.next { right: 0; border-radius: 10px 0 0 10px; }
.carousel-dots {
position: absolute;
bottom: 15px;
width: 100%;
display: flex;
justify-content: center;
gap: 8px;
z-index: 5;
}
.dot {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.dot.active {
background: var(--accent-color);
transform: scale(1.3);
box-shadow: 0 0 10px var(--accent-color);
}
/* INFO SECTION */
.info h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.info p {
color: var(--text-dim);
line-height: 1.8;
margin-bottom: 2rem;
}
.tag {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
background: rgba(255,255,255,0.1);
margin-bottom: 1rem;
border: 1px solid var(--accent-color);
color: var(--accent-color);
}
.btn-glow {
padding: 1rem 2.5rem;
background: transparent;
color: white;
border: 1px solid white;
font-family: 'Syncopate';
font-size: 0.8rem;
cursor: pointer;
transition: var(--transition);
}
.btn-glow:hover {
background: var(--accent-color);
border-color: var(--accent-color);
box-shadow: 0 0 20px var(--accent-color);
color: black;
}
/* FOOTER */
footer {
padding: 6rem 2rem 4rem;
text-align: center;
border-top: 1px solid rgba(0, 255, 65, 0.1);
background: linear-gradient(to top, rgba(0, 255, 65, 0.03), transparent);
position: relative;
z-index: 10;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.social-links {
display: flex;
gap: 2rem;
justify-content: center;
padding: 20px;
}
.social-item {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-dim);
font-size: 1.6rem;
text-decoration: none;
transition: var(--transition);
}
.social-item:hover {
color: var(--neon-green);
border-color: var(--neon-green);
background: rgba(0, 255, 65, 0.05);
box-shadow: 0 0 25px rgba(0, 255, 65, 0.5);
}
footer p {
font-size: 0.65rem;
letter-spacing: 3px;
color: var(--text-dim);
font-family: 'Syncopate', sans-serif;
opacity: 0.6;
text-transform: uppercase;
}
.hero h1 {
font-size: clamp(2.5rem, 10vw, 6.5rem);
line-height: 1.1;
color: #ffffff; /* WICHTIG: Kein Gradient mehr, sonst klappt der Glow nicht */
position: relative;
display: inline-block;
filter: url(#acid-burn) contrast(1.1); /* Säure-Effekt */
margin-bottom: 2rem;
text-transform: uppercase;
}
/* Der Scanner-Lichtstrahl bleibt erhalten */
.hero h1::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 15%;
height: 100%;
background: linear-gradient(to right, transparent, var(--neon-green), transparent);
box-shadow: 0 0 30px var(--neon-green);
animation: scanner 5s linear infinite;
mix-blend-mode: overlay;
pointer-events: none;
}
scanner {
0% { left: -100%; }
100% { left: 200%; }
}
/* Wenn der Scanner drüberfährt, leuchten die Buchstaben auf */
.glitch-char {
display: inline-block;
min-width: 0.5em; /* Verhindert das Springen der Buchstaben */
}
/* --- RESPONSIVE DESIGN --- */
/* TABLET & KLEINE DESKTOPS */
(max-width: 900px) {
.can-card {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.can-card:nth-child(even) .info {
order: 2;
}
}
/* HANDY-MODUS (NAVBAR FIX) */
(max-width: 650px) {
nav {
flex-direction: column; /* Stapelt Logo und Links[cite: 3] */
padding: 1rem 5%;
height: auto; /* Nav passt sich der neuen Höhe an[cite: 3] */
gap: 1rem;
}
.nav-links {
gap: 1.2rem; /* Weniger Abstand zwischen den Wörtern[cite: 3] */
width: 100%;
justify-content: center; /* Zentriert die Links[cite: 3] */
flex-wrap: wrap; /* Verhindert Abschneiden bei extrem schmalen Handys[cite: 3] */
}
.mobile-break {
display: block; /* Erzwingt den Umbruch auf dem Handy */
}
.hero h1 {
font-size: 2.2rem; /* Etwas kleiner, damit es nicht sprengt */
line-height: 1.2;
letter-spacing: 2px;
}
}
u/media (min-width: 651px) {
.mobile-break {
display: none; /* Versteckt den Umbruch am PC */
}
.nav-item {
font-size: 0.55rem; /* Kompakter für kleine Bildschirme[cite: 3] */
letter-spacing: 1px;
}
.logo {
font-size: 1rem;
margin-bottom: 5px;
}
.hero h1 {
font-size: 2.5rem; /* Überschrift auf Handy etwas kleiner[cite: 3] */
}
}
</style>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;">
<filter id="acid-burn">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="5" />
</filter>
</svg>
<div id="canvas-container"></div>
<nav>
<div class="logo">ACLX-07 // ACIDLAB</div>
<div class="nav-links">
<a href="menu/home.html" class="nav-item">Home</a>
<a href="menu/lab.html" class="nav-item">Lab</a>
<a href="menu/about.html" class="nav-item">About</a>
<a href="menu/contact.html" class="nav-item">Contact</a>
</div>
</nav>
<section class="hero">
<h1 id="hero-title">LABORATORY-BRED <br class="mobile-break"> ELEGANCE</h1>
<p class="hero-subtext">A premium archive of hand-crafted, mutated, and artistic Monster Energy custom builds.</p>
</section>
<main class="showcase">
<!-- CARD 1 -->
<article class="can-card" style="--accent-color: var(--neon-pink); --glow-color: rgba(255, 0, 43, 0.3);">
<div class="carousel-container">
<div class="carousel-track">
<img src="bilder/22789.jpg">
<img src="bilder/22794.jpg">
<img src="bilder/23409.png">
</div>
<button class="nav-btn prev">‹</button>
<button class="nav-btn next">›</button>
<div class="carousel-dots"></div>
</div>
<div class="info">
<span class="tag">HORROR EDITION</span>
<h2>TERRIFIER ULTRA</h2>
<p>Inspired by modern slasher aesthetics...</p>
<button class="btn-glow">VIEW DETAILS</button>
</div>
</article>
<!-- CARD 2 -->
<article class="can-card" style="--accent-color: var(--neon-green); --glow-color: rgba(0,255,65,0.3);">
<div class="info">
<span class="tag">MUTATION</span>
<h2>TOXIC SLUDGE</h2>
<p>Reactive phosphorescent glow effect...</p>
<button class="btn-glow">VIEW LAB SPECS</button>
</div>
<div class="carousel-container">
<div class="carousel-track">
<img src="bilder/22798.jpg">
<img src="bilder/22794.jpg">
</div>
<button class="nav-btn prev">‹</button>
<button class="nav-btn next">›</button>
<div class="carousel-dots"></div>
</div>
</article>
<!-- CARD 3 -->
<article class="can-card" style="--accent-color: #ff6976; --glow-color: rgba(255,105,180,0.3);">
<div class="carousel-container">
<div class="carousel-track">
<img src="bilder/22789.jpg">
<img src="bilder/23410.png">
</div>
<button class="nav-btn prev">‹</button>
<button class="nav-btn next">›</button>
<div class="carousel-dots"></div>
</div>
<div class="info">
<span class="tag">CROSSOVER</span>
<h2>KAWAII CHAOS</h2>
<p>Brutalist pop culture fusion...</p>
<button class="btn-glow">COLLECTION</button>
</div>
</article>
</main>
<footer>
<div class="footer-content">
<div class="social-links">
<!-- TikTok -->
<a href="https://tiktok.com/@vavs_777" target="_blank" class="social-item">
<i class="fa-brands fa-tiktok"></i>
</a>
<!-- Instagram -->
<a href="https://instagram.com/vavs77_" target="_blank" class="social-item">
<i class="fa-brands fa-instagram"></i>
</a>
<!-- E-Mail -->
<a href="mailto:vavulgukul@gmail.com?subject=Monster%20Customs%20Anfrage" class="social-item">
<i class="fa-regular fa-envelope"></i>
</a>
</div>
<p>VAVS_ARCHIVE is an independent art project. Not affiliated with Monster Energy Company</p>
<p>© 2026 DIY MONSTER CREATIONS</p>
</div>
</footer>
<script>
gsap.registerPlugin(ScrollTrigger);
const heroTitle = document.getElementById('hero-title');
const finalTitle = "LABORATORY-BRED ELEGANCE";
const symbols = "☣☢017SCUM∑X$";
// 1. TERMINAL-INFECTION (Der Aufbau-Effekt)
function initInfection() {
let iteration = 0;
const interval = setInterval(() => {
heroTitle.innerHTML = finalTitle.split("").map((letter, index) => {
// Schutz für das Leerzeichen und den Handy-Umbruch
if (finalTitle[index] === " ") {
return `<br class="mobile-break"><span style="display:inline-block; width:0.4em;">&nbsp;</span>`;
}
if (index < iteration) {
return `<span class="glitch-char" style="color:white; opacity:1;">${finalTitle[index]}</span>`;
}
return `<span class="glitch-char" style="color:var(--neon-green); opacity:0.9;">${symbols[Math.floor(Math.random() * symbols.length)]}</span>`;
}).join("");
if (iteration >= finalTitle.length) clearInterval(interval);
iteration += 1 / 4;
}, 60);
}
// 2. INITIALISIERUNG (Sobald die Seite lädt)
window.addEventListener('load', () => {
// Starte Hacker-Script statt GSAP für den Titel
initInfection();
// Untertitel sanft einblenden, sobald der Hacker-Effekt läuft
gsap.from(".hero-subtext", {
duration: 2,
opacity: 0,
y: 20,
delay: 1.2,
ease: "power2.out"
});
});
// 3. DAUERHAFTE MUTATION (Zufälliges Flackern einzelner Buchstaben)
setInterval(() => {
const chars = document.querySelectorAll('.glitch-char');
if(chars.length > 0) {
const i = Math.floor(Math.random() * chars.length);
const originalText = chars[i].innerText;
if(originalText && originalText.trim() !== "") {
chars[i].innerText = symbols[Math.floor(Math.random() * symbols.length)];
chars[i].style.color = "var(--neon-green)";
setTimeout(() => {
chars[i].innerText = originalText;
chars[i].style.color = "white";
}, 400);
}
}
}, 2500);
// 4. BACKGROUND PARTICLES (Sektor 07 Atmo)
const canvasContainer = document.getElementById('canvas-container');
function createParticle() {
const p = document.createElement('div');
p.style.position = 'absolute';
p.style.width = '2px';
p.style.height = '2px';
p.style.background = 'rgba(255,255,255,0.1)';
p.style.left = Math.random() * 100 + "%"; // Zufällige horizontale Position
canvasContainer.appendChild(p);
gsap.to(p, {
y: -window.innerHeight,
opacity: 0,
duration: Math.random() * 5 + 5,
repeat: -1,
ease: "none"
});
}
for (let i = 0; i < 50; i++) createParticle();
// 5. SCROLL-ANIMATIONEN FÜR DIE KARTEN
gsap.utils.toArray('.can-card').forEach(card => {
gsap.to(card, {
scrollTrigger: { trigger: card, start: "top 85%" },
opacity: 1,
y: 0,
duration: 1.2
});
});
// 6. KARUSSELL-LOGIK
document.querySelectorAll('.can-card').forEach(card => {
const track = card.querySelector('.carousel-track');
const imgs = card.querySelectorAll('img');
const next = card.querySelector('.next');
const prev = card.querySelector('.prev');
const dots = card.querySelector('.carousel-dots');
let index = 0;
imgs.forEach((_, i) => {
const dot = document.createElement('div');
dot.classList.add('dot');
if (i === 0) dot.classList.add('active');
dot.onclick = () => { index = i; update(); };
dots.appendChild(dot);
});
function update() {
gsap.to(track, { x: -(index * 100) + "%" });
card.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === index));
}
next.onclick = () => { index = (index + 1) % imgs.length; update(); };
prev.onclick = () => { index = (index - 1 + imgs.length) % imgs.length; update(); };
});
</script>
</body>
</html>
Vielen Dank für eure Hilfe!
u/Entire_Debt1301 — 3 days ago