🧾 Semantic HTML Form

---

📌 Project Description

This repository contains a semantic HTML5 form implementation based on provided specifications.
The project demonstrates best practices in HTML form structure, accessibility, and semantic organization.

---

🎯 Purpose

The form is designed to:

• Collect personal details from users
• Capture contact information
• Record preferences and interests
• Provide account setup fields

---

🎨 CSS Styling Assignment — User Registration Form

📘 Overview

This project is a professionally styled User Registration Form developed as part of the IYF Programming Class SSN9 assignment.
It demonstrates mastery of CSS layout, color management, responsive design, and interactive form states following modern web standards.

---

🧩 Styling Approach

✳️ Methodology

The form was styled using a modular CSS approach with:

• Custom properties (CSS variables) for color management
• Flexbox for centering and layout alignment
• Consistent spacing using margin and padding
• External stylesheet (style.css) — no inline styling
• Comments to separate key sections (layout, inputs, buttons, responsive design)

---

🎨 CSS Variables

Category	Variable	Color Code	Usage
Primary	--primary-blue	#2563eb	Main buttons, focus outlines
	--primary-dark	#1e40af	Button hover/active state
	--primary-light	#3b82f6	Highlights, subtle borders
Neutral	--background	#f9fafb	Page background
	--white	#ffffff	Form container background
	--text-dark	#1f2937	Headings, labels
	--text-light	#6b7280	Placeholder and hint text
	--border	#d1d5db	Default input borders
	--border-focus	#2563eb	Focus outline
Status	--success	#10b981	Success messages
	--error	#ef4444	Error messages
	--warning	#f59e0b	Alerts and warnings
Accent	--accent-purple	#8b5cf6	Decorative highlights
	--accent-pink	#ec4899	Range slider, hover accent

---

🧠 Design Decisions

🏗️ Layout

• Form container centered using Flexbox and limited to 600px width
• Light background for contrast with white form card
• Subtle shadow and border radius for depth

✍️ Typography

• Font: 'Poppins', sans-serif
• Clear hierarchy with larger title and readable label/input text
• Line height of 1.5 for clarity

🧾 Input & Button Styling

• Full-width inputs with padding and rounded corners
• Smooth hover/focus transitions
• Blue for primary actions, purple for reset button
• Hover/focus states are distinct for accessibility

💡 Interactive Feedback

• ✅ Green for valid input (--success)
• ❌ Red for invalid input (--error)
• 🔵 Blue focus outline for accessibility

---

📱 Responsive Design

• Padding and layout adjust for small screens
• Touch-friendly minimum input height (44px)

@media (max-width: 600px) {
  form {
    padding: 1.5rem;
  }
}


## 🖼️ Screenshots

### 🧾 Default Form View
![Default Form](screenshots/form-default.png)

### ⚠️ Error State (Password Mismatch)
![Error State](screenshots/form-error.png)

### ✅ Success Message
![Success Message](screenshots/form-success.png)