What Can You Build? — ASOBI Game Portal

ASOBI uses a custom pixel font called "Minecraft" that you won't find on Google Fonts. Instead, the font file is stored locally inside the project and loaded manually using a CSS rule called @font-face. You will see it declared inside a <style> tag in the HTML.

font-family is the name you make up — you use this name later in CSS whenever you write font-family: "Minecraft". The src is the path to the font file. ./assets/fonts/ means "start from the current folder, go into assets, then fonts". The format("truetype") tells the browser what kind of font file it is — .ttf files are always truetype.

On the welcome screen, each letter of "ASOBI" bounces independently. To make that work, each letter had to be its own separate HTML element. That is why you see this in the code instead of just writing the word normally.

A <span> is an invisible inline container. It has no visual effect on its own — it just groups something so CSS can target it. Because each letter is now its own element, CSS can apply a different animation delay to each one, making them bounce at slightly different times instead of all at once.

The bouncing letters on the welcome screen are made with a CSS @keyframes animation. This is how you define a motion in CSS — you describe where something starts, where it goes, and where it ends up. Then you attach that motion to an element.

:nth-child() is a CSS selector that targets an element based on its position. :nth-child(2) means "the second child element inside the parent." By giving each span a slightly larger delay, the letters start their bounce at different moments, creating the wave effect. Without the delays, they would all bounce at exactly the same time and look like a single block.

The deep dark purple background that looks like a glow in the centre of the screen is not an image — it is a single line of CSS using radial-gradient. A radial gradient radiates outward from a centre point, fading from one color to another.

The word circle sets the shape of the gradient. #1a002b is the inner color — a very dark purple. #000 is pure black, which appears at the outer edges. This single line replaces what you might expect to be a complex background image setup.

The welcome text on the landing page scales smoothly as you resize the browser window — tiny on mobile, enormous on a big screen. This is done using the clamp() function, which lets you set a minimum size, a preferred size, and a maximum size all in one value.

2.5rem is the smallest the text will ever be — even on a tiny phone. 8vw is the preferred size — 8% of the viewport width, so it scales as the screen gets wider. 20rem is the ceiling — no matter how large the screen is, the text will never exceed this size. Without clamp, you would need multiple media queries just to handle font scaling.

The navbar stays fixed at the top of the page as you scroll. This is done with position: sticky combined with top: 0. But there is also a z-index value on it — and that is the part beginners often miss.

z-index controls the stacking order of elements on the page — think of it like layers in a drawing app. Higher z-index means closer to the front. Without it, page content could scroll on top of the navbar and cover it. rgba() is like a hex color but with a fourth value for transparency — 0 is invisible, 1 is fully solid, and 0.8 is mostly opaque with a slight see-through effect.

The hamburger menu icon — three horizontal lines — transforms into an X when clicked. No images are swapped, no icons are hidden and shown. The three lines literally rotate and move using CSS transform, triggered by an .active class that JavaScript adds.

The translate() inside the transform moves the line slightly so the two arms of the X cross exactly in the centre. Without the translate, the lines would rotate around their own starting points and the X would look off. The transition property on the base state is what makes it animate smoothly — without it, the change would be instant and jarring.

On desktop, the navigation links are always visible in a row. On mobile, they collapse and only appear when the hamburger is clicked. This switch is handled entirely in CSS using a @media query — a block of CSS that only applies when the screen is a certain size.

Notice that the nav is hidden using three separate properties — opacity, visibility, and pointer-events. Just using opacity: 0 alone makes it invisible but still clickable, which would cause accidental clicks. visibility: hidden removes it from interaction, and pointer-events: none is a safety net. All three together plus a transition creates the smooth dropdown effect.

When you click the hamburger button, the menu opens. Click it again, it closes. This is handled by a single method: classList.toggle(). It adds the class if it is not there, and removes it if it already is — making it perfect for on/off behaviour.

The e.stopPropagation() line is easy to miss but important. Events in JavaScript "bubble" upward — a click on the hamburger also counts as a click on the document. The code below listens for document clicks to close the menu, so without stopPropagation, clicking the hamburger would open the menu and immediately close it again. This line stops the event from travelling further up the page.

When a user clicks a nav link, the mobile menu should close automatically. Instead of adding a click listener to each link one by one, the code selects all of them at once and loops through them.

querySelectorAll returns a NodeList — similar to an array — of every element that matches the CSS selector you give it. "a" means every anchor tag inside the nav. The for loop then walks through each one and attaches the same click listener. This is much cleaner than writing five separate addEventListener calls.

A common UX expectation is that clicking anywhere outside a dropdown closes it. ASOBI handles this by listening for clicks on the entire document and checking whether the click happened inside or outside the navbar elements.

e.target is the specific element the user clicked on. .contains() checks whether a given element exists inside another — it returns true or false. The ! at the start flips the result — so !hamburger.contains(e.target) means "the click was NOT inside the hamburger". The && means both conditions must be true for the code inside to run.