| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NoahsAPP · Team</title> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg: #050a0f; |
| --accent: #00d4ff; |
| --accent2: #ff6b35; |
| --purple: #a855f7; |
| --glow: rgba(0,212,255,0.3); |
| --text: #e0f4ff; |
| --muted: #4a7a99; |
| } |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| background: var(--bg); |
| color: var(--text); |
| font-family: 'Rajdhani', sans-serif; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| body::before { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px); |
| background-size: 60px 60px; |
| animation: gridScroll 20s linear infinite; |
| pointer-events: none; |
| z-index: 0; |
| } |
| |
| @keyframes gridScroll { |
| 0% { transform: translateY(0); } |
| 100% { transform: translateY(60px); } |
| } |
| |
| body::after { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px); |
| pointer-events: none; |
| z-index: 0; |
| } |
| |
| header { |
| position: fixed; |
| top: 0; left: 0; right: 0; |
| z-index: 100; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 20px 40px; |
| background: linear-gradient(180deg, rgba(5,10,15,0.95) 0%, transparent 100%); |
| backdrop-filter: blur(10px); |
| } |
| |
| .logo { |
| font-family: 'Orbitron', monospace; |
| font-weight: 900; |
| font-size: 1.8rem; |
| letter-spacing: 0.1em; |
| color: var(--accent); |
| text-shadow: 0 0 20px var(--glow); |
| text-decoration: none; |
| } |
| |
| .logo span { color: var(--accent2); } |
| |
| .back-btn { |
| font-family: 'Orbitron', monospace; |
| font-size: 0.85rem; |
| font-weight: 700; |
| letter-spacing: 0.15em; |
| padding: 10px 28px; |
| background: transparent; |
| border: 2px solid var(--muted); |
| color: var(--muted); |
| cursor: pointer; |
| text-decoration: none; |
| display: inline-block; |
| clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); |
| transition: all 0.3s; |
| } |
| |
| .back-btn:hover { |
| border-color: var(--accent); |
| color: var(--accent); |
| } |
| |
| |
| .page { |
| position: relative; |
| z-index: 1; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 120px 40px 80px; |
| } |
| |
| .page-title { |
| font-family: 'Orbitron', monospace; |
| font-size: clamp(2rem, 5vw, 4rem); |
| font-weight: 900; |
| letter-spacing: 0.2em; |
| text-align: center; |
| margin-bottom: 16px; |
| background: linear-gradient(135deg, #fff 0%, var(--accent) 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| animation: fadeUp 0.8s ease-out forwards; |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| |
| @keyframes fadeUp { |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .page-sub { |
| font-size: 1rem; |
| color: var(--muted); |
| letter-spacing: 0.3em; |
| text-transform: uppercase; |
| text-align: center; |
| margin-bottom: 60px; |
| animation: fadeUp 0.8s 0.2s ease-out forwards; |
| opacity: 0; |
| } |
| |
| |
| .team-grid { |
| display: flex; |
| gap: 32px; |
| flex-wrap: wrap; |
| justify-content: center; |
| max-width: 1000px; |
| } |
| |
| .member-card { |
| background: linear-gradient(135deg, rgba(10,21,32,0.95) 0%, rgba(5,10,15,0.98) 100%); |
| border: 1px solid rgba(0,212,255,0.15); |
| padding: 48px 36px; |
| text-align: center; |
| width: 260px; |
| position: relative; |
| clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); |
| animation: memberReveal 0.8s ease-out forwards; |
| opacity: 0; |
| transform: translateY(40px) scale(0.95); |
| transition: transform 0.4s, box-shadow 0.4s; |
| } |
| |
| .member-card:nth-child(1) { animation-delay: 0.4s; border-color: rgba(0,212,255,0.25); } |
| .member-card:nth-child(2) { animation-delay: 0.6s; border-color: rgba(255,107,53,0.2); } |
| .member-card:nth-child(3) { animation-delay: 0.8s; border-color: rgba(168,85,247,0.2); } |
| |
| @keyframes memberReveal { |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
| |
| .member-card:nth-child(1):hover { |
| transform: translateY(-8px); |
| box-shadow: 0 30px 80px rgba(0,212,255,0.15); |
| } |
| |
| .member-card:nth-child(2):hover { |
| transform: translateY(-8px); |
| box-shadow: 0 30px 80px rgba(255,107,53,0.12); |
| } |
| |
| .member-card:nth-child(3):hover { |
| transform: translateY(-8px); |
| box-shadow: 0 30px 80px rgba(168,85,247,0.12); |
| } |
| |
| |
| .member-card::after { |
| content: ''; |
| position: absolute; |
| top: 0; right: 0; |
| width: 0; height: 0; |
| border-style: solid; |
| } |
| |
| .member-card:nth-child(1)::after { border-width: 0 24px 24px 0; border-color: transparent var(--accent) transparent transparent; } |
| .member-card:nth-child(2)::after { border-width: 0 24px 24px 0; border-color: transparent var(--accent2) transparent transparent; } |
| .member-card:nth-child(3)::after { border-width: 0 24px 24px 0; border-color: transparent var(--purple) transparent transparent; } |
| |
| |
| .avatar { |
| width: 80px; |
| height: 80px; |
| border-radius: 50%; |
| margin: 0 auto 24px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: 'Orbitron', monospace; |
| font-size: 1.6rem; |
| font-weight: 900; |
| position: relative; |
| } |
| |
| .avatar::before { |
| content: ''; |
| position: absolute; |
| inset: -3px; |
| border-radius: 50%; |
| animation: spinBorder 4s linear infinite; |
| } |
| |
| @keyframes spinBorder { |
| to { transform: rotate(360deg); } |
| } |
| |
| .avatar-1 { |
| background: rgba(0,212,255,0.1); |
| color: var(--accent); |
| border: 2px solid rgba(0,212,255,0.3); |
| text-shadow: 0 0 20px rgba(0,212,255,0.8); |
| } |
| |
| .avatar-1::before { |
| background: conic-gradient(from 0deg, transparent 70%, var(--accent) 100%); |
| border-radius: 50%; |
| } |
| |
| .avatar-2 { |
| background: rgba(255,107,53,0.1); |
| color: var(--accent2); |
| border: 2px solid rgba(255,107,53,0.3); |
| text-shadow: 0 0 20px rgba(255,107,53,0.8); |
| } |
| |
| .avatar-2::before { |
| background: conic-gradient(from 0deg, transparent 70%, var(--accent2) 100%); |
| border-radius: 50%; |
| } |
| |
| .avatar-3 { |
| background: rgba(168,85,247,0.1); |
| color: var(--purple); |
| border: 2px solid rgba(168,85,247,0.3); |
| text-shadow: 0 0 20px rgba(168,85,247,0.8); |
| } |
| |
| .avatar-3::before { |
| background: conic-gradient(from 0deg, transparent 70%, var(--purple) 100%); |
| border-radius: 50%; |
| } |
| |
| .avatar span { position: relative; z-index: 1; } |
| |
| .member-name { |
| font-family: 'Orbitron', monospace; |
| font-size: 1.4rem; |
| font-weight: 700; |
| letter-spacing: 0.1em; |
| margin-bottom: 10px; |
| color: #fff; |
| } |
| |
| .member-role { |
| font-size: 0.8rem; |
| letter-spacing: 0.25em; |
| text-transform: uppercase; |
| font-weight: 600; |
| padding: 6px 16px; |
| display: inline-block; |
| clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%); |
| margin-bottom: 16px; |
| } |
| |
| .role-owner { |
| background: rgba(0,212,255,0.1); |
| border: 1px solid rgba(0,212,255,0.4); |
| color: var(--accent); |
| } |
| |
| .role-admin { |
| background: rgba(255,107,53,0.1); |
| border: 1px solid rgba(255,107,53,0.4); |
| color: var(--accent2); |
| } |
| |
| .role-sup { |
| background: rgba(168,85,247,0.1); |
| border: 1px solid rgba(168,85,247,0.4); |
| color: var(--purple); |
| } |
| |
| .member-desc { |
| font-size: 0.9rem; |
| color: var(--muted); |
| line-height: 1.6; |
| font-weight: 300; |
| } |
| |
| |
| .member-card:first-child .member-name::after { |
| content: ' ★'; |
| color: var(--accent); |
| font-size: 0.9rem; |
| } |
| |
| footer { |
| position: relative; |
| z-index: 1; |
| text-align: center; |
| padding: 40px; |
| border-top: 1px solid rgba(0,212,255,0.1); |
| font-family: 'Orbitron', monospace; |
| font-size: 0.6rem; |
| letter-spacing: 0.3em; |
| color: var(--muted); |
| margin-top: 60px; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <header> |
| <a href="index.html" class="logo">Noahs<span>APP</span></a> |
| <a href="index.html" class="back-btn">◀ ZURÜCK</a> |
| </header> |
|
|
| <div class="page"> |
| <h1 class="page-title">DAS TEAM</h1> |
| <p class="page-sub">die Leute hinter NoahsAPP</p> |
|
|
| <div class="team-grid"> |
|
|
| <div class="member-card"> |
| <div class="avatar avatar-1"><span>N</span></div> |
| <div class="member-name">Noah</div> |
| <div class="member-role role-owner">Owner / Dev</div> |
| <p class="member-desc">Gründer & Entwickler von NoahsAPP. Baut alles von KI bis Roblox-Scripts.</p> |
| </div> |
|
|
| <div class="member-card"> |
| <div class="avatar avatar-2"><span>I</span></div> |
| <div class="member-name">ice</div> |
| <div class="member-role role-admin">Admin</div> |
| <p class="member-desc">Hält den Server am laufen und sorgt für Ordnung in der Community.</p> |
| </div> |
|
|
| <div class="member-card"> |
| <div class="avatar avatar-3"><span>V</span></div> |
| <div class="member-name">Vex</div> |
| <div class="member-role role-sup">Sr. Support</div> |
| <p class="member-desc">Erster Ansprechpartner bei Fragen – hilft schnell und zuverlässig.</p> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| <footer>© 2025 NoahsAPP · Team</footer> |
|
|
| </body> |
| </html> |
|
|
