Tem Revil
  1. Portfolio
  2. Projects
  3. Arkham Studio
Arkham Studio logo

Arkham Studio

Arkham is a gaming news website design, with a featured-games slider, game cards, a news section and a contact form, built in plain HTML, CSS and JavaScript.

  • HTML
  • CSS
  • JavaScript

The story behind it

The problem

Gaming news sites live on big artwork and fast browsing, and many of them bury both under ads and clutter. Arkham was my design for a clean gaming news front page where the games come first.

What I built

A one-page site in three parts. The header is a slider of featured games (Spider-Man, Call of Duty: Modern Warfare III and Cold War, Fortnite, The Batman, Stray) where choosing a card swaps the large artwork and its title and text. Below it, game cards for titles like Grand Theft Auto V, Forza Horizon and Halo link out to their store pages. Then come a news section, a contact form, and a footer with company links and social media.

Decisions

  • No framework. Plain HTML, CSS and JavaScript, so every effect is hand-written and the page loads with nothing to install.
  • Content as data. The game entries live in a separate data file, so adding a game means adding an entry, not editing the layout.
  • A navigation bar that reacts. The top bar is transparent over the artwork and turns into a blurred glass bar once you scroll, so it stays readable without covering the hero.
  • Type with attitude. Six self-hosted typefaces, each with a role: Bebas Neue and Oswald for loud headlines, Caveat, Permanent Marker and Shadows Into Light for hand-drawn accents, and Cairo for body text. Gaming culture is loud, and the type says so.
  • Artwork stays readable. Large game art is dimmed with a brightness filter behind text, so titles stay legible on any image, and a strip of studio logos scrolls on a slow 30-second loop, keeping the page alive without pulling focus.

Where it stands

Designed and built in June 2024 as part of my early front-end work. Live at arkham.temrevil.com, source on GitHub.

Built by

  • Mohammed AhmedFrontend Developer

More projects

Want something like Arkham Studio built?A free 60 minute call about your project, in your own time zone.

Book a call