A single-page promotional website for Pantheon, a fictional 2D multiplayer mobile strategy game. The site was developed as the final project for the Web Technologies I course at the University of Latvia.
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 (Grid, Flexbox, media queries, backdrop blur) |
| Scripting | Vanilla JavaScript + jQuery 3.7.1 |
| Typography | Google Fonts (Cinzel Decorative, Cardo) |
| Iconography | Nerd Fonts webfont |
No build step or framework is required: open index.html in any modern browser.
wt1-final/
├── index.html # Page skeleton and content
├── styles.css # Layout, theming, responsive rules
├── script.js # Navbar logic, form validation, text utilities
├── images/ # Backgrounds, logos, news thumbnails, characters
└── notes.md # Internal development notes
The page adapts to both desktop and mobile viewports through CSS media queries and a JavaScript breakpoint check at 600 px:
- On desktop, the navbar sits inline in the header.
- On mobile, the navbar is detached from the header and re-injected as a full-viewport sliding panel, controlled by a hamburger button.
The resize handler in script.js swaps between the two layouts dynamically,
without requiring a page reload.
The header uses position: sticky together with backdrop-filter: blur(8px),
so the navigation bar stays visible on top of the parallax-style background
while the user scrolls.
When the hamburger icon is tapped on small screens, jQuery's animate()
slides the menu panel down. Tapping any nav link automatically closes the
menu before scrolling to the target section.
The landing banner shows the game title, logo, tagline, and a prominent call-to-action button that links to the Beta Testing section.
A flex-based grid of news cards, each composed of a thumbnail, title, short
body, and a Read more button. Cards lift slightly on hover thanks to a
transform + box-shadow transition.
A custom jQuery plugin ($.fn.checkLenght) automatically truncates each card
body to a viewport-aware character budget (60 chars on mobile, 91 on desktop)
and appends an ellipsis, ensuring uniform card heights.
A <form> with three fields collects beta-testing applications:
- E-mail — must match a basic email pattern.
- In-game username — alphanumeric only, max 16 characters.
- Date of birth — year must be
>= 1900and the applicant must be at least 13 years old.
Validation runs on submit. Errors are injected as <p class="form-error">
nodes directly before the relevant field, providing inline feedback without
relying on the browser's default UI (the form is marked novalidate).
The beta-testing section includes a <table> that contrasts the perks of a
regular release player against those of a beta player.
Contact information is presented as a list of clickable links:
mailto:for the addresstel:for the phone number- External links for Instagram and Facebook
Each entry is decorated with the corresponding Nerd Font icon.
A consistent two-tone palette is used throughout the site:
- Blue (
#39739f,#0077be) for body text, labels, headings and borders - Red (
#e0110a) for accents (<a>,<strong>,<em>, button hover state)
Two background images (pantheon-background.png and
pantheon-background-nodown.png) provide the themed atmosphere of the page.
git clone <repository-url>
cd wt1-final
xdg-open index.html # or open it manually in a browserA local web server is not required, but recommended (for example
python -m http.server) to avoid any potential issue with relative paths
when extending the project.
- Course: Web Technologies I
- Institution: University of Latvia
- Author: @luckignolo32