Goalz - Template HTML

GOALZ. is a modern, ready-to-use HTML football sports portal template built for score sites, club portals, fan platforms and sports news blogs.

It ships with a clean emerald green + slate visual identity, dark and light themes, English/Indonesian language switching, interactive match schedules, league standings, news, players, statistics, gallery and a multi-step registration wizard.

All pages share one header and footer injected from a single JavaScript file, so you can customize branding once and it updates everywhere. The layout is fully responsive and works well on desktop, tablet and mobile.

Included pages:

• Home — 3-column layout, live video banner, hero slider, match table, standings & news
• About — profile section with stats cards
• Schedule — full match list with Today / Tomorrow / All / Bracket tabs
• Standings — Premier League & League 1 tables
• Players — star player cards
• Statistics — top scorers & assists
• Gallery — photo grid with lightbox zoom
• News & News Detail — category filters, likes, shares and comments
• Contact — contact info + message form
• Login & Register — login form and multi-step signup wizard

Perfect for agencies, freelancers and developers who need a polished football website starter without a heavy framework.

Features

• 12 ready-made HTML pages for a complete football portal
• Dark / Light theme with localStorage persistence
• English & Indonesian language switch with localStorage persistence
• Sticky header with navigation dropdowns, theme toggle and auth buttons
• League sidebar accordion with sample clubs per competition
• Auto-playing hero slider (3 slides)
• Interactive match table: Today / Tomorrow / All tabs, Live filter and team search
• Tournament bracket view on the schedule page
• League standings tables (Premier League & League 1)
• News list with category tabs, like/share actions and comments
• News detail page with related/popular articles sidebar
• Photo gallery with lightbox zoom controls
• Multi-step registration wizard with progress steps
• Shared header & footer injected from one JS file
• Page transition animation (players passing a ball)
• Custom favicon / site icon (200×200)
• Fully responsive layout for desktop, tablet and mobile
• Clean CSS variables for easy color/theme customization
• Font Awesome icons + Google Fonts (Poppins & Roboto)
• No build tools required — open and run with any static server

Requirements

• Any modern web browser (Chrome, Firefox, Edge, Safari)
• A static web server (Laragon, XAMPP, VS Code Live Server, or php -S / npx serve)
• Internet connection for CDN assets (Google Fonts, Font Awesome, demo images/videos)
• Basic HTML / CSS / JavaScript knowledge for customization
• Optional: text editor such as VS Code or Cursor

Instructions

1. Download and unzip the package.
2. Place the folder into your web root (e.g. Laragon www) or open it with any static server.
3. Open index.html in the browser to preview the home page.
4. To change colors or themes, edit the CSS variables in css/style.css under :root (dark) and [data-theme="light"].
5. To edit translations, update the I18N dictionary at the top of js/main.js.
6. To customize the header or footer on all pages, edit HEADER_HTML and FOOTER_HTML in js/main.js.
7. To update match data, edit the MATCHES array in js/main.js.
8. Replace demo images, logos and text with your own content as needed.
9. Upload the full folder to your hosting and point the domain to it.