Files
game1.shadow-land.de/index.html

804 lines
24 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GAME1 Dein Gaming Portal</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0a0a12;
--surface: #12121f;
--surface2: #1a1a2e;
--border: #2a2a4a;
--accent: #ff3e6c;
--accent2: #7b2dff;
--text: #e8e8f0;
--muted: #8888aa;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Segoe UI', system-ui, sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
/* Animated background */
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(123, 45, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(123, 45, 255, 0.05) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* Nav */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(10, 10, 18, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 32px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
font-size: 1.4rem;
font-weight: 900;
background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
letter-spacing: 2px;
}
.nav-links {
display: flex;
gap: 8px;
list-style: none;
}
.nav-links a {
color: var(--muted);
text-decoration: none;
padding: 8px 14px;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
transition: all 0.2s;
}
.nav-links a:hover {
color: var(--text);
background: var(--surface2);
}
/* Hero */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px 40px;
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-block;
background: rgba(255, 62, 108, 0.12);
border: 1px solid rgba(255, 62, 108, 0.3);
color: var(--accent);
padding: 6px 16px;
border-radius: 50px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(2.5rem, 8vw, 5.5rem);
font-weight: 900;
line-height: 1.05;
margin-bottom: 20px;
background: linear-gradient(135deg, #fff 0%, #aaa 50%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero h1 span {
background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
color: var(--muted);
font-size: 1.1rem;
max-width: 520px;
margin-bottom: 36px;
line-height: 1.8;
}
.hero-btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: white;
box-shadow: 0 4px 24px rgba(255, 62, 108, 0.35);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(255, 62, 108, 0.5);
}
.btn-outline {
background: transparent;
color: var(--text);
border: 2px solid var(--border);
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Stats */
.stats {
display: flex;
gap: 48px;
margin-top: 64px;
padding-top: 48px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
justify-content: center;
}
.stat-item { text-align: center; }
.stat-number {
font-size: 2.4rem;
font-weight: 900;
background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label { color: var(--muted); font-size: 0.82rem; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
/* Sections */
section { padding: 90px 24px; position: relative; z-index: 1; }
.section-center { max-width: 1100px; margin: 0 auto; }
.section-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent);
margin-bottom: 12px;
}
.section-title {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 12px;
}
.section-sub {
color: var(--muted);
font-size: 1rem;
margin-bottom: 48px;
}
/* Games Grid */
.games-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.game-card {
background: var(--surface);
border-radius: 16px;
border: 1px solid var(--border);
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.game-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 8px 30px rgba(255, 62, 108, 0.15);
}
.game-img {
width: 100%;
height: 160px;
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
position: relative;
overflow: hidden;
}
.game-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(10,10,18,0.8));
}
.game-info { padding: 20px; }
.game-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.game-meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; }
.game-tag {
display: inline-block;
background: rgba(123, 45, 255, 0.12);
border: 1px solid rgba(123, 45, 255, 0.3);
color: var(--accent2);
padding: 3px 10px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
}
.game-players { color: var(--muted); font-size: 0.82rem; }
.game-players strong { color: var(--accent); }
/* Platform categories */
.platforms {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.platform-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
transition: all 0.3s;
cursor: pointer;
}
.platform-card:hover {
border-color: var(--accent2);
transform: translateY(-3px);
}
.platform-icon { font-size: 2.8rem; margin-bottom: 14px; display: block; }
.platform-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.platform-count { color: var(--muted); font-size: 0.82rem; }
/* News */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.news-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
transition: all 0.3s;
}
.news-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
}
.news-date {
font-size: 0.75rem;
color: var(--accent);
font-weight: 700;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
.news-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.5;
}
.news-excerpt {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.7;
}
.news-tag {
display: inline-block;
margin-top: 14px;
background: rgba(255, 62, 108, 0.1);
color: var(--accent);
padding: 3px 10px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
}
/* Features */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 28px;
}
.feature-icon { font-size: 2rem; margin-bottom: 14px; }
.feature-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.feature-text { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
/* Newsletter */
.newsletter {
background: linear-gradient(135deg, rgba(255,62,108,0.08), rgba(123,45,255,0.08));
border: 1px solid var(--border);
border-radius: 24px;
padding: 56px 48px;
text-align: center;
}
.newsletter h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; }
.newsletter p { color: var(--muted); margin-bottom: 28px; }
.newsletter-form {
display: flex;
gap: 10px;
max-width: 460px;
margin: 0 auto;
}
.newsletter-form input {
flex: 1;
padding: 13px 18px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface2);
color: white;
font-size: 0.92rem;
font-family: inherit;
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form input:focus { outline: none; border-color: var(--accent); }
/* Footer */
footer {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 48px 24px 28px;
position: relative;
z-index: 1;
}
.footer-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 36px;
border-bottom: 1px solid var(--border);
}
.footer-brand .nav-logo { font-size: 1.5rem; display: inline-block; margin-bottom: 10px; }
.footer-brand p { color: var(--muted); font-size: 0.85rem; line-height: 1.7; }
footer h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 9px; }
footer ul a { color: var(--muted); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
footer ul a:hover { color: var(--accent); }
.footer-bottom {
max-width: 1100px;
margin: 24px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--muted);
}
/* Scroll to top */
.scroll-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 46px;
height: 46px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: white;
border: none;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(255, 62, 108, 0.4);
transition: all 0.2s;
z-index: 99;
}
.scroll-top:hover { transform: translateY(-2px); }
.scroll-top.visible { display: flex; }
@media (max-width: 768px) {
.nav-links { display: none; }
.hero h1 { font-size: 2.5rem; }
.stats { gap: 24px; }
.platforms { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
.newsletter { padding: 36px 24px; }
.newsletter-form { flex-direction: column; }
section { padding: 60px 16px; }
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<!-- Nav -->
<nav>
<a href="#home" class="nav-logo">GAME1</a>
<ul class="nav-links">
<li><a href="#home">Start</a></li>
<li><a href="#games">Spiele</a></li>
<li><a href="#news">News</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#newsletter">Newsletter</a></li>
</ul>
</nav>
<!-- Hero -->
<section class="hero" id="home">
<div class="hero-badge">🎮 Gaming Community</div>
<h1>Dein Portal für<br><span>PC & Console Gaming</span></h1>
<p>News, Reviews, Guides und Community für Gamer in Deutschland. Alles über PC-Spiele, PlayStation, Xbox und Nintendo Switch an einem Ort.</p>
<div class="hero-btns">
<a href="#games" class="btn btn-primary">Spiele entdecken →</a>
<a href="#news" class="btn btn-outline">News lesen</a>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-number">2.400+</div>
<div class="stat-label">Spiele gelistet</div>
</div>
<div class="stat-item">
<div class="stat-number">18.500</div>
<div class="stat-label">aktive Gamer</div>
</div>
<div class="stat-item">
<div class="stat-number">890</div>
<div class="stat-label">Reviews</div>
</div>
<div class="stat-item">
<div class="stat-number">96%</div>
<div class="stat-label">Trefferquote</div>
</div>
</div>
</section>
<!-- Games -->
<section id="games">
<div class="section-center">
<span class="section-label">Spielebibliothek</span>
<h2 class="section-title">Beliebte Spiele</h2>
<p class="section-sub">Die Top-Spiele der Woche getestet und bewertet von unserer Community.</p>
<div class="games-grid">
<div class="game-card">
<div class="game-img">🎮</div>
<div class="game-info">
<div class="game-title">Cyber Odyssey 2077</div>
<div class="game-meta">
<span>PC</span><span>PS5</span><span>Xbox</span>
</div>
<div class="game-tag">RPG</div>
<div class="game-players" style="margin-top:10px;"><strong>12.400</strong> Spieler online</div>
</div>
</div>
<div class="game-card">
<div class="game-img">⚔️</div>
<div class="game-info">
<div class="game-title">Elden Ring: Shadow of the Erdtree</div>
<div class="game-meta">
<span>PC</span><span>PS5</span><span>Xbox</span>
</div>
<div class="game-tag">Action RPG</div>
<div class="game-players" style="margin-top:10px;"><strong>8.900</strong> Spieler online</div>
</div>
</div>
<div class="game-card">
<div class="game-img">🏎️</div>
<div class="game-info">
<div class="game-title">Forza Horizon 5: Rally Adventure</div>
<div class="game-meta">
<span>PC</span><span>Xbox</span>
</div>
<div class="game-tag">Racing</div>
<div class="game-players" style="margin-top:10px;"><strong>5.200</strong> Spieler online</div>
</div>
</div>
<div class="game-card">
<div class="game-img">🔫</div>
<div class="game-info">
<div class="game-title">Call of Duty: Warzone 3.0</div>
<div class="game-meta">
<span>PC</span><span>PS5</span><span>Xbox</span>
</div>
<div class="game-tag">Shooter</div>
<div class="game-players" style="margin-top:10px;"><strong>34.100</strong> Spieler online</div>
</div>
</div>
<div class="game-card">
<div class="game-img">🏗️</div>
<div class="game-info">
<div class="game-title">Minecraft: Wild Update</div>
<div class="game-meta">
<span>PC</span><span>PS5</span><span>Xbox</span><span>Switch</span>
</div>
<div class="game-tag">Sandbox</div>
<div class="game-players" style="margin-top:10px;"><strong>48.000</strong> Spieler online</div>
</div>
</div>
<div class="game-card">
<div class="game-img">🏴‍☠️</div>
<div class="game-info">
<div class="game-title">Sea of Thieves: A寿 Whole New World</div>
<div class="game-meta">
<span>PC</span><span>Xbox</span>
</div>
<div class="game-tag">Adventure</div>
<div class="game-players" style="margin-top:10px;"><strong>7.600</strong> Spieler online</div>
</div>
</div>
</div>
<div class="platforms">
<div class="platform-card">
<span class="platform-icon">🖥️</span>
<div class="platform-name">PC Gaming</div>
<div class="platform-count">1.840 Spiele</div>
</div>
<div class="platform-card">
<span class="platform-icon">🎮</span>
<div class="platform-name">PlayStation</div>
<div class="platform-count">920 Spiele</div>
</div>
<div class="platform-card">
<span class="platform-icon">🟢</span>
<div class="platform-name">Xbox / Game Pass</div>
<div class="platform-count">1.100 Spiele</div>
</div>
</div>
</div>
</section>
<!-- News -->
<section id="news" style="background: var(--surface);">
<div class="section-center">
<span class="section-label">Aktuell</span>
<h2 class="section-title">Gaming News</h2>
<p class="section-sub">Die neuesten Nachrichten aus der Welt der Videospiele.</p>
<div class="news-grid">
<div class="news-card">
<div class="news-date">24. April 2026</div>
<div class="news-title">GTA 6 erscheint im Herbst 2026 erster Gameplay-Trailer</div>
<div class="news-excerpt">Rockstar Games hat den finalen Erscheinungstermin bestätigt: GTA 6 kommt am 15. Oktober 2026 für PS5 und Xbox Series X|S.</div>
<span class="news-tag">Großes Update</span>
</div>
<div class="news-card">
<div class="news-date">23. April 2026</div>
<div class="news-title">Nintendo Switch 2: Alle Details zum neuen Flaggschiff</div>
<div class="news-excerpt">Nintendos neue Konsole kommt mit DLSS-Support, 4K-Auflösung und einer wachsenden Bibliothek von über 200 Spielen zum Launch.</div>
<span class="news-tag">Hardware</span>
</div>
<div class="news-card">
<div class="news-date">22. April 2026</div>
<div class="news-title">Steam Summer Sale 2026: Die besten Deals</div>
<div class="news-excerpt">Ab heute bis zum 5. Mai gibt es tausende Spiele mit bis zu 80% Rabatt. Wir zeigen die Highlights und Hidden Gems.</div>
<span class="news-tag">Deals</span>
</div>
<div class="news-card">
<div class="news-date">21. April 2026</div>
<div class="news-title">Esports-WM 2026: Deutschland erreicht Halbfinale</div>
<div class="news-excerpt">Das deutsche Counter-Strike 2 Team hat sich sensationell für das Halbfinale der Weltmeisterschaft qualifiziert.</div>
<span class="news-tag">Esports</span>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="section-center">
<span class="section-label">Was wir bieten</span>
<h2 class="section-title">Features</h2>
<p class="section-sub">Alles was ein Gamer braucht an einem Ort.</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📝</div>
<div class="feature-title">Reviews & Bewertungen</div>
<div class="feature-text">Über 890 Tests und Bewertungen von echten Gamern unabhängig und ehrlich. Von AAA-Blockbustern bis Indie-Perlen.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Guides & Tipps</div>
<div class="feature-text">Detaillierte Komplettlösungen, Walkthroughs und Geheimtipps für alle Spiele. Kein Bereich bleibt unentdeckt.</div>
</div>
<div class="feature-card">
<div class="feature-icon">💬</div>
<div class="feature-title">Community</div>
<div class="feature-text">18.500 aktive Gamer in unserer Community. Tauschbörse, LFG (Looking for Group) und regelmäßige Events.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛒</div>
<div class="feature-title">Preisvergleich</div>
<div class="feature-text">Immer den besten Preis finden wir vergleichen alle Stores: Steam, Epic, GOG, Humble und mehr.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📺</div>
<div class="feature-title">Live-Streams</div>
<div class="feature-text">Wöchentliche Live-Streams mit Spielesessions, Q&As und Turnieren. Twitch, YouTube und我们的 eigene Plattform.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🏆</div>
<div class="feature-title">Turniere</div>
<div class="feature-text">Monatliche Online-Turniere mit Preisen. Von Casual bis Competitive für jeden Rang und jedes Skill-Level.</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section id="newsletter">
<div class="section-center">
<div class="newsletter">
<h2>🎮 Bleib am Ball</h2>
<p>Erhalte die besten Gaming-Deals, News und Guides direkt in dein Postfach wöchentlich, kostenlos.</p>
<form class="newsletter-form" onsubmit="handleNewsletter(event)">
<input type="email" placeholder="deine@email.de" required>
<button type="submit" class="btn btn-primary">Abonnieren</button>
</form>
<p id="nlSuccess" style="display:none;margin-top:16px;color:#22c55e;font-size:0.9rem;">✓ Abonniert! Willkommen in der GAME1-Familie.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-grid">
<div class="footer-brand">
<a href="#home" class="nav-logo">GAME1</a>
<p>Dein Gaming-Portal für PC und Console in Deutschland. News, Reviews, Guides und Community seit 2019.</p>
</div>
<div>
<h4>Spiele</h4>
<ul>
<li><a href="#games">PC-Spiele</a></li>
<li><a href="#games">PlayStation</a></li>
<li><a href="#games">Xbox</a></li>
<li><a href="#games">Nintendo</a></li>
</ul>
</div>
<div>
<h4>Ressourcen</h4>
<ul>
<li><a href="#news">News</a></li>
<li><a href="#features">Reviews</a></li>
<li><a href="#features">Guides</a></li>
<li><a href="#features">Preisvergleich</a></li>
</ul>
</div>
<div>
<h4>Rechtliches</h4>
<ul>
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Cookie-Einstellungen</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 GAME1 Alle Rechte vorbehalten</span>
<span>Gemacht mit 🎮 in Deutschland</span>
</div>
</footer>
<!-- Scroll to top -->
<button class="scroll-top" id="scrollTop" onclick="window.scrollTo({top:0,behavior:'smooth'})"></button>
<script>
// Newsletter
function handleNewsletter(e) {
e.preventDefault();
document.getElementById('nlSuccess').style.display = 'block';
e.target.reset();
}
// Scroll to top
window.addEventListener('scroll', () => {
document.getElementById('scrollTop').classList.toggle('visible', window.scrollY > 500);
});
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(a.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
</script>
</body>
</html>