Sign-up Form

Hi 👋, I'm Daniel

This is my submission for The Odin Project's Sign-up Form project.

Live Version

Overview

This project is a sign-up form created as part of The Odin Project's Intermediate HTML and CSS course. The goal was to replicate a design provided by the course, with a focus on layout structure, form styling, and user interface elements. The form includes fields for name, email, password, and confirm password.

🛠 What I Used

• HTML: For structuring the content and form elements.

• CSS: For styling the form and layout.

  • CSS Pseudo-classes: For styling input fields when focused or invalid.
  • Colors and Shadows: Used for input borders and button styling.

• JavaScript (for future validation improvement): Used to validate each input field separately.

• 🦄 Tools & Technologies

• HTML5
  

• CSS3 (Vanilla CSS)
  

• JavaScript (for password validation, will be implemented in the future)
  

Features

• Sign-up form layout with fields for user details:
  • Full Name
  • Email Address
  • Password
  • Confirm Password
• Input field validation:
  • Invalid password field shows a red border.
  • Focused input field shows a blue border and subtle box-shadow.
• A Create Account button styled to match the overall design.
• Background image used for aesthetics.

How to View

1. Clone or download this repository.
2. Open the index.html file in your browser to view the sign-up form.
3. Or view the live version here: Sign Up Form on GitHub Pages

Screenshot

🎯 What I Learned

• Improved my HTML and CSS skills by creating a structured form.
• Learned to apply CSS pseudo-classes like :focus and :invalid for styling input fields.
• Gained experience with background images, color schemes, and box shadows for aesthetic form styling.

License

This project is open-source and available under the MIT License.