A modern and fully responsive Sign In / Sign Up page with animated sliding panels built using HTML, CSS, and JavaScript.
This project features smooth transitions, social login UI buttons, mobile switching support, and a clean professional layout.
This authentication interface provides:
- User Registration Form
- User Login Form
- Animated Sliding Overlay Panel
- Social Media Login UI (Facebook, Google, LinkedIn)
- Responsive Design for Mobile Devices
The project is currently front-end only and can be integrated with any backend authentication system such as:
- Node.js / Express
- Django
- Spring Boot
- PHP
- Firebase Authentication
- 🔄 Toggle between Sign In & Sign Up
- 🎨 Smooth Sliding Animation Effect
- 📱 Fully Responsive Design
- 🌐 Social Media Icon Buttons
- 🔐 Password Field Support
- 💻 Modern Clean UI Layout
- 📲 Mobile-Specific Switch Buttons
- 🧠 JavaScript Controlled Panel Animation
- HTML5
- CSS3
- JavaScript
- Font Awesome Icons
login-auth-ui/
│── index.html
│── style.css
│── script.js
│── README.md
1️⃣ Download or clone the repository:
git clone <your-repository-link>
2️⃣ Open the project folder.
3️⃣ Open index.html in your browser.
No additional setup or installation required.
- Two form containers (Login & Register) are placed side-by-side.
- A sliding overlay panel moves left/right when buttons are clicked.
- JavaScript toggles classes on the wrapper container.
- CSS handles animations and transitions.
- Mobile version includes dedicated switch buttons.
- Add backend authentication system
- Add form validation (real-time validation)
- Add password strength indicator
- Implement "Remember Me" functionality
- Connect to database (MongoDB / MySQL)
- Add OAuth login functionality
- Add Dark / Light mode toggle
Aryan Gore
Computer Science Student | Web Developer
⭐ If you like this project, consider giving it a star!