This project features a stylish and user-friendly account creation form with interactive validation and a social panel for easy contact. Built with HTML, CSS, and JavaScript, it delivers a seamless and modern experience. π―
- π¨ Modern UI with glassmorphism effect.
- π Real-time Form Validation for better user experience.
- π§ Email Validation to ensure correct email format.
- π Password Match Check for secure account creation.
- β€οΈ Interactive Social Panel with direct links to your profiles.
- πΌοΈ Responsive Design for various devices.
- π HTML5
- π¨ CSS3 (with Google Fonts and Font Awesome)
- π JavaScript (ES6)
- π₯ Clone the Repository
git clone https://github.com/machinelearningprodigy/signup.git
- π Navigate to the Project Directory
cd account-form
- π₯οΈ Open index.html in a browser That's it! The form should be live in your default browser. π―
π Form Validation Rules π
Username: Required (cannot be blank)
Email: Must follow standard email format (e.g., user@example.com).
Password: Required and must match the confirmation password.
Confirm Password: Must match the entered password.
π¨ UI Highlights
π Background: Elegant, blurred background with a modern design.
π Validation Icons: Checkmarks for success β and exclamation marks for errors β.
π Social Panel: Easily toggle the social panel with a floating button.
π± Responsive Design
The form layout adapts seamlessly to different screen sizes, ensuring a great experience across devices. π²
π§© Code Overview
π index.html
Contains the form structure and interactive social panel.
π¨ sign.css
Manages styles, including glassmorphism effects and validation feedback.
π§ script.js
Handles form validation, icon toggling, and social panel interactions.
π Social Links
π Kaggle
π GitHub
π LinkedIn
π Facebook
π· Instagram
π§ Ensure sign up.jpg exists in the root directory for the background image.
π Adjust social links if accounts change.
π€ Contributing
Contributions are welcome! Feel free to fork, improve, and submit a pull request. π±
π License
π Free to use - Attribution appreciated but not required!
Happy Coding! β¨
- Replace the placeholder image URL with a real screenshot of your form.
- Update the GitHub repository URL if needed.
- Ensure your background image is correctly named
sign up.jpgand located in the root folder.
This README file is designed to present your project professionally while keeping it engaging with relevant emojis and clear structure. Let me know if you need more customization!