# 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.

   ```bash
   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](https://login.noahpombas.ch) *(if hosted online)*.

---

## 🛠️ Dependencies

This project relies on a few core dependencies:

- **[Bootstrap](https://getbootstrap.com/)**: 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