Monstercat album release page receration (Frontend Practice)

A responsive front-end recreation of Monstercat's album release page. This is a self-directed challenge from Frontend Practice.

👉 Check out the live demo!

📌 About the project

The goal is to recerate the structure, appearance, and behavior of Monstercat's album release page. Specifically, the preview page that Frontend Practice provides.

❗This is a personal practice project! all banding, content, and design elements remain the property of Monstercat. This clone is for educational, recreational, and non-commercial use only. Images, and text may be replaced with placeholders or free-to-use alternatives.

🍮 Features

• Mobile-first layout
• Responsive design
• Layout, hover states, and interaction mimicry (attempt)
• Blurred and transparent top navigation bar
• Blurred background image
• Cool Youtube video player (just an iframe, but don't worry about it)
• Working music player

🔧 Tech stack

• HTML5
• Javascript
• Tailwind CSS
• Vite

📷 Sources

• Frontend Practice challenge site
• This specific Monstercat album release page
• For images: Unsplash
• For icons: Boxicons and Flaticon
• For Placeholder Music: NoCopyrightSounds (NCS). Full track-by-track credits are listed in the Music Attribution and Licensing section below.

---

⏳ Status

This is a WIP! 🤫

Page structure (HTML) 🏗️

• Navigations?
  • Topbar navigation?
  • Sidebar navigation?
• Header/Hero/Album?
• Streaming?
• Track List?
• Music Video?
• Footer?

Styling (Tailwind) 🎨

• Navigations?
  • Topbar navigation?
    • Blurry topbar background?
  • Sidebar navigation?
• Header/Hero/Album?
• Streaming?
  • Tooltips?
• Track List?
• Music Video?
• Footer?
• Background image?

Javascript 🌚

• Sidebar navigation?
• Populate Tracklist with actual songs?
• Working music player?

Final stuff ✨

• Final code cleanup and commenting
• Deploy the site to Github Pages
• Add the live site link to the top of the README

🎵 Music Attribution and Licensing

The music used in this frontend recreation is for demonstration and portfolio purposes only and is sourced from NoCopyrightSounds (NCS) under their Usage Policy for independent content creators.

Music provided by NoCopyrightSounds. Full NCS Usage Policy

Track Name	Original NCS Track	Artist	Attribution Link
The Ascent	On & On (feat. Daniel Levi)	Cartoon, Jéja	Watch / Stream
Neon Drift	Royalty	Maestro Chives, Egzod, Neoni	Watch / Stream
Static Pulse	Sky High	Elektronomia	Watch / Stream
Ghost in the Machine	Fearless pt.II (feat. Chris Linton)	Lost Sky	Watch / Stream
Apex Protocol	My Heart	Different Heaven, EH!DE	Watch / Stream
Digital Horizon	Feel Good	Syn Cole	Watch / Stream
Transcendence	Hope	RetroVision	Watch / Stream
Core Dump	Link	Jim Yosef	Watch / Stream
Aurora Trail	Cradles	Sub Urban	Watch / Stream
Protocol Complete	Montagem Toma	X972, sk3tch01, MXZI	Watch / Stream

📝 Disclaimer

This is a personal, non-commercial project created for educational and recreational purposes only.
All text content, links, and branding elements in this project are copied from the Monstercat website album release for practice purposes.
All images, icons, and other media are sourced from free-to-use platforms (e.g., Unsplash, Boxicons) or replaced with placeholders.
Placeholder music and video embeds are sourced from NoCopyrightSounds (NCS) and are fully credited in the 'Music Attribution and Licensing' section above to comply with their usage policy. This project is not affiliated with, endorsed, sponsored, or specifically approved by Monstercat.
All original code in this repository is licensed under the MIT License.