commit ac8b4bd2e6e249d27a3e951d25a3b26a37b63434 Author: admin Date: Thu Jun 25 21:24:44 2026 +0000 initial commit diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..a9884dd --- /dev/null +++ b/css/style.css @@ -0,0 +1,160 @@ +*{box-sizing:border-box;margin:0;padding:0} +html,body{ + background:#0a0c10; + color:#e8eaed; + font-family:'Inter',system-ui,-apple-system,sans-serif; + font-weight:400; + line-height:1.5; + min-height:100vh; + -webkit-font-smoothing:antialiased; +} + +/* Subtle grid background across whole page */ +body::before{ + content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; + background: + linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px, + linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px, + radial-gradient(ellipse at 50% 0%,#0f141c 0%,#06080b 70%); +} +body::after{ + content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; + box-shadow:inset 0 0 220px 60px rgba(0,0,0,.9); +} + +/* HEADER with soldier image banner */ +.site-header{ + position:relative; + border-bottom:1px solid #1a2230; + padding:4.5rem 1.5rem 4rem; + overflow:hidden; + isolation:isolate; +} +.site-header::before{ + content:"";position:absolute;inset:0;z-index:-2; + background:url('../images/TeamGattaca1.png') center/cover no-repeat; + filter:brightness(.32) contrast(1.1) saturate(.85) hue-rotate(-10deg); + transform:scale(1.05); +} +.site-header::after{ + content:"";position:absolute;inset:0;z-index:-1; + background: + linear-gradient(180deg,rgba(10,12,16,.5) 0%,rgba(10,12,16,.85) 70%,#0a0c10 100%), + linear-gradient(90deg,rgba(10,12,16,.6) 0%,transparent 50%,rgba(10,12,16,.6) 100%); +} +.header-inner{ + max-width:1100px;margin:0 auto; + display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem; + position:relative; +} +.logo{ + height:150px;width:auto; + filter:drop-shadow(0 8px 24px rgba(0,0,0,.7)); +} +.tagline{background:linear-gradient(180deg,#ffffff 0%,#7fdfff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; + font-family:'Chakra Petch','Inter',sans-serif; + font-size:clamp(2rem,4.5vw,3.4rem); + font-weight:700;letter-spacing:.005em;line-height:1.1; + color:#cfe8f5; + text-shadow:0 2px 18px rgba(0,0,0,.65); + text-transform:uppercase; + position:relative; + padding-bottom:.9rem; +} +.tagline::after{ + content:""; + position:absolute;left:50%;bottom:0; + transform:translateX(-50%) skewX(-20deg); + width:90px;height:3px; + background:linear-gradient(90deg,transparent,#00e5ff,transparent); + box-shadow:0 0 14px rgba(0,229,255,.6); +} +.sub{ + color:#a8b0bc;font-size:1.1rem;max-width:540px;font-weight:500; + letter-spacing:.01em; +} + +/* MAIN */ +.container{ + max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem 4rem; +} +.section-label{ + display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem; +} +.section-label span{ + font-family:'Chakra Petch','Inter',sans-serif; + font-size:.85rem;font-weight:700;letter-spacing:.32em; + text-transform:uppercase;color:#00e5ff; + text-shadow:0 0 12px rgba(0,229,255,.35); +} +.section-label .line{ + flex:1;height:1px;background:linear-gradient(90deg,rgba(0,229,255,.4),transparent); +} + +/* GRID */ +.grid{ + display:grid; + grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); + gap:1.25rem; +} +.tile{ + position:relative; + background:#11141b; + border:1px solid #1f2530; + border-radius:10px; + overflow:hidden; + text-decoration:none;color:inherit; + display:flex;flex-direction:column; + transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; +} +.tile::before{ + content:"";position:absolute;top:0;left:0;right:0;height:2px; + background:linear-gradient(90deg,transparent,#00e5ff,transparent); + opacity:0;transition:opacity .25s ease; +} +.tile:hover{ + transform:translateY(-4px); + border-color:#2a3848; + background:#151923; + box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 22px rgba(0,229,255,.08); +} +.tile:hover::before{opacity:1} +.tile-cover{ + height:130px; + border-bottom:1px solid #1f2530; + position:relative; +} +.tile-cover::after{ + content:"";position:absolute;inset:0; + background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,229,255,.04) 12px 24px); +} +.tile-body{ + padding:1.1rem 1.2rem 1.3rem; +} +.tile-body h2{ + font-family:'Chakra Petch','Inter',sans-serif; + font-size:1.3rem;font-weight:700;letter-spacing:.01em; + margin-bottom:.3rem;color:#cfe8f5; + text-transform:uppercase; +} +.tile-body p{ + font-size:.92rem;color:#9aa0a8;font-weight:500; +} +.tile-soon{ + opacity:.55;pointer-events:none; +} + +/* FOOTER */ +.site-footer{ + border-top:1px solid #1a2230; + padding:1.5rem; + text-align:center; + color:#6b7079;font-size:.85rem; + font-family:'Chakra Petch','Inter',sans-serif; + letter-spacing:.08em; +} + +@media (max-width:520px){ + .logo{height:110px} + .site-header{padding:3rem 1.5rem 2.5rem} +} diff --git a/images/TeamGattaca1.png b/images/TeamGattaca1.png new file mode 100644 index 0000000..e1958e5 Binary files /dev/null and b/images/TeamGattaca1.png differ diff --git a/images/TeamGattaca2.png b/images/TeamGattaca2.png new file mode 100644 index 0000000..7df85d9 Binary files /dev/null and b/images/TeamGattaca2.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3a371d3 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + +Team Gattaca + + + + + + + + + +
+
+ +

Team Gattaca Game Hub

+

Guides, maps, and strategies — all in one place.

+
+
+ +
+
+ Games +
+
+ +
+ +
+
+

Escape From Tarkov

+

Maps, Goons, Flea Market, and more!

+
+ + +
+
+
+

Coming Soon

+

Another site on the way.

+
+
+ +
+
+
+

Coming Soon

+

Another site on the way.

+
+
+ +
+
+
+

Coming Soon

+

Another site on the way.

+
+
+
+
+ + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..4cfdcc5 --- /dev/null +++ b/js/main.js @@ -0,0 +1,42 @@ +document.getElementById('year').textContent = new Date().getFullYear(); + +const gameCount = document.querySelectorAll('.cards .card:not(.card-locked)').length; + +function animateCount(el, target){ + let n = 0; + const step = Math.max(1, Math.ceil(target / 20)); + const t = setInterval(() => { + n += step; + if (n >= target){ n = target; clearInterval(t); } + el.textContent = String(n).padStart(2,'0'); + }, 50); +} +animateCount(document.getElementById('stat-games'), gameCount); + +const today = new Date(); +document.getElementById('stat-date').textContent = + String(today.getMonth()+1).padStart(2,'0') + '.' + + String(today.getDate()).padStart(2,'0') + '.' + + String(today.getFullYear()).slice(-2); + +const filterBtns = document.querySelectorAll('.filter-btn'); +const cards = document.querySelectorAll('.cards .card'); +filterBtns.forEach(btn => { + btn.addEventListener('click', () => { + filterBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + const f = btn.dataset.filter; + cards.forEach(c => { + if (f === 'all' || c.dataset.cat === f) c.classList.remove('hidden'); + else c.classList.add('hidden'); + }); + }); +}); + +const heroBg = document.querySelector('.hero-bg'); +window.addEventListener('scroll', () => { + const y = window.scrollY; + if (y < window.innerHeight) heroBg.style.transform = `scale(1.05) translateY(${y * 0.15}px)`; +}, { passive: true }); + +console.log('%c// GAME HUB // online','color:#a8b84a;font-family:monospace;font-size:14px'); \ No newline at end of file