AfterLands - Game Landing Page

Project Name: AfterLands Project Type: Game Website Development (Figma to HTML) Overview

AfterLands is a Brazilian Minecraft: Java Edition server built around an original post-apocalyptic world, blending narrative RankUP progression with open-world RPG mechanics set in the city of Alkaz. I developed the official landing site, turning a static Figma design into an atmospheric, fully responsive marketing experience meant to pull players into the game's lore before they ever join.

A game landing page has to sell a feeling, not just information. The design leaned heavily on mood: a video hero, cinematic in-game environment shots, faction lore, and animated transitions. The build needed to carry that atmosphere while staying fast and responsive across devices, and it had to support multiple languages (PT-BR, English, Spanish) for a growing community.

Pixel-accurate conversion of the Figma design into semantic HTML and CSS

A cinematic hero with background video and a loading sequence

An interactive "choose your path" section presenting the three in-game factions, each expanding into detailed lore panels (motto, headquarters, recommended playstyle, backstory)

A gallery of in-game environment shots of Alkaz

An updates/transmissions section linking out to the blog

An FAQ section covering how to join, versions supported, and gameplay

Language switching across PT-BR, English, and Spanish

Smooth CSS animations and full cross-device responsiveness

HTML5, CSS3, Bootstrap 5, and JavaScript. Bootstrap handled the responsive grid; custom CSS drove the animations, faction panels, and the darker cinematic styling the brand needed.

I worked from the static Figma design and focused on preserving the atmosphere the designers intended, matching spacing, type, and motion rather than approximating them. The faction section was the most involved piece: each organization opens into a full lore card, so I wired that interaction in JavaScript to keep the layout compact while giving players room to dig into the story. Every section was tested across breakpoints before handoff.

An immersive, fast-loading, fully responsive landing page that captures the world of AfterLands and gives its community a proper home. The multilingual setup lets the server reach players beyond Brazil, and the lore-driven layout does the work of turning curious visitors into Discord members.

Live: https://afterlands.com/