Login Page with Seamless Transitions ✨

A modern, visually appealing Login Page with a dark theme, smooth transitions, and password validation for a seamless user experience. This design is easy to integrate into any project and ensures that both login and signup forms are simple and intuitive.

🌟 Features

• 🎨 Dark Theme: A stylish, dark background with light text that provides a modern and clean look.
• 🚀 Smooth Form Transitions: Beautiful, fluid transitions between the login and signup forms for a pleasant user experience.
• 🔐 Password Validation: Ensures the password and confirmation password match in the signup form to prevent errors.
• 📱 Responsive Design: The layout adjusts smoothly across different screen sizes and devices.

🚀 Quick Start

1. Clone or Download the repository to your local machine.

   git clone https://github.com/noahpombas-dev/loginpage.git
   

2. Open the index.html file in your browser to see the login page in action.

---

🧑‍💻 File Structure

/login
  ├── assets/
  │    ├── css/
  │    │    └── index.css         # Custom styles for the page
  │    ├── js/
  │    │    ├── index.js          # Handles form transitions
  │    │    └── passwordconfirm.js # Password validation logic
  │    └── bootstrap/
  │         ├── bootstrap.min.css  # Bootstrap styling
  │         └── bootstrap.bundle.min.js  # Bootstrap bundle
  ├── index.html                   # The main HTML file

📝 index.html

The HTML structure for the login and signup forms, including input fields and buttons. All the magic happens here!

🎨 assets/css/index.css

This file contains custom CSS for the page, which handles the dark theme, form styling, smooth transitions, and more.

⚙️ assets/js/index.js

Contains JavaScript code to handle the seamless transitions between the login and signup forms.

🔒 assets/js/passwordconfirm.js

Validates that the "Password" and "Confirm Password" fields match in the signup form. It shows an error if they don't.

---

💡 How to Customize

This login page is designed to be easy to modify! Here’s how you can make it your own:

• Change Colors: Modify the index.css file to update the background, text, and button colors to fit your brand.
• Fonts: Update the font family in index.css for a unique style.
• Add More Fields: Easily extend the forms to include extra fields like phone numbers or address inputs.

---

💬 Live Demo

You can see the page in action! Click here for the live demo

---

🛠️ Dependencies

This project relies on a few core dependencies:

• Bootstrap: For the responsive layout and styling. It's lightweight and easy to use!
• Vanilla JavaScript: To handle form transitions and password validation.

---

🎯 License

This project is open source and free to use! Feel free to fork it, modify it, and contribute.

---

Made with ❤️ by Noah