A collection of modern and colorful login/signup form UI templates built with HTML and CSS.
This project provides a versatile set of beautifully designed login and signup forms, each with a unique color theme. Whether you're looking for a dark, light, or vibrant aesthetic, this UI kit offers a range of options to easily integrate into your web projects.
- Multiple Themes: Includes a wide array of color themes like Light, Dark Purple, Green, Red, Yellow, Black, Royal Purple, Chocolate, Orange, Pink, Brown, Gray, Beige, Maroon, Navy, Teal, Turquoise, Magenta, and Olive.
- Responsive Design: Forms are designed to look good on various screen sizes.
- Clean HTML & CSS: Well-structured and easy-to-understand code.
- Font Awesome Integration: Uses Font Awesome for clear and modern icons.
- Automatic Smooth Scrolling: A small JavaScript snippet for an aesthetic auto-scroll feature, allowing users to easily browse through the different themes.
You can see a live demo of all the forms by simply opening the index.html file in your browser.
It's super simple!
-
Clone or download the repository (Recommended):
git clone [https://github.com/khdxsohee/login-ui-kit.git](https://github.com/khdxsohee/login-ui-kit.git) cd login-ui-kit -
Or, Download Manually:
- Click the "Code" button on the GitHub repository page.
- Select "Download ZIP".
- Extract the contents of the ZIP file to your desired directory.
-
Open in Browser:
- Navigate to the project folder.
- Simply open
index.htmlin your favorite web browser (Chrome,Firefox,Edge, etc.).
The forms will be displayed, and the page will automatically scroll through them.
You can easily customize these forms:
- Add New Themes:
- In
index.html, duplicate an existing<div class="form-container ...">block. - Assign a new unique class name (e.g.,
custom-theme-mode). - In
style.css, create a new CSS block for.custom-theme-modeand define your desired colors, gradients, and other styles.
- In
- Change Colors: Modify the
background,color,inputstyles, andbuttongradients within the specific theme classes instyle.css. - Adjust Scrolling: Open
index.htmland locate the<script>tag at the very end of the<body>.- Change
scrollAmountto control how many pixels are scrolled per step (smaller value = finer scroll). - Change
scrollIntervalTimeto control the delay between each scroll step (larger value = slower scroll).
- Change
Contributions are welcome! If you have suggestions for new themes, improvements, or bug fixes, please:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature-nameorbugfix/your-bugfix-name). - Make your changes.
- Commit your changes (
git commit -m 'feat: Add new awesome theme'orfix: Fix scrolling issue). - Push to the branch (
git push origin feature/your-feature-name). - Open a Pull Request.
Please ensure your code follows the existing style and is well-commented.
Made with ❤️ by khdxsohee