HTML Login & Sign-up Pages

Login form on the left, a brand panel with illustration and a testimonial on the right. The most common SaaS sign-in.

A centred sign-in card on a soft gradient with Google, GitHub and email, plus a link to sign up.

A sign-up form with name, email, a live password-strength meter with checklist, terms checkbox and a benefits column.

Passwordless sign-in: enter your email, then a "check your inbox" screen with resend timer and open-mail shortcuts.

A six-digit verification screen with auto-advancing boxes, paste support, backspace navigation and a resend option.

A three-step reset flow in one card: request link, set a new password with match checking, then a success state.

A guided onboarding: sidebar progress list, a step with selectable role cards and team size, and Back/Continue navigation.

A dark glass card with Sign in / Sign up tabs, passkey button and email form. Built for dev tools and apps.

A sign-in card floating over a full-screen illustration, with a short brand message in the corner. Good for travel, hospitality and consumer apps.

A mobile-first login by phone with a country code picker and SMS code step. For local services, bookings and delivery apps.

A secure banking sign-in: customer number, password, then three random characters from your memorable word. Security tips and a fraud warning sit alongside.

Enter your work email first; company domains switch to "Continue with SSO" while others get a password step. Includes Google and Microsoft options and a clear "not you?" back link.

A learning app "Who's learning today?" screen: big profile tiles with illustrated avatars and progress, an add-profile tile, a manage mode, and a 4-digit PIN pad for grown-up profiles.

A desktop sign-in by scanning a code with the phone app: step-by-step instructions, an expiring code with countdown and refresh, a "scanned, confirm on phone" state, and a password fallback tab.

A primary school portal where children sign in by picking their class and name, then tapping their three secret pictures in order. Large touch targets, friendly feedback and a teacher link.

A restaurant clock-in kiosk for a shared tablet: tap your photo, enter a 4-digit PIN on a big keypad, then clock in or start a break. Shows the time, date and who is on shift.

A product-led sign-up: choose Free or Pro right in the form (with a trial note), sign up with Google, Apple or email, workspace URL preview, and a short benefits strip.

The second step of sign-in: choose a verification method (authenticator, text, security key or backup code), each with its own input, a resend timer for texts, and "trust this device".

A "your session timed out" lock screen over a blurred dashboard: big clock, illustrated avatar, password-only unlock with caps-lock warning, switch account and a sign-out link.

A calm, accessible clinic portal sign-up: large text and controls, a three-step progress bar, identity check with patient number, date of birth and postcode, then password creation with clear rules.

A chat-style sign-up for a language app: the app asks one question at a time in bubbles, your answers appear as replies, with goal chips, Enter to continue and edit-previous-answer links.

Accepting a workspace invitation: who invited you, the workspace and its members, your role, then a short set-password form with Google sign-in, plus an expired-invite variant you can preview.

A “choose an account” screen: saved accounts with workspace and last used, a remove-from-this-device mode, “use another account” and a password step for the chosen account.

A game studio sign-up that asks date of birth first: adults choose a username with availability check, under-13s are asked for a parent’s email instead, with a friendly illustrated header.

A set-new-password screen for an insurance portal: each rule ticks off as you type, a strength label, a matching confirm field, show/hide, and a success screen with sign-in link.

A hotel guest Wi-Fi sign-in: connect with room number and surname, or a free 1-hour pass by email, speed tiers, terms acceptance and a connected state with time remaining.

Activating a streaming TV app: the TV shows a code, and on your phone or laptop you type the 8-character code into split boxes, see which device it is, then confirm. Includes the TV screen preview.

An office reception tablet: visitor enters their name and company, picks who they are visiting from photo tiles, agrees to the safety note, and gets a badge preview with a “we’ve told your host” message.

Changing the email you sign in with: current email shown, new email with typo hints (“did you mean gmail?”), password confirmation, then a 6-digit code sent to the new address with a resend timer.

A secure sign-in that shows remaining attempts after a wrong password, then a temporary lock with a live countdown, unlock-by-email link and help, before letting you try again.