Login and Registration Page

Project: design a login and registration page with clear fields, keyboard feedback and a comfortable narrow-screen layout.

Use properly associated labels, appropriate type="email" and type="password", and a visible submit control. The examples below illustrate CSS and basic browser-native form semantics only; they do not authenticate users.

A production authentication flow needs secure server-side validation, identity/session handling and error feedback. Never mistake a styled login form for a secure login system.

A constrained form card uses spacing, borders, responsive width and focus states; the server, not CSS, is responsible for authentication.

Start with labeled controls in a single column.

HTML

<form class="auth" action="#"><h2>Welcome back</h2><label for="login-email-one">Email</label><input id="login-email-one" type="email" autocomplete="email" required><label for="login-pass-one">Password</label><input id="login-pass-one" type="password" autocomplete="current-password" required><button type="button">Sign in (demo)</button></form>

CSS

.auth { display: grid; gap: 10px; max-width: 360px; padding: 20px; background: #eff6ff; border-radius: 12px; } .auth h2 { margin: 0 0 6px; } .auth input { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #94a3b8; border-radius: 6px; } .auth button { padding: 11px; background: #1d4ed8; color: white; border: 0; border-radius: 7px; }

Rendered output

Observe: The demo form has real labels and accessible input types; its demo button does not submit.

Add helper text, required fields, and a clear focus ring.

HTML

<form class="auth" action="#"><h2>Create an account</h2><p>Join our learning community.</p><label for="register-name-two">Full name</label><input id="register-name-two" type="text" autocomplete="name" required><label for="register-email-two">Email</label><input id="register-email-two" type="email" autocomplete="email" required><label for="register-pass-two">Password</label><input id="register-pass-two" type="password" autocomplete="new-password" minlength="8" aria-describedby="pass-help" required><small id="pass-help">Use at least eight characters.</small><button type="button">Register (demo)</button></form>

CSS

.auth { box-sizing: border-box; width: min(100%, 430px); display: grid; gap: 9px; margin-inline: auto; padding: clamp(16px,4vw,28px); background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 8px 28px rgb(15 23 42 / 10%); border-radius: 14px; } .auth h2 { margin: 0; color: #0f172a; } .auth p, .auth small { color: #475569; margin: 0 0 7px; } .auth label { font-weight: 600; } .auth input { box-sizing: border-box; width: 100%; padding: 11px; border: 1px solid #94a3b8; border-radius: 7px; } .auth input:focus-visible { outline: 3px solid #93c5fd; outline-offset: 1px; } .auth button { padding: 12px; background: #0f766e; color: #fff; border: 0; border-radius: 8px; font-weight: 700; }

Rendered output

Observe: The registration card stays narrow enough for readable forms, and the password hint is explicitly associated.

A constrained form card uses spacing, borders, responsive width and focus states; the server, not CSS, is responsible for authentication.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not imply a CSS-only demonstration stores accounts or validates credentials.

• Never ask users to enter real credentials into an example or preview.

Use this checklist to assess the completed CSS project:

• Every input has a visible associated label.
• Use appropriate input types and autocomplete hints.
• Clearly state that this is a front-end-only demo with no real authentication.

Design a registration variant with Confirm password and a clear nonfunctional demo label. Do not use real personal credentials.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Treat authentication UI design and authentication security as separate responsibilities.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.