Comp 305, Fall 2025
This project implements a responsove login page using HTML5 and CSS. It has a foucs on structure, acessibility and visual design, while using semantic tags. The goal of the lab is to build a professional, user friendly interface that matches the image reference.
By the end of this project, we will have:
- A responsive two column login page layout using CSS Grid
- Centered and aligned content using Flexbox
- Valid and semantic HTML structure with labled form elements
- Consistent coloring controlled through CSS Variables
- A polished and professional interface that matches the reference design
The page layout contains two main sections:
- Left Panel: A gradient blue background with a title and short tagline
- Right Panel: The login form with sign in and passowrd input boxes. Along with a sign in and Forget Password button.
This project followed a structured design workflow:
- Setip base HTML structure using semantic tags
- Implement two column grid layout in CSS
- Center form content using flexbox
- Use CSS variables for a consistent theme
- Add hover and focus elements for interactivity
- Polishings to match the reference design
├── docs/ │ ├── index.html – Main HTML file │ └── styles.css – Stylesheet for layout and design ├── README.md – Project documentation
Key design choices include:
- Use of CSS variables to improve maintainability and future theme updates
This project is licensed under the MIT License — see LICENSE.md for details.
William Sampson