Return to All-Star

Test Site

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Allstar Member Information</title>
<meta name="description" content="Allstar Member Information Portal: News, Competition Information, Calendars & Schedules." />
<style>
:root{
--red:#dc2626; /* primary red */
--black:#0b0b0c; /* near‑black */
--gray-900:#111215;
--gray-800:#1b1c20;
--gray-700:#2a2c31;
--gray-600:#3a3d44;
--gray-500:#4c5058; /* deep gray */
--gray-300:#a2a6ad; /* mid gray */
--silver:#c9ccd3; /* silver */
--white:#ffffff;
--radius-xl: 20px;
--radius-lg: 14px;
--shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; color:var(--white); background:linear-gradient(180deg,var(--black),var(--gray-900));
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
line-height:1.5;
}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
/* Top bar */
.topbar{background:linear-gradient(90deg,#e7e7ea,var(--white),#e7e7ea); color:#111; position:sticky; top:0; z-index:50; border-bottom:1px solid #d6d7db}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.logo-wrap{display:flex; align-items:center; gap:12px}
.logo-box{width:52px;height:52px;border:2px dashed #9aa0a6;border-radius:12px;background:#fff; display:grid; place-items:center; font-size:10px; line-height:1.1; color:#6b7280; text-align:center}
h1{font-size:20px; margin:0; color:#0b0b0c}
.subtitle{font-size:12px; color:#6b7280; margin-top:2px}

.nav{display:none; gap:8px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .95rem; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; border:0; cursor:pointer}
.btn-red{background:var(--red); color:#fff}
.btn-dark{background:#0f1114; color:#fff}
.btn-light{background:#fff; color:#111}
.btn:hover{filter:brightness(.95)}
.btn:focus{outline:2px solid #ef4444; outline-offset:2px}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:
radial-gradient(800px 300px at 15% 10%, rgba(255,255,255,.18), transparent 60%),
radial-gradient(700px 400px at 80% 70%, rgba(220,38,38,.28), transparent 60%);
opacity:.25; pointer-events:none}
.hero-inner{padding:64px 0}
.hero h2{font-size:40px; margin:0 0 8px}
.lead{color:#d1d5db; max-width:60ch}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.card-hero{border-radius:var(--radius-xl); background:linear-gradient(135deg,#0f1116,#181b21); border:1px solid #2b2f36; padding:18px; box-shadow:var(--shadow)}
.frame{border-radius:16px; background:
linear-gradient(90deg,#d1d5db,#b9bec7); padding:1px}
.frame-inner{border-radius:15px; background:#0b0d12; padding:18px}
.swatch-grid{margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; font-size:12px; text-align:center}
.swatch{padding:8px 10px; border-radius:10px; font-weight:700}

/* Sections */
section{padding-top:48px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px}
.section-head h2{margin:0; font-size:28px}
.badge{background:linear-gradient(90deg,var(--silver),#9ca3af); color:#111; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:800}

.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(1, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(1, minmax(0,1fr))}
@media (min-width: 768px){
.nav{display:flex}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
}

.card{position:relative; overflow:hidden; border:1px solid var(--gray-700); background:rgba(24,26,31,.7); border-radius:var(--radius-xl); padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.card::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--red),#9ca3af,var(--red))}
.tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#ef4444; font-weight:800}

/* Mini calendar */
.cal-card{border:1px solid var(--gray-700); background:rgba(24,26,31,.7); border-radius:var(--radius-xl); padding:18px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center}
.cal-day-h{font-size:12px; color:#c6c9d0; font-weight:700}
.cal-btn{aspect-ratio:1/1; border-radius:8px; background:#0b0d12; color:#d1d5db; border:0; cursor:pointer}
.cal-btn:hover{background:#1a1e25}
.legend{display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:#c9ccd3; margin-top:10px}
.pill{padding:4px 8px; border-radius:999px}

/* Footer */
footer{border-top:1px solid var(--gray-700); background:#0a0b0f; margin-top:50px}
.foot{display:flex; flex-direction:column; gap:16px; padding:28px 0}
.foot-links{display:flex; gap:10px; flex-wrap:wrap}
.foot a{background:#111319; color:#fff; padding:8px 10px; border-radius:10px; font-size:12px; text-decoration:none}

/* Utilities */
.muted{color:#aeb3bb}
</style>
</head>
<body>

<div class="topbar">
<div class="container topbar-inner">
<div class="logo-wrap">
<div class="logo-box" aria-label="Logo placeholder">Your<br>Logo<br>Here</div>
<div>
<h1>Allstar Member Information</h1>
<div class="subtitle">Everything members need — in one place.</div>
</div>
</div>
<nav class="nav" aria-label="Primary">
<a class="btn btn-red" href="#news" aria-label="Jump to News">News</a>
<a class="btn btn-dark" href="#competition" aria-label="Jump to Competition Information">Competition Info</a>
<a class="btn btn-light" href="#calendar" aria-label="Jump to Calendars and Schedules">Calendars & Schedules</a>
</nav>
</div>
</div>

<header class="hero">
<div class="container hero-inner">
<div class="grid grid-2" style="align-items:center">
<div>
<h2>Red • Black • Silver • Gray • White</h2>
<p class="lead">Keep members in the loop with announcements, competition details, and up‑to‑date calendars. Replace the logo square with your image and start posting updates below.</p>
<div class="cta-row">
<a class="btn btn-red" href="#news">View Latest News</a>
<a class="btn btn-dark" href="#competition">Competition Info</a>
<a class="btn btn-light" href="#calendar">Calendars & Schedules</a>
</div>
</div>
<div>
<div class="card-hero">
<div class="frame">
<div class="frame-inner">
<p class="muted"><strong style="color:#fff">Logo spot:</strong> replace the top‑left square or drop your logo here.</p>
<div style="display:grid; place-items:center; margin-top:10px">
<div style="width:112px;height:112px;border-radius:16px;border:2px dashed #59606a;background:#12151a"></div>
</div>
<div class="swatch-grid">
<div class="swatch" style="background:var(--red); color:#fff">Red</div>
<div class="swatch" style="background:#0b0b0c">Black</div>
<div class="swatch" style="background:#fff; color:#111">White</div>
<div class="swatch" style="grid-column:1/-1;background:linear-gradient(90deg,#c9ccd3,#9aa0a8); color:#111">Silver / Gray</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>

<main class="container">

<section id="news">
<div class="section-head">
<div>
<h2>News</h2>
<p class="muted">Announcements, updates, and important notices for members.</p>
</div>
<div class="badge">Silver accent</div>
</div>
<div class="grid grid-3">
<article class="card">
<div class="tag">Update</div>
<h3>Welcome to the Allstar season!</h3>
<p class="muted">Post your latest announcements here — team placements, practice changes, parent meetings, and more.</p>
<p><a class="btn btn-light" href="#">Post a News Item</a></p>
</article>
<article class="card">
<div class="tag">Reminder</div>
<h3>Uniform fitting week</h3>
<p class="muted">Add dates, times, and location details. Include what athletes should bring.</p>
<p><a class="btn btn-light" href="#">Add Details</a></p>
</article>
<article class="card">
<div class="tag">Alert</div>
<h3>Weather policy</h3>
<p class="muted">Summarize your severe weather and closure policy. Link out to the full policy if needed.</p>
<p><a class="btn btn-light" href="#">Edit Policy</a></p>
</article>
</div>
</section>

<section id="competition">
<div class="section-head">
<div>
<h2>Competition Information</h2>
<p class="muted">Event schedules, venues, travel notes, and athlete check‑in times.</p>
</div>
<div class="badge">Silver accent</div>
</div>
<div class="grid grid-2">
<div class="card">
<h3>Upcoming Events</h3>
<ul class="muted">
<li><strong style="color:#fff">Showcase:</strong> Add date, call time, and uniform.</li>
<li><strong style="color:#fff">Competition #1:</strong> City, venue, warm‑up & performance times, awards.</li>
<li><strong style="color:#fff">Competition #2:</strong> Hotel info, travel notes, parent meeting link.</li>
</ul>
<p><a class="btn btn-red" href="#">Add Event Details</a></p>
</div>
<div class="card">
<h3>Travel & Packing</h3>
<ul class="muted">
<li>Airport & flight suggestions</li>
<li>Hotel room blocks & booking deadlines</li>
<li>What to pack (uniforms, bow, shoes, warm‑ups)</li>
<li>Coach & chaperone contacts</li>
</ul>
<p><a class="btn btn-light" href="#">Upload PDF Packet</a></p>
</div>
</div>
</section>

<section id="calendar">
<div class="section-head">
<div>
<h2>Calendars & Schedules</h2>
<p class="muted">Practice calendars, blackout dates, and event schedules.</p>
</div>
<div class="badge">Silver accent</div>
</div>
<div class="grid grid-3">
<div class="cal-card">
<h3>Practice Calendar</h3>
<div class="cal-grid" aria-label="Practice calendar">
<div class="cal-day-h">S</div><div class="cal-day-h">M</div><div class="cal-day-h">T</div><div class="cal-day-h">W</div><div class="cal-day-h">T</div><div class="cal-day-h">F</div><div class="cal-day-h">S</div>

<script>
// Render 35 buttons, 1..31 numbers then blanks
document.addEventListener('DOMContentLoaded',()=>{
const calGrids = document.querySelectorAll('.cal-grid');
calGrids.forEach((grid)=>{
const headerCount = 7; // skip weekday headers already present
let count = 0;
while(grid.children.length < headerCount + 35){
const btn = document.createElement('button');
btn.className='cal-btn';
count++;
btn.textContent = count <= 31 ? String(count) : '';
btn.setAttribute('aria-label', `Calendar day ${count}`);
grid.appendChild(btn);
}
});
});
</script>
</div>
<div class="legend">
<span class="pill" style="background:#171a21">Practice</span>
<span class="pill" style="background:var(--red); color:#fff">Competition</span>
<span class="pill" style="background:#30343c">Closure</span>
</div>
</div>
<div class="cal-card">
<h3>Competition Calendar</h3>
<div class="cal-grid" aria-label="Competition calendar">
<div class="cal-day-h">S</div><div class="cal-day-h">M</div><div class="cal-day-h">T</div><div class="cal-day-h">W</div><div class="cal-day-h">T</div><div class="cal-day-h">F</div><div class="cal-day-h">S</div>
</div>
<div class="legend">
<span class="pill" style="background:var(--red); color:#fff">Event</span>
<span class="pill" style="background:#30343c">Travel</span>
</div>
</div>
<div class="cal-card">
<h3>Gym Closures & Holidays</h3>
<div class="cal-grid" aria-label="Closure calendar">
<div class="cal-day-h">S</div><div class="cal-day-h">M</div><div class="cal-day-h">T</div><div class="cal-day-h">W</div><div class="cal-day-h">T</div><div class="cal-day-h">F</div><div class="cal-day-h">S</div>
</div>
<div class="legend">
<span class="pill" style="background:#30343c">Closed</span>
<span class="pill" style="background:#171a21">Limited Hours</span>
</div>
</div>
</div>
<div class="cta-row" style="margin-top:14px">
<a class="btn btn-red" href="#">Sync with Google/Apple Calendar</a>
<a class="btn btn-dark" href="#">Download Monthly PDF</a>
</div>
</section>
</main>

<footer>
<div class="container foot">
<div>
<div class="muted">© <span id="year"></span> Allstar — Member Information Portal</div>
<div class="muted" style="font-size:12px">Built with a red, black, silver, gray & white palette.</div>
</div>
<div class="foot-links">
<a href="#news">News</a>
<a href="#competition">Competition Info</a>
<a href="#calendar">Calendars & Schedules</a>
</div>
</div>
</footer>

All-Star

Test Site

For More Information