Spotify form replica

A pixel-close recreation of Spotify's marketing splash page, login flow, and three-step account creation funnel. The project is entirely static (HTML, CSS, JavaScript) yet captures the feel of the official site, including inline validation, progressive disclosure of form steps, and contextual warnings.

Table of Contents

• Features
• Screenshots
• Tech Stack
• Project Structure
• Setup and Usage
• Validation
• License

Features

• Landing + Auth Pages – index.html mirrors the public marketing hero; sites/login.html, sites/registration.html, and sites/registration-password.html replicate the authentication views with matching typography and spacing.
• Interactive Validation – Custom scripts add blur and input handlers that toggle .touched, .hidden, and .warning utility classes so errors appear instantly.
• Password Coach Marks – The password step highlights requirements (letter, number/special char, minimum length) with live SVG swaps and red state text.
• Progress Indicators – A progress bar plus “Step x of y” copy guide people through the registration funnel.
• Responsive Layouts – Independent stylesheets for landing, login, creation, and shared fonts keep the UI adaptable across viewports without a framework.
• Navigation Helpers – Lightweight helpers route users to the next step or open supporting pages without leaving the experience.

Screenshots

Login Form – Email/username and password inputs.

Registration – Email – Email verification step with validation hints.

Registration – Profile Info – Username, date of birth, and gender selection.

Tech Stack

• HTML5 for structure and semantic layout
• CSS3 (Flexbox, custom properties, animations) for styling
• Vanilla JavaScript for form validation, alerts (SweetAlert) , and UI transitions

Project Structure

website-copy-project/
├── index.html
├── sites/
│   ├── login.html
│   ├── registration.html
│   └── registration-password.html
├── styles/
│   ├── createAcc.css
│   ├── fonts.css
│   ├── index.css
│   ├── login.css
│   └── registration.css
├── js/
│   ├── emailValidity.js
│   ├── formCheck.js
│   ├── loginAlert.js
│   ├── nextStep.js
│   ├── openNewPage.js
│   ├── passwordValidity.js
│   ├── registrationAlert.js
│   ├── togglePassword.js
│   └── usernameValidity.js
└── assets/
	 ├── landing.png
	 ├── login.png
	 ├── registration.png
	 ├── registration-other.png
	 └── registration-password.png

Setup and Usage

1. Clone the repository

   git clone https://github.com/majtobijakodric/website-copy-project.git
   cd website-copy-project

2. Launch a static server (pick one):
   • VS Code Live Server extension
   • Python: python -m http.server 5173
   • Node: npx serve .
   • Or open index.html directly in a browser (best results with a server to preserve relative links)
3. Explore the flow:
   • index.html → CTA buttons
   • sites/login.html → email/password validation + password toggle
   • sites/registration.html → email/username stage
   • sites/registration-password.html → password coach marks → profile details → confirmation step

Validation

• Login credentials are hardcoded inside js/loginAlert.js so the prototype can demo the alerts without a backend.
• The first working pair is username: maj with password: 123; the same arrays also accept maj@gmail.com as the matching email entry.

Author

Maj Tobija Kodrič

License

MIT License. See LICENSE for details.