Ableton website home page recreation (Frontend Practice)

A responsive front-end recreation of the Ableton website's home page. This is a self-directed challenge from Frontend Practice to improve my layout, design, and vanilla JavaScript skills. Also, because it's fun.

👉 Check out the live site 🍘

📌 About the project

The goal is to recerate the structure, appearance, and behavior of the Ableton website. Specifically, only their homepage page. This is a pure front-end project: no frameworks, libraries, or build tools. just pure HTML, CSS, and JavaSript. 🙃

❗This is a personal practice project! all banding, content, and design elements remain the property of Ableton. 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 (because i've been blind; stuck on desktop-first 😔)
• Responsive design
• Page-by-page receration (depends lol)
• Vanilla HTML/CSS/JavaScript only
• Layout, hover states, and interaction mimicry (attempt)

🔧 Tech stack

• HTML5
• CSS3 (flexbox, grid)
• JavaScript (vanilla)

No frameworks or tooling (e.g., no React, Tailwind, or Webpack)

📷 Sources

• Frontend Practice challenge site
• The Ableton website
• For images: Pexels and Unsplash
• For icons: Boxicons

⏳ Status

This is completed!

Page structure (HTML)

• Build the header/nav (desktop)
• Build the header/nav (mobile)
• Build the 'more+' menu
• Build the hero banner
• Build the main content
• Build the btn-scroll
• Build the html for footer

Styling (CSS)

• Mobile-first base style
• Style the header/nav
• Style the 'more+' menu
• Style the hero banner
• Style the main content
• Style 'show more' links
• Style the footer
• Style the btn-scroll
• Responsive hedaer/nav for tablet/desktop

Interactivity (JS)

• Mobile navigation menu toggle
• 'More+' menu toggle
• Btn-scroll

Final stuff

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

📝 Disclaimer

This is a fan-made, non-commercial project created for educational and recreational purposes only.
All text content, links, and branding elements in this project are copied from the Ableton website for practice purposes.
All images, icons, and other media are sourced from free-to-use platforms (e.g., Unsplash, Boxicons) or replaced with placeholders.
This project is not affiliated with, endorsed, sponsored, or specifically approved by Ableton AG.
All original code in this repository is licensed under the MIT License.