BMW Website Clone

A multi-page BMW website clone with Home, About, Contact, and Car Models pages — built with HTML, Bootstrap, CSS, and JavaScript.

HTML

Bootstrap

CSS

JavaScript

Source Code Live Site

Pages

Bootstrap

Framework

Multi-page Site

Type

Why I built this

The BMW website is one of the most polished automotive sites on the internet. I cloned it to push my Bootstrap and vanilla JavaScript skills, and to practice building a multi-page site with consistent navigation, responsive grids, and product showcase pages — all without a JavaScript framework.

How it works

The site has four connected pages — Home, About Us, Contact, and Car Models — sharing a common header and footer built with Bootstrap's navbar component. The Car Models page showcases BMW vehicles with image cards, descriptions, and hover effects. Bootstrap's grid system handles the responsive layout across all breakpoints. JavaScript adds interactive elements including a mobile menu toggle and smooth scroll behaviour.

Key decisions

Design choices

Bootstrap over custom CSS framework

For a multi-page site with consistent spacing, typography, and grid — Bootstrap is the right tool. It let me focus on the design recreation rather than reinventing layout utilities, and it taught me how to customise Bootstrap variables to match a brand's visual language.

Challenges

Problems solved

Maintaining design fidelity without Figma files

With no access to BMW's design system, I had to eyeball spacing, font weights, and color values from the live site using browser dev tools. Getting the details right — the exact shade of BMW blue, the precise card spacing — was a lesson in visual accuracy.

What I learned

Building a multi-page site without a framework forced me to think about shared state (like mobile menu open/closed) across pages differently. I learned how to structure vanilla JavaScript files to avoid global namespace collisions and how to use Bootstrap's component system without fighting against it.

Twitter Clone

To-Do List App