The Duke's Emporium is an accurate recreation of the Shop UI from the game Resident Evil Village. It was made as a CSS and JS/JQuery learning project.
Shop at the Emporium now!I made Duke’s Emporium because I wanted to get more practice with CSS, especially with CSS Grid and responsive layouts. I had been playing through RE: Village at the time and I love the Duke character, so that’s why I decided on recreating his UI.
I started by taking a screenshot of the in-game UI, and the sectioning it off into each main area, then sub-area, then sub-sub areas ( etc…), and writing down all their margins and sizes are percentages. Then I set about recreating that layout on a blank HTML page using CSS Grid. Every single element on that page is divided into grids and sub-grids, all the way down. Even the page margins are grids. Check out the image showcase above to see what my layout breadown looks like.
Having done the layout, I then had to style the image and text elements, giving them appropriate fonts and responsive sizes. The website is basically completely responsive in 16:9 ratios from 720p and higher. Anything else and it breaks because that’s what the in-game UI was designed around. Getting the images used in the website was actually really gurelling, because I had to painstakingly go the home and take a screenshot of every item possible in the store, and then photoshop it out.
I also used this opportunity to learn how to use jQuery and display content dynamically. In the static HTML file, there are no item cards inside the shop, but there is a <template> tag that contains all the elements required for the item (its icon, name, price, and whether it’s sold out). JQuery then loads an items.json that contains every item in the store along with its relevant info, and populates the shop with instances of the item template for each item in the file.
You’ll also notice that when you hover over any item icon in the shop, you get a full-sized 3D render of what that specific item looks like in-game. Not only that, but it also displays the item and description on the info box at the bottom of the shop page, as well as displaying item stats if the item is a weapon. This data is also from that json file.
All HTML, CSS, and Javascript was done by me. The shop design, images, and other intellectual property are owned by CAPCOM.
Check out Resident Evil Village