Split Screen

A full-height brand panel beside a plain white sign-in form.

About This Template

The left half is a gradient brand panel with a headline and decorative shapes; the right half is a plain white form panel. Reads as more premium and marketing-forward than a single centered card, and stacks to one column on mobile.

Login PageCategory

HTML & CSSFormat

Two-columnMarketingResponsive

Full Preview

Split Screen login page template preview

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split Screen Login Page Template — Free HTML & CSS</title>
<meta name="description" content="Free split-screen login page template: a gradient brand panel beside a plain sign-in form. Responsive HTML & CSS code, ready to copy for marketing sites.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://fatimahopefoundation.com/templates/login-pages/05-split-screen">

<meta property="og:type" content="website">
<meta property="og:title" content="Split Screen Login Page Template — Free HTML & CSS">
<meta property="og:description" content="Free split-screen login page template: a gradient brand panel beside a plain sign-in form. Responsive HTML & CSS code, ready to copy for marketing sites.">
<meta property="og:url" content="https://fatimahopefoundation.com/templates/login-pages/05-split-screen">
<meta property="og:image" content="https://fatimahopefoundation.com/images/login/05-split-screen.png">
<meta property="og:site_name" content="Fatima Hope Foundation">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Split Screen Login Page Template — Free HTML & CSS">
<meta name="twitter:description" content="Free split-screen login page template: a gradient brand panel beside a plain sign-in form. Responsive HTML & CSS code, ready to copy for marketing sites.">
<meta name="twitter:image" content="https://fatimahopefoundation.com/images/login/05-split-screen.png">

<link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="split-wrap">
    <section class="panel panel-visual">
      <div class="visual-content">
        <div class="brand-mark">S</div>
        <h2>Do great things<br>with your team</h2>
        <p>Join thousands of teams already collaborating faster and smarter.</p>
        <div class="dots"><span></span><span></span><span></span></div>
      </div>
    </section>

    <section class="panel panel-form">
      <div class="form-inner">
        <h1>Sign in</h1>
        <p class="subtitle">Enter your details to access your account</p>

        <form class="login-form">
          <label class="field">
            <span>Email</span>
            <input type="email" placeholder="you@example.com" required>
          </label>
          <label class="field">
            <span>Password</span>
            <input type="password" placeholder="••••••••" required>
          </label>

          <div class="row-between">
            <label class="checkbox">
              <input type="checkbox">
              <span>Remember me</span>
            </label>
            <a href="#" class="link">Forgot password?</a>
          </div>

          <button type="submit" class="btn-primary">Sign In</button>
        </form>

        <div class="divider"><span>or</span></div>

        <div class="social-row">
          <button class="btn-social" type="button">Continue with Google</button>
        </div>

        <p class="footer-text">Don't have an account? <a href="#">Sign up for free</a></p>
      </div>
    </section>
  </main>
</body>
</html>

style.css

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: #111827;
}

.split-wrap {
  min-height: 100vh;
  display: flex;
}

.panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }

.panel-visual {
  background: linear-gradient(155deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.panel-visual::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  top: -180px; right: -160px;
}
.panel-visual::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  bottom: -140px; left: -100px;
}

.visual-content { max-width: 380px; position: relative; z-index: 1; }

.brand-mark {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  margin-bottom: 28px;
}

.visual-content h2 { font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.visual-content p { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.6; margin-bottom: 30px; }

.dots { display: flex; gap: 8px; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.dots span:first-child { width: 22px; border-radius: 6px; background: #fff; }

.panel-form { background: #ffffff; }
.form-inner { width: 100%; max-width: 380px; }

h1 { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.subtitle { color: #6b7280; font-size: 14px; margin-bottom: 30px; }

.login-form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #374151; }

.field input {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-weight: 400;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }

.row-between { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.checkbox { display: flex; align-items: center; gap: 8px; color: #374151; cursor: pointer; }
.checkbox input { accent-color: #4f46e5; }
.link { color: #4f46e5; text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }

.btn-primary {
  margin-top: 4px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #4f46e5;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: #4338ca; }
.btn-primary:active { transform: scale(0.98); }

.divider { display: flex; align-items: center; text-align: center; color: #9ca3af; font-size: 12px; margin: 24px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.divider span { padding: 0 12px; }

.btn-social {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background .15s;
}
.btn-social:hover { background: #f3f4f6; }

.footer-text { margin-top: 24px; text-align: center; font-size: 13px; color: #6b7280; }
.footer-text a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.footer-text a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .split-wrap { flex-direction: column; }
  .panel-visual { min-height: 260px; padding: 40px 24px; }
  .visual-content h2 { font-size: 24px; }
  .panel-form { padding: 40px 24px; }
}