A single-page scrolling website about the Nintendo Switch, built with hand-written HTML and CSS — no framework, no build step, no JavaScript libraries. Video backgrounds, background audio, and a fixed navigation bar over nine content sections.
Coursework project (Web Technologies), TH Aschaffenburg.
Live: shehan121.github.io/Nintendo-switch
Or locally — open index.html in a browser, or serve the folder:
python3 -m http.server 8000
# then open http://localhost:8000/A local server is worth using rather than opening the file directly — some
browsers restrict autoplaying video and audio from file:// origins.
One HTML file, one stylesheet, and the media alongside it:
.
├── index.html the entire page — nav + nine sections
├── style.css all styling, ~9 KB
└── *.jpeg / *.png / *.mp4 / *.mov / *.mp3 / *.wav
The page is a fixed navigation bar over sections stacked vertically, each with
its own id, navigated by in-page anchors:
| Section | id |
Content |
|---|---|---|
| Hero | home-section |
Full-bleed Mario.mov video background |
| Culture | services-section |
"CULT.URE /kʌltʃə/" |
| History | (within) | Historical overview with background audio |
| Technical details | about-section |
Hardware specifications |
| Accessibility | accessibilitY-section |
Accessibility features |
| Joy-Cons | features-section |
Controller features |
| Influence | inf-section |
Cultural influence |
| Portfolio | portfolio-section |
pokeball.mp4 |
| Thanks / Contact | thanks-section, contact-section |
Closing sections |
- Full-viewport video backgrounds kept correctly proportioned with
@media (min-aspect-ratio: 16/9)— the video is scaled by width on wide screens and by height on tall ones, so it always covers without distorting. This is used three times. - A single responsive breakpoint at
max-width: 1023pxfor tablet and mobile layout. - Fixed navigation with a
menu-toggleelement for the collapsed mobile menu.
The page is deliberately heavy on media — roughly 24 MB across video (.mov,
.mp4), audio (.mp3, .wav) and images. Mario.mov alone is 10 MB.
Found while extracting and documenting the source. All are real and worth fixing:
-
Duplicate element IDs.
id="thanks-section"appears four times andid="features-section"twice. IDs must be unique in HTML; browsers resolve an anchor to the first match only, so the later sections are unreachable by link and the document fails validation. -
Two navigation links point at sections that do not exist. The nav contains
href="#join-section"andhref="#learn-section", but no element carries either ID — both links do nothing when clicked. -
Three sections are not linked from the navigation at all —
accessibilitY-section,inf-sectionandfeatures-sectionare reachable only by scrolling. Note also the stray capitalYinaccessibilitY-section. -
indo.htmlshould beindex.html.index.html, so it is served automatically at the directory root and the site is published with GitHub Pages. -
~24 MB of media is committed to Git. Git stores binaries poorly — every future change to a video keeps the old copy in history forever. Git LFS is the usual answer if these files ever need editing.
-
Filenames contain spaces (
Mario Theme Song.mp3,Warp Pipe Dreams 2.mp3), which have to be URL-encoded and are awkward on the command line.
This project was previously committed as a zip inside a zip —
nintendo-switch-main.zip containing an extensionless file NINTendo_2 that
was itself a zip archive of the site. Nothing was browsable, diffable or
reviewable on GitHub.
The archives have been unpacked and the source committed directly, along with
the macOS __MACOSX resource-fork entries being stripped. The site content is
unchanged.
Media assets are third-party material used for a non-commercial university coursework submission. Nintendo, Mario and related marks belong to their respective owners.
Shehan Nimsara — B.Sc. Software Design (International), TH Aschaffenburg