Hi! Welcome to Aether X1.

This is a project I built to push my frontend development skills to the next level. The goal was simple: create a landing page for a fictional premium headphone brand that looks and feels like a real top-tier tech site (Like: Apple or Sony).

I wanted something interactive. That's why I integrated a 3D Spline model right into the hero section, so you can actually feel the product before you scroll.

##What Makes This Cool?

• It’s Alive (3D!): The centerpiece of the site is a fully interactive 3D headphone model. You can rotate it, look around, and it changes the whole vibe of the page.
• Dark Mode Aesthetic: I went for a deep, "Cyberpunk-premium" look—lots of blacks, dark grays, and neon purple/cyan accents to make the product pop.

I built this from scratch usingt:

• HTML: For the structure and layout.
• CSS: For all the styling, grids, flexbox layouts, and those glowing neon effects.
• JavaScript: Used to power the "Technical Specs" accordion menu so it opens and closes smoothly.
• Spline: The tool I used to embed the 3D web scene.

You can run this on your own machine pretty easily:

1. Download this folder.
2. Open it in VS Code (or your favorite editor).
3. Go Live: If you use VS Code, just right-click index.html and hit "Open with Live Server."

Created by Yaseen Gadalrb Grade 11 Web Development Project For Midnight hackclub event