Home About Work Services Writing Contact ES
BACK TO PROJECTS
ID: 33 // Web // Development

G2A REDESIGN

HTMLCSSFRONTENDE-COMMERCE
G2A REDESIGN
MISSION

G2A Redesign is a frontend reimplementation of the G2A website, the world's largest video game key marketplace. The project started as a progressive learning exercise and evolved section by section, incorporating new HTML and CSS techniques in each iteration. Its value lies in the pixel-perfect fidelity to the mockup previously designed in Adobe XD, demonstrating the ability to translate a visual design into functional code.

CATEGORY

Development — Web

SOURCE github ↗
DIAGNOSIS
> g2a-dev@mission-control:~$ diagnostics --run

ERROR: The project required mastering semantic HTML and
modern CSS from scratch, without frameworks or external
libraries to abstract away layout complexity.

WARN: Each new section had to incorporate techniques
that had not been practiced before: flexbox, grid,
media queries, CSS animations, and hover transitions.

CRITICAL: The implementation had to be pixel-perfect
against the Adobe XD mockup, with a maximum tolerance
of 2px deviation in each measured component.
SOLUTION

The implementation progressed section by section: header with responsive navigation and hamburger menu, hero section with a promotional image carousel, product grid with hover effects that reveal price and discount, and footer with links organized by category. All CSS was written without preprocessors or frameworks, using custom properties to maintain color consistency. Media queries cover three main breakpoints, ensuring functionality from 320px to desktop screens.

GALLERY
G2A REDESIGN screenshot
G2A REDESIGN screenshot
G2A REDESIGN screenshot
G2A REDESIGN screenshot