Sign-Up Form

A modern, responsive sign-up form project built as part of The Odin Project curriculum.

Description

This project showcases a complete sign-up form interface with a two-column layout featuring a branded left sidebar and a comprehensive form on the right. The design emphasizes user engagement with a dark theme, custom styling, and form validation.

Features

• Responsive Two-Column Layout: Left sidebar with branding and right side with form elements
• Form Fields:
  • First Name (required)
  • Last Name
  • Email (required)
  • Phone Number (9-digit validation)
  • Password (required)
  • Confirm Password (required)
• Custom Styling: Dark theme with accent color (#e6007e)
• Typography: Poppins font family for modern appearance
• Professional Design: Includes logo, background imagery, and smooth visual hierarchy
• Form Validation: Built-in HTML5 validation for required fields and email format

Technologies Used

• HTML5: Semantic markup for form structure
• CSS3: Custom styling with CSS variables for easy theme customization
• Flexbox: Responsive layout using CSS Flexbox

How to View

1. Clone this repository or download the files
2. Open index.html in your web browser
3. The form will display with the full design and styling

Project Structure

sign-up-form/
├── index.html          # Main HTML file with form structure
├── style.css           # Custom CSS styling
├── logo-g8230969e6_640.png  # Logo image
├── space-g1e38f8dc5_1920.jpg # Background image (left sidebar)
└── README.md           # This file

Notes

• This is a static HTML/CSS project (form submission is not functional)
• The form includes basic HTML5 validation
• Designed with a mobile-first approach using viewport meta tags
• Color scheme uses CSS custom properties for easy theme modifications

The Odin Project

This project is part of The Odin Project, a free and open-source curriculum for learning web development.