feat: initial game1 portal website
This commit is contained in:
803
index.html
Normal file
803
index.html
Normal file
@@ -0,0 +1,803 @@
|
|||||||
|
<!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>
|
||||||
Reference in New Issue
Block a user