A responsive, multi-page educational website covering cyber gaming, Genshin Impact, Counter-Strike, and League of Legends. It also includes an interactive cyber-gaming quiz and game-themed demos.
Live site: gaming-website-np.vercel.app
index.html— responsive landing pageAboutCyberGaming.html— introduction, history, benefits, risks, and healthy gaming tipsCyberGamingQuiz.html— ten-question knowledge quizgenshin.html— Genshin Impact overview, elemental reactions, gallery, and interactive formCSGO.html— Counter-Strike overview, game modes, loot-box demo, and reward formleague.html— League of Legends overview, lore carousel, drop rates, and skin selectorcredits.html— contributors and media references
This is a static HTML, CSS, and JavaScript project with no build step.
- Bootstrap 5.3.8 via jsDelivr
- jQuery 4.0.0 via the official jQuery CDN
- Shared site styles in
css/site.css - Shared header, footer, active navigation, and scroll-to-top behavior in
js/site.js
CDN URLs are pinned to tested versions and include Subresource Integrity hashes. The previous local copies of Bootstrap, jQuery, W3.js, and the scroll helper were removed.
The shared header and footer are loaded with fetch, so serve the project over HTTP instead of opening the HTML files directly:
python3 -m http.server 8000Then open http://localhost:8000.
.
├── css/ Page-specific and shared styles
├── js/ Page-specific and shared scripts
├── media/ Images, audio, video, and fonts
├── header.html Shared navigation
├── footer.html Shared footer
└── *.html Site pages
Large video files are tracked with Git LFS. Install Git LFS before cloning if you need the complete media assets.
- Update third-party versions and their integrity hashes together.
- Keep shared navigation and footer changes in
header.htmlandfooter.html. - Add site-wide layout rules to
css/site.css; keep page-specific visual treatments in their existing subfolders. - Test at mobile, tablet, and desktop widths after changing page layouts.